Select to view content in your preferred language

Custom basemap with ESRI default basemaps

1555
7
Jump to solution
10-13-2022 10:37 AM
ADITYAKUMAR1
Frequent Contributor

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Regular Contributor

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

7 Replies
AnneFitz
Esri Regular Contributor

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
Frequent Contributor

@AnneFitz This really helped. Thanks a lot.

 

0 Kudos
ADITYAKUMAR1
Frequent Contributor

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

0 Kudos
ADITYAKUMAR1
Frequent Contributor

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

0 Kudos
AnneFitz
Esri Regular Contributor

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? 

0 Kudos
ADITYAKUMAR1
Frequent Contributor

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

0 Kudos
ADITYAKUMAR1
Frequent Contributor

@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

0 Kudos