legend not getting created

PeteVitt · ‎12-02-2013

Hi - I've pretty much copied the legend dijit sample into my app and the legend isnt getting created. When I debug it appears that the map.on layers-add-result event isnt getting fired.

here's the code:

 //create the map         map = new Map("mapDiv", {             basemap: "topo",             //center: [-117.4408, 33.8419],             center: [-117.4408, 33.4419],             zoom: 9         });                    dynamicLayer = new ArcGISDynamicMapServiceLayer("http://www.sawpa.net/arcgissawpa/rest/services/CEDEN_TMDL/MapServer", {     });     map.addLayer(dynamicLayer);     featureLayer = new FeatureLayer("http://www.sawpa.net/arcgissawpa/rest/services/CEDEN_TMDL/MapServer/0", {     });  //add legend 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();     } });

I've got a LegendDiv inside a Title Pane also:

<div style="position: absolute; right: 20px; top: 50px; z-index: 999;">
            <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Legend', closable:false, open:false">
                <div data-dojo-type="dijit/layout/ContentPane" style="width: 380px; height: 280px;
                    overflow: auto;">
                    <div id="LegendDiv">
                    </div>
                </div>
            </div>
   </div>

Any ideas?

Thanks

Pete

KenBuja · ‎12-02-2013

Can you post your revised code?

This works for me

<!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>Map with legend</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">      <style>         html, body         {             height: 97%;             width: 98%;             margin: 1%;         }          #rightPane         {             width: 20%;         }          #legendPane         {             border: solid #97DCF2 1px;         }          .esriLegendServiceLabel         {             /*visibility: hidden;*/             display: none;         }          .esriLegendLayerLabel         {             /*visibility: hidden;*/             /*display: none;*/         }          .esriLegendLeft         {             padding-left: 0px;         }     </style>      <script src="http://js.arcgis.com/3.7/"></script>     <script>         var map;         require([           "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/dijit/Legend",           "dojo/_base/array", "dojo/parser",           "dijit/layout/BorderContainer", "dijit/layout/ContentPane",           "dijit/layout/AccordionContainer", "dojo/domReady!"         ], function (           Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Legend,           arrayUtils, parser         ) {             parser.parse();              map = new Map("map", {                 basemap: "topo",                 center: [-117.4408, 33.4419],                 zoom: 9             });              var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://www.sawpa.net/arcgissawpa/rest/services/CEDEN_TMDL/MapServer", {             });             var featureLayer = new FeatureLayer("http://www.sawpa.net/arcgissawpa/rest/services/CEDEN_TMDL/MapServer/0", {             });             //add the legend             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([dynamicLayer]);         });     </script> </head>  <body class="claro">     <!--[if IE 7]> <style>   html, body {     margin: 0;   } </style> <![endif]-->     <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"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'right'">              <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>                 <div data-dojo-type="dijit/layout/ContentPane"                     data-dojo-props="title:'Pane 2'">                     This pane could contain tools or additional content                 </div>             </div>         </div>         <div id="map"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'center'"             style="overflow: hidden;">         </div>     </div> </body>  </html>

View solution in original post

KenBuja · ‎12-02-2013

If you're using "map.addLayer", the event "layer-add-result" is fired.

When you use "map.addLayers", the event "layers-add-result" is fired

PeteVitt · ‎12-02-2013

I made that change, but the event is still not firing

Thanks

Pete

KenBuja · ‎12-02-2013

Can you post your revised code?

This works for me

<!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>Map with legend</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">      <style>         html, body         {             height: 97%;             width: 98%;             margin: 1%;         }          #rightPane         {             width: 20%;         }          #legendPane         {             border: solid #97DCF2 1px;         }          .esriLegendServiceLabel         {             /*visibility: hidden;*/             display: none;         }          .esriLegendLayerLabel         {             /*visibility: hidden;*/             /*display: none;*/         }          .esriLegendLeft         {             padding-left: 0px;         }     </style>      <script src="http://js.arcgis.com/3.7/"></script>     <script>         var map;         require([           "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/dijit/Legend",           "dojo/_base/array", "dojo/parser",           "dijit/layout/BorderContainer", "dijit/layout/ContentPane",           "dijit/layout/AccordionContainer", "dojo/domReady!"         ], function (           Map, ArcGISDynamicMapServiceLayer, FeatureLayer, Legend,           arrayUtils, parser         ) {             parser.parse();              map = new Map("map", {                 basemap: "topo",                 center: [-117.4408, 33.4419],                 zoom: 9             });              var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://www.sawpa.net/arcgissawpa/rest/services/CEDEN_TMDL/MapServer", {             });             var featureLayer = new FeatureLayer("http://www.sawpa.net/arcgissawpa/rest/services/CEDEN_TMDL/MapServer/0", {             });             //add the legend             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([dynamicLayer]);         });     </script> </head>  <body class="claro">     <!--[if IE 7]> <style>   html, body {     margin: 0;   } </style> <![endif]-->     <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"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'right'">              <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>                 <div data-dojo-type="dijit/layout/ContentPane"                     data-dojo-props="title:'Pane 2'">                     This pane could contain tools or additional content                 </div>             </div>         </div>         <div id="map"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'center'"             style="overflow: hidden;">         </div>     </div> </body>  </html>

PeteVitt · ‎12-02-2013

Thanks Ken - using your sample I got it to work -- I was using map.addLayer instead of map.AddLayers

Pete