topic Legend dijit displaying entries not displayed on the map in ArcGIS JavaScript Maps SDK Questions

Legend dijit displaying entries not displayed on the map

JoanneMcGraw — Sun, 12 Dec 2021 01:46:18 GMT

We have a service deployed at: http://www.agr.gc.ca/atlas/rest/services/mapservices/aafc_canada_land_parcels/MapServer. Using ESRI JSAPI 3.13 (but also seen in 3.9 so it's been like this for a while if not always), the Legend widget doesn`t appear to be handling this service properly.

The first image below shows how the service is defined. Note that the "Manitoba Township Fabric" is toggled ON and is within visible range given the map at right, but because its "Manitoba" parent group is toggled OFF, that feature class doesn't appear in the map…which is as expected. The second image shows what the map looks like when the "Manitoba" group is toggled ON and the "Manitoba Township Fabric" feature class is displayed in the map.

Now, with respect to the ESRI JSAPI, I pulled the sample below from https://developers.arcgis.com/javascript/jssamples/widget_legendvisible.html and updated it to use the service in question.

<!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>Updating the legend to display visible layers</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/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.13/"></script>
<script>
var map;

require([
 "esri/map",
 "esri/arcgis/utils",
 "esri/dijit/Legend",
 "esri/layers/ArcGISDynamicMapServiceLayer",
 "dojo/dom",
 "dojo/dom-construct",
 "dojo/parser",
 "dojo/_base/array",
 "dijit/form/CheckBox",
 "dijit/layout/AccordionContainer",
 "dijit/layout/BorderContainer",
 "dijit/layout/ContentPane",
 "dojo/domReady!"
        ],
 function (
 Map, utils, Legend, ArcGISDynamicMapServiceLayer, dom, domConstruct,
 parser, arrayUtils, CheckBox
        ) {

 parser.parse();

 var legendLayers = [];

 map = new Map("map", {
                              basemap: "topo",
                              center: [-97, 50],
                              zoom: 8
                          });

            var lyrParcels = new ArcGISDynamicMapServiceLayer("http://www.agr.gc.ca/atlas/rest/services/mapservices/aafc_canada_land_parcels/MapServer", {
 id: 'landparcels'
 });

 legendLayers.push({ layer: lyrParcels, title: 'Land parcels' });

 map.on('layers-add-result', function () {
                       var legend = new Legend({
 map: map,
 layerInfos: legendLayers
 }, "legendDiv");
                       legend.startup();
 });
 map.addLayers([ lyrParcels ]);
        });
</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:'Natural Disasters'">

 <span style="padding:10px 0;">Click to toggle the visibility of the various natural disasters</span>

 <div id="toggle" style="padding: 2px 2px;"></div>

 </div>
        </div>
 </div>
      <div id="map"
 data-dojo-type="dijit/layout/ContentPane"
 data-dojo-props="region:'center'"
 style="overflow:hidden;">
 </div>
 </div>

 </body>
</html>

When the page is loaded in a browser it appears as you see below. The "Manitoba Township Fabric" (among others) appears in the Legend even though it is, correctly, not shown in the map. The Legend digit doesn't appear to be taking into consideration the fact that a group containing a "visibleLayer" may be toggled OFF and, therefore, not actually in the map and probably shouldn't be in the Legend either.

Can anyone tell me if this is by design? And, if so, what the logic behind showing these items in the Legend dijit is when, given the default visibility flag of their parent, there's no way they could actually appear in the map above?

I have worked around this problem in my own web mapping application by changing the visibleLayers array when the service is added to its map and removing those layers that have a parent that is toggled OFF somewhere up the chain but I thought I'd bring this up in case it is not "by design" and, instead, an oversight in the Legend dijit functionality.

Re: Legend dijit displaying entries not displayed on the map

JoanneMcGraw — Mon, 20 Jul 2015 14:41:34 GMT

Not sure why, by the page code I included above got changed to "Click to toggle the visibility of the various natural disasters"

Anyway, without adding it at HTML, here's the page mentioned above

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Updating the legend to display visible layers</title>

<style>

html, body {

height: 97%;

width: 98%;

margin: 1%;

}

#rightPane {

width: 20%;

}

#legendPane {

border: solid #97DCF2 1px;

}

</style>

var map;

require([

"esri/map",

"esri/arcgis/utils",

"esri/dijit/Legend",

"esri/layers/ArcGISDynamicMapServiceLayer",

"dojo/dom",

"dojo/dom-construct",

"dojo/parser",

"dojo/_base/array",

"dijit/form/CheckBox",

"dijit/layout/AccordionContainer",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

function (

Map, utils, Legend, ArcGISDynamicMapServiceLayer, dom, domConstruct,

parser, arrayUtils, CheckBox

) {

parser.parse();

var legendLayers = [];

map = new Map("map", {

basemap: "topo",

center: [-97, 50],

zoom: 8

});

var lyrParcels = new ArcGISDynamicMapServiceLayer("http://www.agr.gc.ca/atlas/rest/services/mapservices/aafc_canada_land_parcels/MapServer", {

id: 'landparcels'

});

legendLayers.push({ layer: lyrParcels, title: 'Land parcels' });

map.on('layers-add-result', function () {

var legend = new Legend({

map: map,

layerInfos: legendLayers

}, "legendDiv");

legend.startup();

});

map.addLayers([ lyrParcels ]);

});

</script>

</head>

<!--[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/ContentPane" id="legendPane"

data-dojo-props="title:'Legend', selected:true">

</div>

<div data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="title:'Natural Disasters'">

<span style="padding:10px 0;">Click to toggle the visibility of the various natural disasters</span>

</div>

<div id="map"

data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'"

style="overflow:hidden;">

</div>

</body>

</html>

Re: Legend dijit displaying entries not displayed on the map

JoanneMcGraw — Mon, 27 Jul 2015 14:22:03 GMT

Can no one comment on whether the behaviour I noted in this thread is by design? And, if so, what the logic behind showing these items in the Legend dijit is when, given the default visibility flag of their parent, there's no way they could actually appear in the map above?

I ask because that is what I am being told by ESRI Support and I'm afraid I can't understand the reasoning behind the "design"...perhaps someone else can?

Cheers,

jtm

Re: Legend dijit displaying entries not displayed on the map

TimWitt2 — Mon, 27 Jul 2015 14:45:37 GMT

Joanne,

this is a weird case and one would expect anything that is not seen in the map shouldn't be in the legend dijit.

Tim

Re: Legend dijit displaying entries not displayed on the map

JoanneMcGraw — Tue, 28 Jul 2015 16:37:15 GMT

I appreciate your taking the time to respond, Tim.

I was hoping for a response from ESRI Redlands...?

Is this behaviour "by design" as I am being told by ESRI Canada? And, if so, what is the reasoning behind it? I've never gotten an answer to that from anyone.

Re: Legend dijit displaying entries not displayed on the map

TimWitt2 — Wed, 29 Jul 2015 12:06:04 GMT

Maybe Kelly Hutchins or Bjorn Svensson could shed some light?

Re: Legend dijit displaying entries not displayed on the map

KellyHutchins — Thu, 30 Jul 2015 18:12:21 GMT

This looks like a bug in the legend widget to me. I created a simple test app that uses your service and can reproduce the issue with the layers displaying in the legend when they should not be.

I'd suggest contacting Esri support again to ask for more details on why they consider this a known issue.

Re: Legend dijit displaying entries not displayed on the map

ÉricGosselin — Mon, 03 Aug 2015 11:54:42 GMT

ArcGIS Online currently have the same behavior. I can report it as a bug but it will affect AGOL at the same time.

Re: Legend dijit displaying entries not displayed on the map

deleted-user-0W0-oLHxDjCX — Fri, 02 Dec 2016 13:28:37 GMT

Éric Gosselin‌ I can see this problem until nowadays (ArcGIS 10.4)