thumbnails for a basemap toggle

NataliyaLys

I'm working on a JS Map. I have a webmap, and a basemap toggle added to my 'view'. My webmap uses Community basemap and another basemap that I included in the toggle is 'Hight contrast' basemap. The issue I have is that when I toggle between the basemaps, there is no thumbnail for my Community basemap. And I'm not sure how to add the thumbnail image, since the basemap comes from the webmap? 

I would appreciate any suggestions. 

 

 

const webmap = new WebMap({
portalItem: {
id: "74b1c8a79d8b4a328ebc625e1d91****",
portal: {
url: "https://*****.org/portal" 
}
}
});

// Create the map view
const view = new MapView({
map: webmap,
container: "viewDiv",
zoom: 11,
ariaLabel: "Interactive map to search an address and find Commissioner contact information"
});

const basemapToggle = new BasemapToggle({
view: view,
nextBasemap: new Basemap({
portalItem: new PortalItem({
id: "084291b0ecad4588b8c8853898d7****"
})
}),
widgetConfig: {
label: "Toggle basemap",
ariaLabel: "Switch between basemaps"
}
});

view.ui.add(basemapToggle, "bottom-left");

 

NataliyaLys

I got the thumbnail icon to work. For whatever reason it would not work with the Community basemap. But when I used a Topo basemap, it worked. I had to list the basemap update my webmap. I'm not sure if this is the best way to handle this, but it works.

const webmap = new WebMap({
basemap: "topo",
portalItem: {
id: "74b1c8a79d8b4a328ebc625e1d91****",
portal: {
url: "https://****.org/portal" 
}
}
});