Change background Map dynamically

CesiumJS
1

I’d like a drop down menu for dynamically changing the server url for the background Map. Does the map only get generated at startup when the viewer is created or can the map change dynamically?

I’ve tried . . .

viewer.imageryProvider.url = “new string path to map server”;
viewer.scene.requestRender();

But that didn’t work.

ALSO TRIED . . .

Created this function which gets called when dropdown menu item is selected . . .

function selectMap(selection)
{
if(selection.target.value == “SatelliteMap”)
{
mapType = “//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;
}
else
{
mapType = “//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer”;
}
viewer.scene.imageryLayers.removeAll(true);
viewer.scene.imageryLayers.addImageryProvider(Cesium.ArcGisMapServerImageryProvider({url: mapType}), 0);
viewer.scene.requestRender();
}

That did something, but not fully there. Here’s what it looked like . . .

image
image1430×862 68.5 KB

2

Hi @tzgardner , You can remove existing layer from the layerCollection by using removeAll and add new one. Check this sandcastle link.

Regards,

2 Likes
3

I see what I was missing from your example. I was missing the “new” keyword in the addImageryProvider call . . .

Update:

function selectMap(selection)
{
if(selection.target.value == “SatelliteMap”)
{
mapType = “//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer”;
}
else
{
mapType = “//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer”;
}
viewer.imageryLayers.removeAll(true);
viewer.imageryLayers.addImageryProvider( new Cesium.ArcGisMapServerImageryProvider({url: mapType}), 0);
}

1 Like
4

I’m glad to know that your issue has been resolved. :beers: