I mean programmatically without using esri dijits (BasemapGallery, BasemapToggle).
I tried something like map.setBaseMap("Satellite") which works for maps other than webmaps built in AGOL /Portal.
It seems unreasonable if no API is available for such a common operation.
Solved! Go to Solution.
Simo,
You can get the base map by retrieving layer id 0 from the map.
map.removeLayer(map.getLayer(map.layerIds[0]));
//then set the new basemap using
var baseMapLayer = "your basemap layer";
baseMapLayer._basemapGalleryLayerType = "basemap";
map.addLayer(yourbasemap, 0);
Hi simo xu,
Maybe this is what you are looking for:
map.basemap = "satellite";
See example below where the basemap changes, depending on the scale of the view.
What do you think?
Cheers,
Egge-Jan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Watching property changes</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" />
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require(["esri/WebMap", "esri/views/MapView"], function(WebMap, MapView) {
var map = new WebMap({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
// watch handler: the callback fires each time the scale of the view changes
var handle = view.watch('scale', function(newScale) {
console.log("Scale: ", newScale);
console.log("Basemap: ", map.basemap.title);
if (newScale > 10000000) {
map.basemap = "satellite";
} else {
map.basemap = "streets";
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Thank you Egge-Jan,
Maybe I didn't state my issue clearly. I built the webmap in ArcGIS Online, and I "load" it using ArcgIS JavaScript API 3.28 like the following:
arcgisUtils.createMap("4abe6a830b8f466dacf8abfde567a781", "map").then(function (response) { //update the app dom.byId("title").innerHTML = response.itemInfo.item.title; dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; var map = response.map; //add the scalebar var scalebar = new Scalebar({ map: map, scalebarUnit: "english" });
The above is a code snippet from this ESRI exmaple.
In this case, I found I can't change the basemap of the webmap.
Simo,
You can get the base map by retrieving layer id 0 from the map.
map.removeLayer(map.getLayer(map.layerIds[0]));
//then set the new basemap using
var baseMapLayer = "your basemap layer";
baseMapLayer._basemapGalleryLayerType = "basemap";
map.addLayer(yourbasemap, 0);
Hi Robert,
Excellent, It works!
Thanks.