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

[JeffreyThompson2]

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

[NataliyaLys]

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,

[JeffreyThompson2]

Couple more things to try:

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

[NataliyaLys]

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.

[NataliyaLys · Accepted solution]

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