1

I am trying to display legends of all layers of map service in my legend div, for that I have written and tried some code. But not displaying, please suggest someone where is problem in my code.

<!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>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
  html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
  var map;

  require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/dijit/Legend", "dojo/_base/array", "dojo/parser", "dojo/domReady!"], function(Map, ArcGISDynamicMapServiceLayer, Legend, arrayUtils, parser) {

    parser.parse();

    map = new Map("map", {
      basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
      center: [-90.45, 37.75], // longitude, latitude
      zoom: 5
    });
     map.on("layers-add-result", function (evt) {
    var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
      return {layer:layer.layer, title:layer.layer.name};
    });
    if (layerInfo.length > 0) {
      var legendDijit = new Legend({
        map: map,
        layerInfos: layerInfo
      }, "legendDiv");
      legendDijit.startup();
    }
  });   

    var dynamiLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer");
    map.addLayer(dynamiLayer);
  });
</script>

Legend Display

1

It's normal that the legend doesn't appear because your map listen to the layers-add-result which is fired when calling : map.addLayers([layer]) (with s multiple at once ) not map.addLayer(layer)

so : event layers-add-result fired once map.addLayers called

and event layer-add-result fired once map.addLayer called

So replace the map.addLayer(dynamiLayer); by map.addLayers([dynamiLayer]); and add style for your legendDiv

here is a Fiddle

  • @msurya does this solve your issue ?!! – Springer F Aug 10 '16 at 7:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.