topic Re: Basemap Toggle not working on 3.11 with custom basemaps! in ArcGIS JavaScript Maps SDK Questions

Basemap Toggle not working on 3.11 with custom basemaps!

El_BoukfaouiReda — Thu, 06 Nov 2014 15:57:16 GMT

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.

Basemap Toggle | ArcGIS API for JavaScript

Re: Basemap Toggle not working on 3.11 with custom basemaps!

yanivarazi — Mon, 01 Dec 2014 06:55:42 GMT

I get that too, did you get any reply ????

Re: Basemap Toggle not working on 3.11 with custom basemaps!

yanivarazi — Mon, 01 Dec 2014 07:32:12 GMT

what say your console ?????

Re: Basemap Toggle not working on 3.11 with custom basemaps!

DavidColey — Sat, 11 Dec 2021 16:39:04 GMT

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.

Re: Basemap Toggle not working on 3.11 with custom basemaps!

MattDriscoll — Sat, 11 Dec 2021 16:39:06 GMT

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>