AnsweredAssumed Answered

Dijit BasemapToggle Kills Map?

Question asked by cleotokos on Apr 1, 2015
Latest reply on Apr 1, 2015 by cleotokos

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[i].checked) {

                visibleLayerIds.push(inputs[i].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>

Outcomes