[GIS] Display Legend on the legend div

arcgis-javascript-apidojolegend

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

Best Answer

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

Related Question