Legend

[jaykapalczynski]

I have a main index.js page

This page defines some Map Services and builds a legend.  This works fine.

I have a couple other .js pages that also display Map Services and I am trying to get them in the same Legend unsuccessfully.

I don't think I have to create a new LEGEND in the LayerList.js page but rather just push the layers from the LayerListPage back to the Index.js page to be included in the already defined LEGEND?

Looking for some thoughts on this....not sure where to go from here...

Notice the unction call to the second .js page  window.LoadLayerList(); in the index.js page

Hope this make sense....

Main Index.js page

//ADD THE LEGEND
window.map.on("layers-add-result", function (evt) {
   // CYCLE through and grab all the layer names to add to the LEGEND PLUS 
   // Remove layers not inteneted for the legend.
   var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
     if (layer.layer.id === "Roads" || layer.layer.id === "Roads1") { return { }; } 
   //Hides Layers in the Legend 
     else { return { layer: layer.layer, title: layer.layer.name }; } //Else return All others
   }); 
   // CYCLE through and grab all the layer names to add to the LEGEND
   if (layerInfo.length > 0) {
     var legendDijit = new Legend({
        map: map,
        layerInfos: layerInfo,
     }, "legend");
   legendDijit.startup(); 
   legendDijit.refresh(); 
   }
     
});


window.LoadLayerList();     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LayerList.js page

window.LoadLayerList = function(){

  var District2 = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/AVL2/MapServer/4", {
     mode: FeatureLayer.MODE_SNAPSHOT,
     id: "District2",
     opacity: .2,
     visible: true
     });
  legendLayers4.push({ layer: District2, title: 'District Boundary' });

  window.map.on("layers-add-result", function (evt) {
     var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
     if (layer.layer.id === "Biologist" || layer.layer.id === "District2") { return { }; } //Hides Layers in the Legend 
     else { return { layer: layer.layer, title: layer.layer.name }; } //Else return All others
        }); 
     if (layerInfo.length > 0) {
        var legendDijit = new Legend({
          map: map,
          layerInfos: layerInfo,
        }, "legend");
        legendDijit.startup(); 
        legendDijit.refresh(); 
     }
   });      

   // ADD MAP LAYERS

}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   Make the legendDijit a global var using window.legendDijit and update the window.legendDijit.layerInfos properties from the LayerList.js file.

[jaykapalczynski]

That would work also....but I think they way I posted it might be another way??????  Where I eliminate the duplicating legendDijit code in the LayerList.js file

[jaykapalczynski]

I was able to get this working....will post shortly.

[jaykapalczynski · Accepted solution]

I removed all the legend code from the LayerList.js page

Reset the variable of the Feature Layer using  "window."  now its global

        window.WMAFL = new FeatureLayer("https://xx/arcgis/rest/services/Projects/xx/MapServer/4", {

Then just relying on the index.js page to work as normal

       NOTING that I had to define the layer variable in the index.js page that resides in the LayerList.js page  WMAFL is the Feature Layer variable from LayerList.js

       map.addLayers([SafetyBridges, WMAFL ]); 

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

index.js

var SafetyBridges = new FeatureLayer("https://fragis.fra.dot.gov/fragis/rest/services/SafetyBridges/MapServer/0", {
   mode: FeatureLayer.MODE_ONDEMAND
});
// Push to Layer List
legendLayers6.push({ layer: SafetyBridges, title: 'Safety Bridges' });     


//ADD THE LEGEND 
window.map.on("layers-add-result", function (evt) {

  // CYCLE through and grab all the layer names to add to the LEGEND PLUS 
  // Remove layers not inteneted for the legend.
  var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
     if (layer.layer.id === "PastLocations" || layer.layer.id === "District" || 
  layer.layer.id === "weatherlayer") { return { }; } //Hides Layers in the Legend  
     else { return { layer: layer.layer, title: layer.layer.name }; } //Else return 
  }); 

  if (layerInfo.length > 0) {
     var legendDijit = new Legend({
     map: map,
     layerInfos: layerInfo,
     }, "legend");
    legendDijit.startup(); 
    legendDijit.refresh(); 
  }
});

map.addLayers([SafetyBridges, WMAFL ]);     
          ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LayerList.js

// WMA LINE 
window.WMAFL = new FeatureLayer("https://xx/arcgis/rest/services/Projects/xx/MapServer/4", {
     mode: FeatureLayer.MODE_SNAPSHOT
});
legendLayers4.push({ layer: WMAFL, title: 'WMA Line' });

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍