topic Re: How do I add multiple layers to the Legend widget? in ArcGIS JavaScript Maps SDK Questions

How do I add multiple layers to the Legend widget?

EmilyRenkema1 — Tue, 10 May 2016 13:38:50 GMT

The Legend Widget sample and API page demonstrate how to add one layer to the widget, but I want to add multiple layers. I know that if I don't include the layerInfos property, all the layers will show, but what syntax do I need to use in order to add just the layers I want and to have more control over what it says next to each layer? I tried this:

var legend = new Legend({

view: view,

layerInfos: [{

layer: [parkingLayer, votingLayer],

title: "Random Layers"

}]

});

legend.startup();

view.ui.add(legend, "bottom-right");

What I get is a little box at the bottom right that says "No Legend".

Another odd thing is that when I add only one layer it works except my title doesn't show up. If I only add the parking layer it says "Main Map-Parking Lots" next to it, but no title.

Any pointers on this are much appreciated.

Re: How do I add multiple layers to the Legend widget?

thejuskambi — Tue, 10 May 2016 13:47:48 GMT

The LayerInfos is a array of objects. whereas, the layer property is of type layer and not array. So your Legend should look something like below.

var legend = new Legend({

view: view,

layerInfos: [{

layer: parkingLayer,

title: "Random Layer1"

},{

layer: votingLayer,

title: "Random Layer2"

}]

});

Re: How do I add multiple layers to the Legend widget?

EmilyRenkema1 — Wed, 11 May 2016 12:10:54 GMT

Thank you so much, I didn't realize about it being an array and the API didn't mention anything.

However, for some reason the titles still aren't coming out correctly. My code now looks like this:

var legend = new Legend({

view: view,

layerInfos: [{

layer: parkingLayer,

title: "Parking Lots"

},{

layer: votingLayer,

title: "Voting Wards"

}]

});

But the title next to each symbol is still "Main Map-Parking Lots" or "Main Map-Voting Wards". Is there something else I'm missing?

Re: How do I add multiple layers to the Legend widget?

thejuskambi — Thu, 12 May 2016 12:51:31 GMT

I am not sure, do you think you can put is on a sandbox?

Re: How do I add multiple layers to the Legend widget?

EmilyRenkema1 — Fri, 13 May 2016 15:47:21 GMT

How do I put it in a sandbox? I tried copying it into a sandbox on the API, but the legend didn't work (just a box with "No legend") even though the same code works in a browser.

Sorry if I seem clueless, I'm fairly to new to ArcGIS Javascript.

Re: How do I add multiple layers to the Legend widget?

thejuskambi — Fri, 13 May 2016 16:04:40 GMT

just share the code,so that I can look at the behaviour.

Re: How do I add multiple layers to the Legend widget?

EmilyRenkema1 — Thu, 19 May 2016 18:56:45 GMT

<!DOCTYPE html>

<html>

<head>

<title>Legend 4.0</title>

<style>

html, body, #viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

require([

"esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/PopupTemplate", "esri/widgets/Legend", "dojo/domReady!"],

function(Map, MapView, FeatureLayer, PopupTemplate, Legend) {

var parkingTemplate = new PopupTemplate({

title: "Parking Lot {CityworksID}",

content: "<ul><li>Facility: {FACILITY}</li>" +

"<li>Capacity: {CAPACITY}</li>" +

"<li>Type: {TYPE}</li></ul>"

});

var parkingLayer = new FeatureLayer({

url: "http://a222.lansing.local/arcgis/rest/services/MainMap/MapServer/39",

outFields: ["*"],

popupTemplate: parkingTemplate,

minScale: 0,

opacity: 0.75

});

var votingTemplate = new PopupTemplate({

title: "Voting Ward {WARDID}",

content: "<ul><li>County: {COUNTY}</li>" +

"<li>Name: {NAME}</li></ul>"

});

var votingLayer = new FeatureLayer({

url: "http://a222.lansing.local/arcgis/rest/services/MainMap/MapServer/40",

outFields: ["*"],

popupTemplate: votingTemplate

});

var map = new Map({

basemap: "streets",

layers: [parkingLayer, votingLayer]

});

var view = new MapView({

container: "viewDiv",

map: map,

zoom: 14,

center: [-84.530030, 42.735592]

});

var legend = new Legend({

view: view,

layerInfos: [{

layer: parkingLayer,

title: "Parking Lots"

},{

layer: votingLayer,

title: "Voting Wards"

}]

});

legend.startup();

view.ui.add(legend, "bottom-right");

});

</script>

</head>

<body>

</body>

</html>

The layers are just a couple layers from our REST server. This isn't for a real app we're doing, I'm just educating myself. Any pointers you have are much appreciated.

Re: How do I add multiple layers to the Legend widget?

thejuskambi — Fri, 20 May 2016 13:17:41 GMT

It looks like a bug in 4.0. Even if the title is set, the legend control does not show the value. It always get the Title from the service. The behaviour can be seen in the sample application as well. If you open the sandbox and edit the title the change will not be updated in the Legend control.

Legend widget | ArcGIS API for JavaScript 4.0
Can you please confirm this Kelly Hutchins or Robert Scheitlin, GISP

Re: How do I add multiple layers to the Legend widget?

RobertScheitlin__GISP — Fri, 20 May 2016 13:29:33 GMT

thejus,

I can confirm I am seeing the same on my end using that sample as well.

Re: How do I add multiple layers to the Legend widget?

KellyHutchins — Fri, 20 May 2016 16:30:02 GMT

This is a known issue and will be fixed in the next release of the API.

Re: How do I add multiple layers to the Legend widget?

EmilyRenkema1 — Mon, 23 May 2016 12:09:22 GMT

Thanks for the help from everyone, I really appreciate it!