topic How to toggle layers in Javascript API webmap in ArcGIS JavaScript Maps SDK Questions

How to toggle layers in Javascript API webmap

BenFlanagan1 — Mon, 26 Sep 2016 10:01:08 GMT

Hi,

I am currently developing a simple web application using version 3.17 of the API.

I have created a webmap in ArcGIS Online and am using the utility function to pull the map into my app. The webmap contains 3 layers and I need the ability to toggle between each layer.

I have tried using the Layer List widget, however, I only want to have one layer visible/active at a given time.

Any advice on the best method to do this would be greatly appreciated!

Re: How to toggle layers in Javascript API webmap

RobertScheitlin__GISP — Sun, 12 Dec 2021 01:30:38 GMT

Ben,

Here is a sample that demos what you are wanting:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Layer List Dijit</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">

    <style>
        html,
        body,
        .container,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            margin: 0;
            font-family: "Open Sans";
        }

        #map {
            padding: 0;
        }

        #layerListPane {
            width: 25%;
        }

        .esriLayer {
            background-color: #fff;
        }

        .esriLayerList .esriList {
            border-top: none;
        }

        .esriLayerList .esriTitle {
            background-color: #fff;
            border-bottom: none;
        }

        .esriLayerList .esriList ul {
            background-color: #fff;
        }
    </style>
    <script>
        var dojoConfig = {
            parseOnLoad: true
        };
    </script>
    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
        var _operLayers, theMap;
        require([
            "esri/arcgis/utils",
            "esri/dijit/LayerList",
            "dojo/on",
            "dojo/_base/lang",
            "dojo/_base/array",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function(
            arcgisUtils,
            LayerList,
            on,
            lang,
            array
        ) {
            //Create a map based on an ArcGIS Online web map id
            arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response) {
                //set one layer in the webmap to be visible initially.
                theMap = response.map;
                _operLayers = response.itemInfo.itemData.operationalLayers;
                array.map(_operLayers, lang.hitch(this, function(lyr){
                  if(lyr.layerObject){
                    if(lyr.title === "NDFD_Precipitation"){
                      lyr.layerObject.setVisibility(true);
                      lyr.visibility = true;
                    }else{
                      lyr.layerObject.setVisibility(false);
                      lyr.visibility = false;
                    }
                  }
                }));
                var myWidget = new LayerList({
                    map: response.map,
                    layers: arcgisUtils.getLayerList(response)
                }, "layerList");
                myWidget.startup();

                on(myWidget, "toggle", lang.hitch(this, function(evt){
                  array.map(myWidget.layers, function(layer, indx){
                    if(evt.visible){
                      if(indx !== evt.layerIndex){
                        layer.layer.setVisibility(false);
                        layer.visibility = false;
                      }
                    }
                  });
                }));
            });
        });
    </script>
</head>

<body class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false">
        <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="layerList"></div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to toggle layers in Javascript API webmap

BenFlanagan1 — Fri, 30 Sep 2016 12:46:42 GMT

This works perfectly Robert - many thanks!

Re: How to toggle layers in Javascript API webmap

AngularArchitect — Fri, 21 May 2021 11:38:11 GMT

Any idea how to achieve this in 4.* versions ?

Re: How to toggle layers in Javascript API webmap

RobertScheitlin__GISP — Fri, 21 May 2021 19:12:57 GMT

@AngularArchitect In 4.x it would look like this:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Layer List Widget 4.19</title> <link rel="stylesheet" href="https://js.arcgis.com/4.19/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/css/main.css" /> <style> html, body, .container, #viewDiv { height: 100%; width: 100%; margin: 0; padding: 0; margin: 0; font-family: "Open Sans"; } #viewDiv { padding: 0; } #layerListPane { width: 25%; } .esriLayer { background-color: #fff; } .esriLayerList .esriList { border-top: none; } .esriLayerList .esriTitle { background-color: #fff; border-bottom: none; } .esriLayerList .esriList ul { background-color: #fff; } </style> <script> var dojoConfig = { parseOnLoad: true }; </script> <script src="https://js.arcgis.com/4.19/"></script> <script> var _operLayers, theMap; require([ "esri/views/MapView", "esri/WebMap", "esri/widgets/LayerList", "dijit/layout/BorderContainer", "dijit/layout/ContentPane" ], function ( MapView, WebMap, LayerList ) { var webmap = new WebMap({ portalItem: { // autocasts as new PortalItem() id: "f63fed3f87fc488489e27c026fa5d434" } }); var view = new MapView({ map: webmap, container: "viewDiv" }); view.when(()=>{ view.map.layers.map((lyr)=> { lyr.watch('visible', function(visible){ if(visible){ view.map.layers.map((layer, index) => { if(layer.title !== lyr.title){ layer.visible = false; } }); } //console.info(visible, lyr.title); }, lyr.title); if (lyr.title === "World Transportation") { lyr.visible = true; } else { lyr.visible = false; } }); var layerList = new LayerList({ view: view, container: "layerList" }); }); }); </script> </head> <body class="claro"> <div class="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"> <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> <div id="layerList"></div> </div> <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> </div> </body> </html>