topic Re: is there a sample or code for a TOC that shows layer names with toggle boxes and symbology? in ArcGIS JavaScript Maps SDK Questions

is there a sample or code for a TOC that shows layer names with toggle boxes and symbology?

DanielSchatt — Wed, 30 Mar 2016 16:08:11 GMT

hi all, I'm fairly new to the Javascript API. I want to add a standard table of contents that displays the layer names, toggle boxes to turn layer visibility off and on, and the symbology of the layers. But I don't see any such sample. There's a "Legend" sample that shows layer names and symbology, but doesn't have toggle boxes for visibility. Thanks for any help!

Dan

Re: is there a sample or code for a TOC that shows layer names with toggle boxes and symbology?

KenBuja — Sat, 11 Dec 2021 17:15:46 GMT

Dan, the new version of the LayerList contains the property showLegend. By default, this is false, but if you set it to true, you will have the legend swatches included.

<!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.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/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.16/"></script>
<script>
require([
    "esri/arcgis/utils",
    "esri/dijit/LayerList",
    "dijit/layout/BorderContainer", 
    "dijit/layout/ContentPane",
    "dojo/domReady!"
], function(
    arcgisUtils,
    LayerList
) {
    //Create a map based on an ArcGIS Online web map id 
    arcgisUtils.createMap("df8bcc10430f48878b01c96e907a1fc3", "map").then(function(response){
        var myWidget = new LayerList({
           map: response.map,
           layers: arcgisUtils.getLayerList(response),
           showLegend: true
        },"layerList");
        myWidget.startup();
    });

});
</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: is there a sample or code for a TOC that shows layer names with toggle boxes and symbology?

TyroneBiggums — Wed, 30 Mar 2016 18:47:54 GMT

I just created an unordered list in html for each layer on the map. You can use the API to acquire a collection of your layers and then you just use the layer's hide/show as your click event for your check boxes.

Re: is there a sample or code for a TOC that shows layer names with toggle boxes and symbology?

SteveCole — Wed, 30 Mar 2016 19:29:24 GMT

There is also's NLiu's Table of Contents Widget.