Hi everyone,
I am consuming an ArcGIS Dynamic Map service and 2 basemaps on which I want to apply a BasemapToggle.
Any idea why this code is not working?
//Toggle
//console.log(esriConfig.defaults.map.basemaps);
esriConfig.defaults.map.basemaps.BaseMapEnglish = {
baseMapLayers: [
{ url: "http://geoportal.abudhabi.ae/rest/services/BaseMapEnglish/MapServer" }
],
title: "BaseMapEnglish"
};
esriConfig.defaults.map.basemaps.BaseMapSatellite = {
baseMapLayers: [
{ url: "http://geoportal.abudhabi.ae/rest/services/BaseMapSatellite1m/MapServer" }
],
title: "BaseMapSatellite"
};
console.log(esriConfig.defaults.map.basemaps);
var toggle = new BasemapToggle({
map: map,
basemap: "BaseMapSatellite",
basemaps: {
BaseMapEnglish: {
label: "BaseMapEnglish",
url: "http://www.delorme.com/images/homepage/dbm_icon.jpg"
},
BaseMapSatellite: {
label: "BaseMapSatellite",
url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg"
}
}
}, "BasemapToggle");
toggle.startup();
//Toggle
var MDServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.10.1.108:6080/arcgis/rest/services/ZS_MapDoc/MapServer",
{
"id": 'ZS',
"opacity": 0.6
});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://geoportal.abudhabi.ae/rest/services/BaseMapSatellite50cm/MapServer");
map.addLayer(basemap);
map.addLayer(MDServiceLayer);
Please help.
I basically referred to the following URL for my work but it doesn't seem to be working from my side.
I get that too, did you get any reply ????
what say your console ?????
In order to use the basemap dijit, just take a look at the api sample here:
Basemap Toggle | ArcGIS API for JavaScript
The toggle is designed to switch from an esri defualt base map to a second esri base map, like the ArcGIS satellite. Since you are tyring to add custom basemaps, you should use the baseMap gallery dijit. After the basemap loads, set up and call a createBaseMap funcition, pushing the basemap as defined by the basemapLayer into a basemaps array:
createBasemapGallery(); function createBasemapGallery(){ var basemaps = []; var wrldStreets = new Basemap({ layers: [new BasemapLayer({ url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" })], title: "World Streets", thumbnailUrl:"css/WorldStreets_r1.png" }); basemaps.push(wrldStreets);
Then, set up an image base map layer and push that into the array as well:
var wrldImg = new BasemapLayer({ url:"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" }); var img2014Bm = new Basemap({ layers:[wrldImg], title:"2014 Imagery", thumbnailUrl:"css/Aerial2013r2.png" }); basemaps.push(img2014Bm);
Then add the basemaps array to the basemap Gallery:
var basemapGallery = new BasemapGallery({ showArcGISBasemaps: false, basemaps: basemaps, map: mapMain }, "basemapGallery"); basemapGallery.startup(); basemapGallery.on("error", function(msg) { console.log("basemap gallery error: ", msg); }); }
Be sure to close the function, no need to call the default esri base map or on a load event, or load the basemap layers with an on-style event.
Hello,
It's because the default basemap is topo and it doesnt know what topo is. This will be easier in 3.12 to set custom basemaps and use them with the BasemapToggle widget.
This should work:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Basemap Toggle</title> <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css"> <style> html, body, #map { padding: 0; margin: 0; height: 100%; } #BasemapToggle { position: absolute; top: 20px; right: 20px; z-index: 50; } </style> <script src="//js.arcgis.com/3.11/"></script> <script> var map; require([ "esri/map", "esri/dijit/BasemapToggle", "esri/config", "dojo/domReady!" ], function ( Map, BasemapToggle, esriConfig ) { esriConfig.defaults.map.basemaps.BaseMapEnglish = { baseMapLayers: [ { url: "http://geoportal.abudhabi.ae/rest/services/BaseMapEnglish/MapServer" } ], title: "BaseMapEnglish" }; esriConfig.defaults.map.basemaps.BaseMapSatellite = { baseMapLayers: [ { url: "http://geoportal.abudhabi.ae/rest/services/BaseMapSatellite1m/MapServer" } ], title: "BaseMapSatellite" }; map = new Map("map", { center: [-70.6508, 43.1452], zoom: 16, basemap: "BaseMapEnglish" }); var toggle = new BasemapToggle({ map: map, basemap: "BaseMapSatellite", defaultBasemap: "BaseMapEnglish", basemaps: { BaseMapEnglish: { label: "BaseMapEnglish", url: "http://www.delorme.com/images/homepage/dbm_icon.jpg" }, BaseMapSatellite: { label: "BaseMapSatellite", url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg" } } }, "BasemapToggle"); toggle.startup(); var MDServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.10.1.108:6080/arcgis/rest/services/ZS_MapDoc/MapServer", { "id": 'ZS', "opacity": 0.6 }); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://geoportal.abudhabi.ae/rest/services/BaseMapSatellite50cm/MapServer"); map.addLayer(basemap); map.addLayer(MDServiceLayer); }); </script> </head> <body> <div id="map" class="map"> <div id="BasemapToggle"></div> </div> </body> </html>