Hide Table of Contents
View Legend - toggle services sample in sandbox
Legend - toggle services


This sample shows how to use the Legend Dijit to build a legend that displays swatches and labels for the layers in the map. To create a new legend dijit specify the map and the HTML element where the legend will display. Optionally you can provide a list of layers to display in the legend. If no layers are specified all the layers will display in the legend.


<!DOCTYPE html>
  <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>Updating the legend to display visible layers</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.41/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css">
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;

    #rightPane {
      width: 20%;

    #legendPane {
      border: solid #97DCF2 1px;

  <script src="https://js.arcgis.com/3.41/"></script>
    var map;

      function (
        Map, utils, Legend, ArcGISDynamicMapServiceLayer, dom, domConstruct,
        parser, arrayUtils, CheckBox
      ) {


        var legendLayers = [];

        map = new Map("map", {
          basemap: "gray-vector",
          center: [-90, 22],
          zoom: 3

        var quakeLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Earthquakes_Since1970/MapServer", {
          id: 'Earthquakes'

        legendLayers.push({ layer: quakeLayer, title: quakeLayer.id });

        var hurricanesLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Hurricanes/MapServer", {
            id: 'Hurricanes'

        map.on('layers-add-result', function () {
          var legend = new Legend({
            map: map,
            layerInfos: legendLayers
          }, "legendDiv");
        legendLayers.push({ layer: hurricanesLayer, title: hurricanesLayer.id });
        map.addLayers([ hurricanesLayer, quakeLayer ]);

        map.on('layers-add-result', function () {
          //add check boxes
          arrayUtils.forEach(legendLayers, function (layer) {
            var layerName = layer.title;
            var checkBox = new CheckBox({
              name: "checkBox" + layer.layer.id,
              value: layer.layer.id,
              checked: layer.layer.visible
            checkBox.on("change", function () {
              var targetLayer = map.getLayer(this.value);
              this.checked = targetLayer.visible;

            //add the check box and label to the toc
            domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
            var checkLabel = domConstruct.create('label', {
                'for': checkBox.name,
                innerHTML: layerName
              }, checkBox.domNode, "after");
            domConstruct.place("<br />", checkLabel, "after");

<body class="claro">
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane"

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">

        <div id="legendDiv"></div>


      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Natural Disasters'">

        <span style="padding:10px 0;">Click to toggle the visibility of the various natural disasters</span>

        <div id="toggle" style="padding: 2px 2px;"></div>

  <div id="map"


Show Modal