Simple Layer Toggle with button

BrandonIves — Tue, 11 Feb 2014 18:33:07 GMT

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>

Re: Simple Layer Toggle with button

JakeSkinner — Tue, 11 Feb 2014 19:04:42 GMT

Hi Brandon,

You can do this using the setVisibility method. Ex:

aerialsLayer.setVisibility(false);

Re: Simple Layer Toggle with button

BrandonIves — Tue, 11 Feb 2014 19:16:21 GMT

Jake,

I couldn't get that method to work outside the function where I am defining the layer. I have tried it several ways and it seems like a simple thing to do I just can't get the syntax.

aerialsLayer.setVisibility(false);
mapMain.aerialsLayer.setVisitility(false);

Unhandled exception at line 102, column 19 in http://localhost:58255/myBaseMapButtonTest.html

0x800a138f - JavaScript runtime error: Unable to get property 'setVisitility' of undefined or null reference

Re: Simple Layer Toggle with button

JakeSkinner — Tue, 11 Feb 2014 19:22:33 GMT

I may not be understanding what you are looking to accomplish. Do you want the basemap to not display when the map is loaded? Then use the button to toggle the basemap on?

Re: Simple Layer Toggle with button

BrandonIves — Tue, 11 Feb 2014 19:27:00 GMT

Correct. I would like to have a dynamic service on by default and have a cached service containing aerials to be switched on with a button click.

Thanks for your help. I think I have been staring at this for to long because I had a typo. After correcting that the visibility toggle works.

topic Re: Simple Layer Toggle with button in ArcGIS JavaScript Maps SDK Questions

Simple Layer Toggle with button

Re: Simple Layer Toggle with button

Re: Simple Layer Toggle with button

Re: Simple Layer Toggle with button

Re: Simple Layer Toggle with button