Turning on and off layers on a Map

FrankFlynn · ‎03-13-2013

I am new to JavaScript API. I have a map with a number of feature layers added. I would like to be able to turn on and off these layers through the JavaScript API, yet I cannot seem to find a way to recognize the different layers on the map through the API.

Any help would be appreciated.

Thanks

FrankFlynn · ‎03-14-2013

I also asked our developer to get a code snippet that would actually run, verbatim... He commented out the part that we tried to do the layer hiding. This should run as a html file for you if you wanted to try it. We could not get your statment ( esri.arcgisonline.map.main.mapLayers) to run. It through back the error we mentioned previously.

Sorry for taking your time, but thanks again for your previous responses.

This should as an html file... however we had to add a proxy line to our website config to get it to work.

<html>
<body>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css" />
    <link rel="stylesheet" type='text/css' href='http://serverapi.arcgisonline.com/jsapi/arcgis/2.4/js/esri/dijit/css/Popup.css'/>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>

    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.arcgis.utils");
        dojo.require("esri.dijit.Popup");

var map, mapIsLoaded, maxExtent, popup;

   function map_init() {
            esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";
            var lods = [{ "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 },
                        { "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 },
                        { "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 },
                        { "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 }
                        ];

            var webmap = "c5468a0851e14f529a4fa034d7a3b5b2";

            maxExtent = new esri.geometry.Extent({ "xmin": -6850000, "ymin": 5820000, "xmax": -5630000, "ymax": 6554000, "spatialReference": { "wkid": 102100} });

            popup = new esri.dijit.Popup({ fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 255, 255]), 2), new dojo.Color([255, 0, 0, 0.1])) }, dojo.create("div"));

            mapDeferred = esri.arcgis.utils.createMap(webmap, "map", {
                mapOptions: {
                    infoWindow: popup,
                    extent: maxExtent,
                    lods: lods,
                    slider: true,
                    sliderStyle: "small",
                    nav: false,
                    showAttribution: false,
                    logo: false
                }
            })

            mapDeferred.addCallback(function (response) {
                map = response.map;

                if (map.loaded) {
                    mapLoaded();
                }
                else {
                    dojo.connect(map, "onLoad", mapLoaded);
                }
            });
        }

        function mapLoaded() {

//var layerIdsArr = esri.arcgisonline.map.main.mapLayers;

//var layerIdsArr = map.layerIds;
//var layer;
//for (var i=0; i < layerIdsArr.length; i++) {
// layer = map.getLayer(layerIdsArr);
// console.log(layer.url);
// layer.hide();
//}

        }

window.onload = function() {
                map_init();
    }

    </script>

<div id="map" style="border:1px solid #000;width: 978px;height: 600px;"></div>

</body>
</html>

FrankFlynn · ‎03-15-2013

Would it be possible for you to post a complete working set of your code example. That might help me understand why we could not get the statement: "esri.arcgisonline.map.main.mapLayers[0].layer.hide()" to be recognized.

Thanks again,

Frank

FrankFlynn · ‎03-15-2013

I was speaking with an ESRI employee and he said the layers added this way are actually graphic objects... so he suggested a small change to our code... which works! Thanks so much.

function mapLoaded() {

var layerIds = map.graphicsLayerIds;
console.log(layerIds.length);
var layer;
for (var i=0; i < layerIds.length; i++) {
layer = map.getLayer(layerIds);
console.log(layer.name);
layer.hide();
}

}

RosalindaGuzman · ‎05-14-2018

a few years later, this is simple and works perfectly for me, thank you!