Basemap Toggle not working on 3.11 with custom basemaps!

2860
4
11-06-2014 07:57 AM
El_BoukfaouiReda
New Contributor II

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

0 Kudos
4 Replies
yanivarazi
New Contributor

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

0 Kudos
yanivarazi
New Contributor

what say your console ?????

0 Kudos
DavidColey
Frequent Contributor

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.

0 Kudos
MattDriscoll
Esri Contributor

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>