Legend widget

View live sample

Description

This sample shows how to use the Legend widget to build a legend that displays swatches and labels for the layers in the map. To create a new legend widget 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.

The right content pane of the application layout includes a dijit.layout.AccordionContainer. The accordion container contains a set of panes where the titles are always visible but the content is only visible for one pane at a time. The legend is displayed in one pane of the accordion container and a link that allows you to toggle the visibility of layers in the map is displayed in the other. Clicking the link to toggle the visibility of the layer will hide/show the layer and update the legend. Note that the snippet below does not include code to handle updating the legend, the legend widget takes care of this for us. The legend will always update when the visibility of a layer or sublayer is modified.

 function toggle(id) {
  var layer = map.getLayer(id);
  if (layer.visible) {
    layer.hide();
  } else {
    layer.show();
  }
}

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
      #rightPane{
        width:20%;
      }
      #legendPane{
        border: solid #97DCF2 1px;
      }
    
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.arcgis.utils");
      dojo.require("dijit.form.CheckBox");
      
      var map;
      var legendLayers = [];

      function init() {
        var initialExtent = new esri.geometry.Extent({"xmin":-13133288,"ymin":4020012,"xmax":-13016186,"ymax":4090945,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent: initialExtent});
        
        //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        var quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",{id:'quakes'});

        legendLayers.push({layer:quakeLayer,title:'Earthquakes'});
        
        var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'});

        legendLayers.push({layer:fireLayer,title:"Fire"});
        dojo.connect(map,'onLayersAddResult',function(results){
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:legendLayers
          },"legendDiv");
          legend.startup();
        });
        map.addLayers([fireLayer,quakeLayer]);

       dojo.connect(map,'onLayersAddResult',function(results){

        
        //add check boxes
        dojo.forEach(legendLayers,function(layer){        
         var layerName = layer.title;
         var checkBox = new dijit.form.CheckBox({
            name: "checkBox" + layer.layer.id,
            value: layer.layer.id,
            checked: layer.layer.visible,
            onChange: function(evt) {
              var clayer = map.getLayer(this.value);
              if (clayer.visible) {
                clayer.hide();
              } else {
                clayer.show();
              }
              this.checked = clayer.visible;
            }
          });

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

        });
        //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm      
        var resizeTimer;
        dojo.connect(map, 'onLoad', function(theMap) {
          dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout( function() {
              map.resize();
              map.reposition();
            }, 500);
          });
        });
      }



      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
      <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
        <div dojoType="dijit.layout.AccordionContainer">
          <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend"  selected="true">
            <div id="legendDiv"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" >
            <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span>
            <div id="toggle" style="padding: 2px 2px;"></div>
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
      </div>
    </div>
  </body>

</html>