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?
Solved! Go to Solution.
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
Don't forget that the layerInfo object has the hideLayers parameter
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();
}
});
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.
Thanks going to give this a try....
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();
}
});
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 { }; }
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
});
Jay,
A JS OR is || in code:
if (layer.layer.id === "PastLocations" ||
layer.layer.id === "PastLocations2"
) { return { }; }
DUUHHH on me...lol...sorry for that stupid question...Thanks Robert