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>
