How to toggle layers in Javascript API webmap

BenFlanagan1 · ‎09-26-2016

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!

RobertScheitlin__GISP · ‎09-26-2016

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎09-26-2016

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BenFlanagan1 · ‎09-30-2016

This works perfectly Robert - many thanks!

AngularArchitect · ‎05-21-2021

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

RobertScheitlin__GISP · ‎05-21-2021

@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>