AnsweredAssumed Answered

Simple Layer Toggle with button

Question asked by bives on Feb 11, 2014
Latest reply on Feb 11, 2014 by bives
Hi,

I am attempting to create a layer toggle that will turn a tiled service's visibility from true to false. So far I can't find an example where someone is setting a layers visibility to false. Is this possible with a statement similar to this: mapMain.layers.aerialsLayer.visible = false;??

Any suggestions are appreciated.


 <!doctype html>  <html lang="en">  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="apple-mobile-web-app-status-bar-style" content="translucent-black">   <title>Custom Basemap Switcher</title>   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  <script src="http://js.arcgis.com/3.7/"></script>    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/overcast/jquery-ui.css" />  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/nihilo/nihilo.css">  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">   <style>   html, body{    height: 100%;    width: 99.9%;    margin: 0;    padding: 0;    overflow:hidden;   }    #map{    width: 100%;    height: 100%;    position: fixed;    padding: 0;   }   #BasemapToggle {    position: absolute;    top: 20px;    right: 20px;    z-index: 50;   }    </style>    <script>       var mapMain, currentBaseMap;              //Create an empty array to store a reference to the currently selected basemap layer       //var currentBasemap = [];        require([       "esri/map",       "esri/geometry/Extent",       "esri/layers/ArcGISTiledMapServiceLayer",       "esri/layers/ArcGISDynamicMapServiceLayer",       "dojo/ready",       "dojo/parser",       "dojo/on",       "dojo/dom",       "dojo/_base/array",        "dijit/layout/BorderContainer",       "dijit/layout/ContentPane"],       function (       Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,        ready, parser, on, dom, array, BorderContainer, ContentPane       ) {            ready(function () {                // Create the map               mapMain = new Map("map")                aerialsLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://gisaprd/ArcGIS/rest/services/Aerials_4inch_12inch_Cached/MapServer", { "id": "Aerials", "visible":false});                //If I uncomment these two lines both layers draw over the top of each other as expected.               mapMain.addLayer(aerialsLayer);                              streetsLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gisaprd/ArcGIS/rest/services/SRSLandbase/MapServer", { "id": "Streets" });               mapMain.addLayer(streetsLayer);               currentBaseMap = "Streets";                baseMapSwitchButton = dom.byId("baseMapSwitch");               on(baseMapSwitchButton, "click", ChangeBaseMap);                         });                     function errBack(results) {               alert(results);           }                   function ChangeBaseMap() {               if (currentBaseMap == "Streets") {                                     currentBaseMap = "Aerials";     //========================================================================================== //This is where I would like to have the layer visibility toggle on/off                  // mapMain.aerialsLayer.visible = true;                  // mapMain.layers.aerialsLayer.visible = true;               }               else if (currentBaseMap == "Aerials") {                   currentBaseMap = "Streets";                  // mapMain.layers.aerialsLayer.visible = false;               }  //==========================================================================================                };       }); </script>    </head>  <body>   <div id="map"></div>   <div id="basemapDialog" title="Choose a Basemap">    <div id="BasemapToggle">         <button data-dojo-type="dijit.form.Button" id="baseMapSwitch">Aerials</button><br>      </div>   </div>  </body> </html>    

Outcomes