What to do if I just want to display a single layer's legend?

LeiZhou · ‎01-20-2014

I want to add a legend, it works when I add several layers together. But when I want to add just a single layer, I make the code as the following:

var legendLayer = [];               map.on("layer-add-result", function (evt) {                    legendLayer.push({ layer: Layer1, title: 'AAABBC' });                    var legendDijit = new Legend({                       map: map,                       layerInfos: legendLayer                   }, "legendDiv");                   legendDijit.startup();                 });               map.addLayer(Layer1);

Everytime I change a basemap or scroll the mouse wheel, it adds the extra same legend to the legend pane. When I add multi-layers, using the following code it always works, I just change the "layers-add-result" to "layer-add-result", then it does not work. So what should I do if just want to add a single layer? Thanks a lot!

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();                   }               });                map.addLayers([Layer1, Layer2]);

KenBuja · ‎01-22-2014

The "layer-add-result" function will be fired when you add a basemap and change the basemap, in addition to when you add your Layer1. However, I didn't see it fire when scrolling in and out. This code shows that behavior

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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></title>      <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>         html, body {             height: 100%;             width: 100%;             margin: 0;             padding: 0;         }          #map {             padding: 0;         }     </style>      <script src="http://js.arcgis.com/3.8/"></script>     <script>         var map;         require([           "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",           "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer",             "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",           "dojo/domReady!"         ], function (           Map, BasemapGallery, arcgisUtils,           parser, ArcGISDynamicMapServiceLayer         ) {             parser.parse();              map = new Map("map", {                 basemap: "topo",                 center: [-105.255, 40.022],                 zoom: 13             });              //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps             var basemapGallery = new BasemapGallery({                 showArcGISBasemaps: true,                 map: map             }, "basemapGallery");             basemapGallery.startup();              var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {                 "opacity": 0.5             });              map.addLayer(dynamicMapServiceLayer);               map.on("layer-add-result", function (evt) {                 console.log("Layer add result event fired - " + evt.layer.id);             });              map.on("layers-add-result", console.log("Layers add result event fired"))              basemapGallery.on("error", function (msg) {                 console.log("basemap gallery error:  ", msg);             });         });     </script> </head>  <body class="claro">     <div data-dojo-type="dijit/layout/BorderContainer"          data-dojo-props="design:'headline', gutters:false"          style="width:100%;height:100%;margin:0;">          <div id="map"              data-dojo-type="dijit/layout/ContentPane"              data-dojo-props="region:'center'"              style="padding:0;">              <div style="position:absolute; right:20px; top:10px; z-Index:999;">                 <div data-dojo-type="dijit/TitlePane"                      data-dojo-props="title:'Switch Basemap', closable:false,  open:false">                     <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">                         <div id="basemapGallery"></div>                     </div>                 </div>             </div>          </div>     </div> </body>  </html>

As you can see, the event "layers-add-result" also fired, even though the code doesn't contain the line

map.addLayers(dynamicMapServiceLayer);

However, that event only fired once, regardless of how many times you changed the basemap or added additional layers.

So you can still use the addLayer method to add a single layer to the map, but you should put the Legend initialization in the "layers-add-result" event. Or you could use

map.addLayers([Layer1]);

View solution in original post

KenBuja · ‎01-22-2014

The "layer-add-result" function will be fired when you add a basemap and change the basemap, in addition to when you add your Layer1. However, I didn't see it fire when scrolling in and out. This code shows that behavior

<!DOCTYPE html> <html> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <!--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></title>      <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">     <style>         html, body {             height: 100%;             width: 100%;             margin: 0;             padding: 0;         }          #map {             padding: 0;         }     </style>      <script src="http://js.arcgis.com/3.8/"></script>     <script>         var map;         require([           "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",           "dojo/parser", "esri/layers/ArcGISDynamicMapServiceLayer",             "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",           "dojo/domReady!"         ], function (           Map, BasemapGallery, arcgisUtils,           parser, ArcGISDynamicMapServiceLayer         ) {             parser.parse();              map = new Map("map", {                 basemap: "topo",                 center: [-105.255, 40.022],                 zoom: 13             });              //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps             var basemapGallery = new BasemapGallery({                 showArcGISBasemaps: true,                 map: map             }, "basemapGallery");             basemapGallery.startup();              var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {                 "opacity": 0.5             });              map.addLayer(dynamicMapServiceLayer);               map.on("layer-add-result", function (evt) {                 console.log("Layer add result event fired - " + evt.layer.id);             });              map.on("layers-add-result", console.log("Layers add result event fired"))              basemapGallery.on("error", function (msg) {                 console.log("basemap gallery error:  ", msg);             });         });     </script> </head>  <body class="claro">     <div data-dojo-type="dijit/layout/BorderContainer"          data-dojo-props="design:'headline', gutters:false"          style="width:100%;height:100%;margin:0;">          <div id="map"              data-dojo-type="dijit/layout/ContentPane"              data-dojo-props="region:'center'"              style="padding:0;">              <div style="position:absolute; right:20px; top:10px; z-Index:999;">                 <div data-dojo-type="dijit/TitlePane"                      data-dojo-props="title:'Switch Basemap', closable:false,  open:false">                     <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">                         <div id="basemapGallery"></div>                     </div>                 </div>             </div>          </div>     </div> </body>  </html>

As you can see, the event "layers-add-result" also fired, even though the code doesn't contain the line

map.addLayers(dynamicMapServiceLayer);

However, that event only fired once, regardless of how many times you changed the basemap or added additional layers.

So you can still use the addLayer method to add a single layer to the map, but you should put the Legend initialization in the "layers-add-result" event. Or you could use

map.addLayers([Layer1]);

LeiZhou · ‎01-23-2014

Thank you very much!