topic Re: Custom basemap with ESRI default basemaps in ArcGIS JavaScript Maps SDK Questions

Custom basemap with ESRI default basemaps

ADITYAKUMAR1 — Thu, 13 Oct 2022 17:37:06 GMT

Hi,

Is there a way we can add our custom base map along with ESRI default base maps in the basemap gallery widget in arcgis JavaScript 4.

In api 3 we had somthing like "showArcGISBasemaps = true" which used to fetch all the basemaps. Do we have something similar in version 4?

Thanks

Aditya Kumar

Re: Custom basemap with ESRI default basemaps

AnneFitz — Thu, 13 Oct 2022 18:57:49 GMT

Hi @ADITYAKUMAR1 - you can do this via the updateBasemapsCallback property, here's an example:

Here's the snippet within a test app: https://codepen.io/annefitz/pen/rNvPKNr

The documentation can be found here: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapGallery-support-PortalBasemapsSource.html#UpdateBasemapsCallback

Re: Custom basemap with ESRI default basemaps

ADITYAKUMAR1 — Thu, 13 Oct 2022 19:17:35 GMT

@AnneFitz This really helped. Thanks a lot.

Re: Custom basemap with ESRI default basemaps

ADITYAKUMAR1 — Mon, 16 Jan 2023 17:36:57 GMT

@AnneFitz I updated the code with a basemap layer .

this.basemapGallery = new BasemapGallery({
view: this.map.mapView,
container: this.basemapGalleryDiv,
source: {
query: {
title: "Custom Basemap",
},
updateBasemapsCallback: (items) => {
if (this.customBasemap) {
items.push(this.customBasemap);
}

console.log(items);

return items;

}
}
});

And this works as expected. A new baselayer is being added to the basemap gallery but it works only on first click. If we choose any other basemap and when we comes back to our custom basemap, the basemap doesnt load again. Any idea why?

Re: Custom basemap with ESRI default basemaps

AnneFitz — Tue, 17 Jan 2023 16:14:15 GMT

Hi @ADITYAKUMAR1 - Could you provide a codepen that reproduces your error? Or is there an error message that shows in the console that you could share?

Re: Custom basemap with ESRI default basemaps

ADITYAKUMAR1 — Tue, 17 Jan 2023 17:02:56 GMT

@AnneFitz I am sorry I wont be able to help on that but if you want I can share a video no how its behaving. While clicking on the custom basemap second time there are no error in the console and there is no network traffic as well to hit the custom basemap url.

Re: Custom basemap with ESRI default basemaps

ADITYAKUMAR1 — Tue, 17 Jan 2023 17:24:16 GMT

@AnneFitz

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
BasemapGallery widget | Sample | ArcGIS Maps SDK for JavaScript 4.25
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.25/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/BasemapGallery",
"esri/Basemap",
"esri/widgets/BasemapLayerList"
], (Map, SceneView, BasemapGallery, Basemap,
BasemapLayer) => {
const map = new Map({
basemap: "gray-vector"
});

const view = new SceneView({
container: "viewDiv",
map: map,
center: [139.68, 35.68],
zoom: 3
});
customBasemapLayer = new BasemapLayer("http://gisbasemap.ecan.govt.nz/arcgis/rest/services/SimpleBasemap/MapServer");
customBasemap = new Basemap({
layers: [customBasemapLayer],
id: "test",
title:"test",
thumbnailUrl: "http://gisbasemap.ecan.govt.nz/arcgis/rest/services/SimpleBasemap/MapServer/info/thumbnail"
});
// const basemapGallery = new BasemapGallery({
// view: view
// });
const basemapGallery = new BasemapGallery({
view: view,

source: {
query: {
title: "Custom Basemap",
},
updateBasemapsCallback: (items) => {
if (this.customBasemap) {
items.push(this.customBasemap);
}

console.log(items);

return items;
// return items;

}
}
});
// Add the widget to the top-right corner of the view
view.ui.add(basemapGallery, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

Hope this will help

Re: Custom basemap with ESRI default basemaps

ADITYAKUMAR1 — Thu, 19 Jan 2023 08:32:50 GMT

@AnneFitz There was a problem with defining the custom basemap. I rectified it and its working fine. Your code was perfect.