Dijit BasemapToggle Kills Map?

3584
2
Jump to solution
04-01-2015 03:28 PM
LauraMiles1
Occasional Contributor III

Hi,

I'm VERY new to the ArcGIS javascript API. I'm trying to get two ESRI samples to work together:

Toggle layer visibility | ArcGIS API for JavaScript

Basemap Toggle | ArcGIS API for JavaScript

I've got Toggle layer visibility working fine, but when I try to add in Basemap Toggle things go sideways and I don't know enough about the API to know why. Soon as I add in the reference esri/dijit/BasemapToggle, the map itself disappears. Here's my code:

<code>

<!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>Maps on Request</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">

  <style>

   html, body, #map {

     padding: 0;

     margin: 0;

     height: 100%;

   }

  

   #TOC {

   position: absolute;

   font-family: verdana, helvetica, arial;

   margin: 5px;

   padding: 25px;

   padding-left: 75px;

   z-index: 50;

   }

  

   #BasemapToggle {

   position: absolute;

   top: 20px;

   right: 20px;

   z-index: 50;

   }

  </style>

    <script src="http://js.arcgis.com/3.13/"></script>

    <script>

      var map;

      require([

     "esri/dijit/BasemapToggle",

        "esri/map",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/layers/ImageParameters",

        "dojo/dom",

        "dojo/on",

        "dojo/query",

        "dojo/domReady!"

      ],

        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {

          var layer, visibleLayerIds = [];

          map = new Map("map", {

  basemap: "topo"

  });

          //Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.

          var imageParameters = new ImageParameters();

   //This layer is visible on startup

          imageParameters.layerIds = [0];

          imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

          //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

          layerCadastral = new ArcGISDynamicMapServiceLayer("http://cop-gis4:6080/arcgis/rest/services/MOR/MOR_Cadastral_WGS1984/MapServer",

            {"imageParameters": imageParameters});

          map.addLayer(layerCadastral);

          on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);

          on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);

   on(dom.byId("layer2CheckBox"), "change", updateLayerVisibility);

  

          function updateLayerVisibility () {

            var inputs = query(".list_item");

            var inputCount = inputs.length;

            //Dummy layer - is there a workaround? Setting this to an actual layer means it can't be turned off

            visibleLayerIds = [1001];

            for (var i = 0; i < inputCount; i++) {

              if (inputs.checked) {

                visibleLayerIds.push(inputs.value);

              }

            }

            if (visibleLayerIds.length === 0) {

              visibleLayerIds.push(-1);

            }

            layerCadastral.setVisibleLayers(visibleLayerIds);

          }

  

   var toggle = new BasemapToggle({

  map: map,

  basemap: "satellite"

  }, "BasemapToggle");

  toggle.startup();

        });

  

    </script>

  </head>

  <body>

    <div id="TOC" Layer List:<br>

  <input type='checkbox' class='list_item' id='layer0CheckBox' checked value=0 />VFPA Boundary<br>

  <input type='checkbox' class='list_item' id='layer1CheckBox' value=3 />Municipal Boundaries<br>

        <input type='checkbox' class='list_item' id='layer2CheckBox' value=7 />Lots (zoom in)<br>

    </div>

    <div id="map"></div>

  <div id="BasemapToggle">BasemapToggle</div>

  </body>

</html>

</code>

0 Kudos
1 Solution

Accepted Solutions
SteveCole
Frequent Contributor

More than likely, the issue lies with the specified order of widgets in your code:

require([
     "esri/dijit/BasemapToggle",
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {.....

Change it to this and see what happens:

require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
     "esri/dijit/BasemapToggle",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {

In the function() declaration, basemapToggle must be in the same position specified as part of the reuire([..]) statement.

View solution in original post

2 Replies
SteveCole
Frequent Contributor

More than likely, the issue lies with the specified order of widgets in your code:

require([
     "esri/dijit/BasemapToggle",
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {.....

Change it to this and see what happens:

require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
     "esri/dijit/BasemapToggle",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {

In the function() declaration, basemapToggle must be in the same position specified as part of the reuire([..]) statement.

LauraMiles1
Occasional Contributor III

That was it - thank you Steve!