Custom basemap with ESRI default basemaps

ADITYAKUMAR1

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

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-PortalBasemapsSource.html#UpdateBasemapsCallback