AnsweredAssumed Answered

Duplicate Legend entries from 3rd party service

Question asked by dben1713 on Oct 9, 2018
Latest reply on Oct 9, 2018 by dben1713

I'm having a problem with duplicate entries showing up in a legend from a FEMA service.  Both Layer: Flood Hazard Zones (ID: 28)  and Layer: General Structures (ID: 24)  both have a UniqueValueRenderer which specifies multiple values that have the same Label and Symbol.  When these are displayed in a legend from a LayerList all of these labels and symbols show up in the legend.

 

Duplicate Legend Entries

 

Is there a better way to use these services that won't show duplicate layerInfos in the Legend or should I find another way with jQuery or something to remove the duplicates from the HTML?  Below is HTML that works in the latest JS API Sandbox that replicates how I'm using them.  

 

I'd rather not have to build the legend object myself because that would be a rather large time sink for all of the other layers that are in use besides these 2 and could also break if these are updated (which is out of my control).  I also didn't see a way to group these by re-creating the renderer manually.  I'm still learning the API so if there is a better way to include these than putting them in a FeatureLayer I'd be happy to change that too.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to FeatureLayer - 4.9</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>

  <style>
    html,
    body,
    #viewDiv
{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>


  <script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/layers/GroupLayer",
        "esri/widgets/LayerList",
        "esri/widgets/Legend"
      ],
      function(
        Map, MapView,
        FeatureLayer,
        GroupLayer,
        LayerList,
        Legend
      ) {

        var map = new Map({
          basemap: "hybrid"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,

          extent: { // autocasts as new Extent()
            xmin: -9177811,
            ymin: 4247000,
            xmax: -9176791,
            ymax: 4247784,
            spatialReference: 102100
          }
        });

        /********************
         * Add feature layer
         ********************/


        var floodZoneLayer = new FeatureLayer({
          url: "https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer/28",
          title: "Flood Zone",
          visible: true
        });
        var floodStructuresLayer = new FeatureLayer({
          url: "https://hazards.fema.gov/gis/nfhl/rest/services/public/NFHL/MapServer/24",
          title: "General Structures",
          visible: true
        });
        var group = new GroupLayer({title: "Flood Group", layers: [floodStructuresLayer, floodZoneLayer]});

        map.add(group);
        var layerList = new LayerList({ view: view , style : { type: "card", layout: "auto" }});
        var legend = new Legend({ view: view, style : { type: "card", layout: "stack" }});
        view.ui.add(layerList, {position: "bottom-right"});
        view.ui.add(legend, {position: "bottom-left"});

      });
  </script>

</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Outcomes