topic Re: thumbnails for a basemap toggle in ArcGIS JavaScript Maps SDK Questions

thumbnails for a basemap toggle

NataliyaLys — Tue, 18 Feb 2025 22:28:37 GMT

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");

Re: thumbnails for a basemap toggle

JeffreyThompson2 — Wed, 19 Feb 2025 13:42:26 GMT

I've encountered this issue before with a different basemap and fixed it through CSS.

//This should replace the broken image with the Community basemap image. .esri-basemap-toggle__image { background-image: url("https://www.arcgis.com/sharing/rest/content/items/184f5b81589844699ca1e132d007920e/info/thumbnail/thumbnail1659479749621.png?f=json"); }

Re: thumbnails for a basemap toggle

NataliyaLys — Wed, 19 Feb 2025 19:43:09 GMT

Hi @JeffreyThompson2 thank you for the suggestion.

I tried your solution, but it still would not work. I see the other thumbnail for the High Contrast Basemap in the dev console, it's loading automatically. But the one that I added in CSS for the Community Basemap is not showing up.

Perhaps you have any other ideas?

Thank you,

Re: thumbnails for a basemap toggle

JeffreyThompson2 — Wed, 19 Feb 2025 19:59:28 GMT

Couple more things to try:

Take the ?f=json off the end of the url.
Try targeting .esri-basemap-toggle__image--secondary instead.

Re: thumbnails for a basemap toggle

NataliyaLys — Wed, 19 Feb 2025 20:36:49 GMT

I tried different combinations of these two options, still no dice 😣

Take the ?f=json off the end of the url.
Try targeting .esri-basemap-toggle__image--secondary instead.

Re: thumbnails for a basemap toggle

NataliyaLys — Thu, 20 Feb 2025 20:16:53 GMT

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"
}
}
});