LayerList and setting Legend graphics

Discussion created by dcoley on Nov 23, 2015
Latest reply on Dec 8, 2015 by dcoley

Hi All -

In working with the LayerList widget the past month or so we kept trying to figure out a way to get the symbology from the feature layer and Legend into the innerHTML of the option of the LayerList widget so that we can display the feature layers' graphic under each list node. So we went back to the map's on 'layers-add-result' event setting up the function to return each layer and each layers defined id as the title:


mapMain.on("layers-add-result", function(results) {
     layerInfo = array.map(results.layers, function (layer, index) { //dojo array
            return {layer:layer.layer, title:layer.layer.id};
       legend = new Legend({
            map : mapMain,
            layerInfos: layerInfo,
            arrangement : Legend.ALIGN_LEFT
       },  "legendDiv");
       for (i = 0; i < layerInfo.length; i++){ // cant use i=0, when a label layer is present,don't know why yet.
                     layerInfo[i].content = domConstruct.create("div", {
                     innerHTML: legend.domNode.childNodes[(layerInfo.length -1) -i].childNodes[1].innerHTML
    layerList = new LayerList({
         map: mapMain,   
         layers : layerInfo
         }, "layerListDiv");
mapMain.on("zoom-end", function(results) {
     for (i = 0; i < layerInfo.length; i++){
                layerInfo[i].content = domConstruct.create("div", {
                innerHTML: legend.domNode.childNodes[(layerInfo.length -1) -i].childNodes[1].innerHTML
document.getElementById("legendDiv").style.display = "none";


Basically we (Michael Stranovsky) and myself discovered by setting a console log on the legend layerInfos, we could see that legend has a content property and that by stepping into the content property we could get at the innerHTML dom element that contains the graphic and at what index level.  So the for loop says that for each layer, go into the content, construct a div and then set the innerHTML of each layer at child node index:


[(layerInfo.length - 1) -i]


Because the legend layer ordering is the reverse of the map layer ordering we add the additional (-i).  At any rate, the innterHTML completes by stepping down one more childNodes element [1] to get at the graphic (childNodes element at [0] is the layer title text).  Add  the layerList Widgets, pass in the layerInfo value from the loop into the layerInfos option, and start the layerList.  To keep from displaying the legend div, simply set it's display to none. 


If there are layers with zoom dependency, no childNodes element will be created in the legend because they don't exist yet.  So add a on 'zoom-end' event with a legend refresh, loop through the layers childNodes elements again and refresh the layer list and when the node is created it will be added.


Known issue(s):  With a label layer present in the map, the loop counter must be started at 1.  Don't know why yet.  I also haven't tested this configuration using tiled or dynamic layers.  I welcome any comments or insights . . .