nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Map with a single feature layer won't display a legend

DonaldLund

I have a map with a single feature layer, layered over a base map, and I can't get the javascript API to display a legend for it. If I throw in another layer, the legend displays. I'm following code example here: Legend | ArcGIS API for JavaScript. Why won't the legend display when only a single feature layer is defined? Do I have to define a dummy feature layer in order to display a legend? Is the legend widget using some kind of an array or something that requires more than one layer to be defined in order for it to work properly or display anything at all?

Any help or insights would be appreciated.

Vind meer berichten getagd met

Accepted answers

TimWitt2

Donald,

After line 59 add:

if (layerInfo.length > 0) {

After line 64 add:

and replace 66 with:

map.addLayers([rivers]);

Whatever you have as your rivers layer will show up in your Legend.

Hope this answers your question.

Tim

All comments

DonaldLund

Sure. Here you go. And thanks.

FYI, the layer named 'waterbodies' is the one I'm using as a dummy layer that I toggle on and off. When it's on, the legend appears. When it's off the legendDiv content pane appears empty.

<!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.10/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }
    #rightPane {
      width: 20%;
    }
    #legendPane {
      border: solid #97DCF2 1px;
    }
  </style>
  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var ccdURL="http://services2.arcgis.com/and the rest of the URL/FeatureServer/0";
    var token="?token=token string goes here";
    ccdURL=ccdURL+token;
    var map;
    require([
      "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser
    ) {
      parser.parse();
      map = new Map("map", {
        basemap:"topo",
        center: [-85.7, 44.1],
        zoom: 7
      });
      var rivers = new FeatureLayer(ccdURL, {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
// this is a dummy layer I threw in just to make the legend work. If this is
// commented out, the legend will appear blank
      var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      //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};
        });
        var legendDijit = new Legend({
          map: map,
          layerInfos: layerInfo
        }, "legendDiv");
        legendDijit.startup();
      });
      map.addLayers([rivers, waterbodies]);
//      map.addLayer(rivers);
// I comment the frist line and use the second when I toggle off the dummy layer
    });
  </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>

TimWitt2

Are you able to post your code, just remove the sensitive information?

DonaldLund

Tim,

Thanks for the quick response.

The layer polygons are actually visible on the map, but the legend is blank. The feature layer is actually based on a county shapefile for the state of Michigan.

I am not able to share a link because of the strategic nature of the data. If I don't make any progress, perhaps I can make a layer with bogus data that I can share.

Either way, I'll be back.

Thanks again.

TimWitt2

Donald,

you need to make sure that the featurelayer is actually visible on the map or it wont show in your legend. Some layers are configured to not show on a certain scale and once you zoom in/ out they start to show. Are you able to post a link to the layer that won't show?

Tim

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.