topic Re: Legend in ArcGIS JavaScript Maps SDK Questions

Legend

jaykapalczynski — Mon, 18 Dec 2017 13:52:02 GMT

I am trying to create a legend and looking for examples. I found this on ESRI web site but its really clunky looking, with huge icons and no tree nesting...

Legend | ArcGIS API for JavaScript 3.23

Issues:

No Tree Nesting by category

Icons and images are huge

Very cartoon looking.

This biggest: Its creating the legend automatically and adding every layer to the legend.

I am looking for something a bit more professional looking that maybe has:

Tree Nesting by category

The ability to add the layers I want and not all of them

Ability to control size of text and maybe icon size.

Anyone know of any examples that meet my needs?

Re: Legend

jaykapalczynski — Mon, 18 Dec 2017 13:53:38 GMT

One thing I forgot to add...can you decrease the size of icon and text in the online example I gave above?

Re: Legend

KenBuja — Tue, 19 Dec 2017 20:04:36 GMT

I've liked using this TOC, although it hasn't been updated lately: https://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Table of Contents (TOC) Widget for ArcGIS JavaScript API: Examples

For resizing the icon and text size of the standard Legend , examine the CSS.

Re: Legend

jaykapalczynski — Tue, 19 Dec 2017 21:00:18 GMT

Using the standard Legend I commented above this is how it looks....not sure what CSS to Change

Looks terrible...

Re: Legend

KenBuja — Tue, 19 Dec 2017 21:14:28 GMT

The first thing to do is use Developer Tools in your browser to examine the elements and what CSS rules are applied.

Re: Legend

jaykapalczynski — Tue, 19 Dec 2017 21:36:54 GMT

If I am using that example why doesn't mine look like that? The example doesn't have any extra css

Re: Legend

TiffanySelvidge1 — Tue, 19 Dec 2017 21:39:29 GMT

Have you completely cleared your cache and re-built the solution? It could be prior settings are still being used.

Re: Legend

jaykapalczynski — Tue, 19 Dec 2017 21:42:10 GMT

A million times

Im not using CSS for this...I am using the ESRI example 100%...mine looks like crap, theirs looks ok

Re: Legend

TiffanySelvidge1 — Tue, 19 Dec 2017 21:45:10 GMT

It looks to me like you have a border around each of the elements that is causing the spacing. Have you been successful at all at duplicating the example while within the browser and using the developer tools?

Re: Legend

KenBuja — Tue, 19 Dec 2017 22:07:51 GMT

Can you post the code you're using?

Re: Legend

jaykapalczynski — Thu, 21 Dec 2017 13:04:42 GMT

I'm just going to try and tackle your suggestion Ken....

https://www.arcgis.com/home/item.html?id=9b6280a6bfb0430f8d1ebc969276b109

Unless anyone has any other suggestions for gaining more control over the legend

Most important if I was to use the one above is I HAVE to eliminate a couple of the Layers from the Legend...I DONT want to show them all.

I dont know how to do that...the example just reads all the layers in

Re: Legend

KenBuja — Thu, 21 Dec 2017 14:53:47 GMT

Don't forget that the layerInfo object has the hideLayers parameter

Re: Legend

jaykapalczynski — Sat, 11 Dec 2021 08:01:56 GMT

SO how would I add the hiding of layers with this exmaple?

something like this:

layerInfos: layerInfo[(3),(7)];

or here

var layerInfo = [(2),(4),(12)];

//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
}, "legend");
legendDijit.startup();
}
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Legend

Anonymous User — Wed, 27 Dec 2017 16:28:12 GMT

Hi Jay, there are very likely other methodologies to hide a layer from the legend, however the example I have below has worked for me.

For example, in one of our applications I hide our aerials when the legend loads into the map since it acts as one of our basemaps.

The function loads, as you mentioned, when the layers-add-result event occurs on the initial map load (so a one time on load event), like so:

myMap.on("load", function () { myMap.on("layers-add-result", loadLegend); }

The loadLegend function uses defined id names, and in the case below fsa2015, which can be defined for any layer type (e.g. FeatureLayer, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, WebTiledLayer, etc.) like so:

var fsa2015 = esri.layers.ArcGISTiledMapServiceLayer("url", { id: "fsa2015" });

The loadLegend function is below, using the defined id name. Note: Dependencies, which you also mentioned, include: dojo/_base/array (arrayUtils) and esri.diji.Legend:

function loadLegend (evt) { var layerInfo = arrayUtils.myMap(evt.layers, function (layer, index) { if (layer.layer.id === "fsa2015") { return { }; } //Hides FSA aerial layer else { return { layer: layer.layer, title: layer.layer.name }; } //Else return as-is }); myLegend= esri.dijit.Legend({ map: myMap, layerInfos: layerInfo }, "myLegendDiv"); myLegend.startup(); myLegend.refresh(); } }

In Esri's documentation, layer is required in the layerInfos object, so without it being specified the layer won't load in the legend when active in the map.

Hope that helps!

More information on the Legend's LayerInfos from Esri's documentation.

Re: Legend

jaykapalczynski — Wed, 27 Dec 2017 21:25:00 GMT

Thanks going to give this a try....

Re: Legend

jaykapalczynski — Sat, 11 Dec 2021 08:01:59 GMT

Fantastic....tweaked into my code

    map.on("layers-add-result", function (evt) {
        map.on("mouse-move", showCoordinates);
        map.on("mouse-drag", showCoordinates);


     var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          if (layer.layer.id === "PastLocations") { return { }; } //Hides FSA aerial layer 
          else { return { layer: layer.layer, title: layer.layer.name }; } //Else return as-is 
     }); 
  
          
     if (layerInfo.length > 0) {
          var legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo,
          }, "legend");
          legendDijit.startup(); 
        }
          
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Legend

jaykapalczynski — Sat, 11 Dec 2021 08:02:02 GMT

What would proper syntax be to add more layers to this list?

Need to do more than one...Thoughts?

     var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
          if (layer.layer.id === "PastLocations") { return { }; } //Hides FSA aerial layer 
          else { return { layer: layer.layer, title: layer.layer.name }; } //Else return as-is 
     }); ‍‍‍‍

if (layer.layer.id === "PastLocations" OR layer.layer.id === "WMAs") { return { }; }‍

if (layer.layer.id === "PastLocations") OR (layer.layer.id === "WMAs") { return { }; }‍

Re: Legend

jaykapalczynski — Sat, 11 Dec 2021 08:02:05 GMT

Think this works.....thoughts to make it read better?

var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
   if (layer.layer.id === "PastLocations") { return { }; } //Hides FSA aerial layer 
   if (layer.layer.id === "DGIFWMAs") { return { }; }
   else { return { layer: layer.layer, title: layer.layer.name }; } //Else return as-is 
});‍‍‍‍‍

Re: Legend

RobertScheitlin__GISP — Wed, 27 Dec 2017 22:08:05 GMT

Jay,

A JS OR is || in code:

if (layer.layer.id === "PastLocations" || layer.layer.id === "PastLocations2") { return { }; }

Re: Legend

jaykapalczynski — Thu, 28 Dec 2017 13:57:34 GMT

DUUHHH on me...lol...sorry for that stupid question...Thanks Robert