map = new esri.Map("map", { basemap: "topo", });
var layer = map.getLayer('basemap'); var layerUrl; switch(basemap){ case 'topo': layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer'; break; case 'imagery': layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'; break; } var basemap = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{id:'basemap'}); map.addLayer(basemap,0); alert(layer);
<div dojotype='dijit.layout.ContentPane' region='top' style='height:20px;'> <input type='button' value='Topo' onclick='switchMap("topo");'/> <input type='button' value ='Imagery' onclick='switchMap("imagery");'/> </div>
map = new esri.Map("map",{ extent:initExtent }); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",{id:'basemap'}); map.addLayer(basemap); function switchMap(basemap){ //remove the existing basemap layer var layer = map.getLayer('basemap'); map.removeLayer(layer); var layerUrl; switch(basemap){ case 'topo': layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer'; break; case 'imagery': layerUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'; break; } var basemap = new esri.layers.ArcGISTiledMapServiceLayer(layerUrl,{id:'basemap'}); map.addLayer(basemap,0); }
Solved! Go to Solution.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Map with legend</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } #rightPane { width: 20%; } #legendPane { border: solid #97DCF2 1px; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> var map; require([ "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/parser", "dijit/form/ToggleButton", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, ArcGISTiledMapServiceLayer, parser, ToggleButton ) { parser.parse(); map = new Map("map", { center: [-122.45, 37.75], zoom: 13 }); var base1 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", { id: "baseTopo", visible: true }); var base2 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", { id: "baseImagery", visible: false }); //add the legend map.on("layers-add-result", function (evt) { }); map.addLayers([base1, base2]); new ToggleButton({ showLabel: true, checked: false, onChange: function (val) { base1.setVisibility(!val); base2.setVisibility(val); } },"programmatic"); }); </script> </head> <body class="claro"> <!--[if IE 7]> <style> html, body { margin: 0; } </style> <![endif]--> <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> <button id="programmatic">Change Basemap</button> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Map with legend</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; } #rightPane { width: 20%; } #legendPane { border: solid #97DCF2 1px; } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> var map; require([ "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/parser", "dijit/form/ToggleButton", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( Map, ArcGISTiledMapServiceLayer, parser, ToggleButton ) { parser.parse(); map = new Map("map", { center: [-122.45, 37.75], zoom: 13 }); var base1 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", { id: "baseTopo", visible: true }); var base2 = new ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", { id: "baseImagery", visible: false }); //add the legend map.on("layers-add-result", function (evt) { }); map.addLayers([base1, base2]); new ToggleButton({ showLabel: true, checked: false, onChange: function (val) { base1.setVisibility(!val); base2.setVisibility(val); } },"programmatic"); }); </script> </head> <body class="claro"> <!--[if IE 7]> <style> html, body { margin: 0; } </style> <![endif]--> <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;"> <button id="programmatic">Change Basemap</button> </div> </div> </body> </html>
Hello
using the BasemapGallery Dijit we found this morning the new dark canvas layer which summarize now 10 basemaps in the gallery.
To remove one of these 10 basemap, there is a method in basemapgallery-amd | API Reference | ArcGIS API for JavaScript called remove(id)
Now what are the "id"s for these 10 basemaps?
I tried with "satellite", "osm" and ... but it doesn't work!
Thanks for help!
CS
Christian,
The id is something like "basemap_3" you can get these ids by looking through the basemapGallery.basemaps and then get the "id" of each or something like basemapGallery.basemaps[2].id;
Hi Robert
Thank you for you reply. Still nothing found sth. about the ids names;
console.log("id is "+basemapGallery.getSelected()); returns Null.
Also
function getBasemap(id){
var basemap = basemapGallery.get(id);
console.log(basemap.title);
}
returns "not defined".
You can find that out this way as you select new basemaps using the gallery
basemapGallery.on("selection-change", function () { basemap = basemapGallery.getSelected(); }); map.on("update-end", function () { console.log(basemap.id); });
Here's an example of that.