Custom basemap with ESRI default basemaps

ADITYAKUMAR1 · ‎10-13-2022

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

AnneFitz · ‎10-13-2022

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

let basemapGallery = new BasemapGallery({
   view: view,
   source: {
     query: {
       title: "United States Basemaps",
       owner: "Esri_cy_US"
     },
     updateBasemapsCallback: function(items) {
       // create custom basemap to be added to the array of portal basemaps
       let bm = new Basemap({
         portalItem: {
           id: "8dda0e7b5e2d4fafa80132d59122268c"  // WGS84 Streets Vector webmap
         }
       });
       // add basemap to the array
       items.push(bm);
       // return the array of basemaps
       return items;
     }
   }
});

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-Po...

View solution in original post

AnneFitz · ‎10-13-2022

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

let basemapGallery = new BasemapGallery({
   view: view,
   source: {
     query: {
       title: "United States Basemaps",
       owner: "Esri_cy_US"
     },
     updateBasemapsCallback: function(items) {
       // create custom basemap to be added to the array of portal basemaps
       let bm = new Basemap({
         portalItem: {
           id: "8dda0e7b5e2d4fafa80132d59122268c"  // WGS84 Streets Vector webmap
         }
       });
       // add basemap to the array
       items.push(bm);
       // return the array of basemaps
       return items;
     }
   }
});

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-Po...

ADITYAKUMAR1 · ‎10-13-2022

@AnneFitz This really helped. Thanks a lot.

ADITYAKUMAR1 · ‎01-16-2023

@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?

ADITYAKUMAR1 · ‎01-19-2023

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

AnneFitz · ‎01-17-2023

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?

ADITYAKUMAR1 · ‎01-17-2023

@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.

ADITYAKUMAR1 · ‎01-17-2023

@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