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 }

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://xyz/arcgis/rest/services/Projects/xyz/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://xyz/arcgis/rest/services/Projects/xyz/MapServer/4 " , { mode : FeatureLayer . MODE_SNAPSHOT } ) ; legendLayers4 . push ( { layer : WMAFL , title : 'WMA Line' } ) ;

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

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


window<SPAN class="punctuation token">.</SPAN><SPAN class="token function">LoadLayerList</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

LayerList.js page

window<SPAN class="punctuation token">.</SPAN>LoadLayerList <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>

&nbsp; <SPAN class="keyword token">var</SPAN> District2 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fvafwisdev.dgif.virginia.gov%2Farcgis%2Frest%2Fservices%2FProjects%2FAVL2%2FMapServer%2F4" target="_blank">https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Projects/AVL2/MapServer/4</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"District2"</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; legendLayers4<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> District2<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'District Boundary'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

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

&nbsp;&nbsp; <SPAN class="comment token">// ADD MAP LAYERS</SPAN>

<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

jaykapalczynski

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://xyz/arcgis/rest/services/Projects/xyz/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

<SPAN class="keyword token">var</SPAN> SafetyBridges <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Ffragis.fra.dot.gov%2Ffragis%2Frest%2Fservices%2FSafetyBridges%2FMapServer%2F0" target="_blank">https://fragis.fra.dot.gov/fragis/rest/services/SafetyBridges/MapServer/0</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_ONDEMAND
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// Push to Layer List</SPAN>
legendLayers6<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> SafetyBridges<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Safety Bridges'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 


<SPAN class="comment token">//ADD THE LEGEND </SPAN>
window<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"layers-add-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

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

&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> legendDijit <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; layerInfos<SPAN class="punctuation token">:</SPAN> layerInfo<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp;&nbsp;&nbsp; legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>SafetyBridges<SPAN class="punctuation token">,</SPAN> WMAFL <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

LayerList.js

<SPAN class="comment token">// WMA LINE </SPAN>
window<SPAN class="punctuation token">.</SPAN>WMAFL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fxx%2Farcgis%2Frest%2Fservices%2FProjects%2Fxx%2FMapServer%2F4" target="_blank">https://xyz/arcgis/rest/services/Projects/xyz/MapServer/4</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legendLayers4<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> WMAFL<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'WMA Line'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

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 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://xyz/arcgis/rest/services/Projects/xyz/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

<SPAN class="keyword token">var</SPAN> SafetyBridges <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Ffragis.fra.dot.gov%2Ffragis%2Frest%2Fservices%2FSafetyBridges%2FMapServer%2F0" target="_blank">https://fragis.fra.dot.gov/fragis/rest/services/SafetyBridges/MapServer/0</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_ONDEMAND
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// Push to Layer List</SPAN>
legendLayers6<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> SafetyBridges<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Safety Bridges'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 


<SPAN class="comment token">//ADD THE LEGEND </SPAN>
window<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"layers-add-result"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>

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

&nbsp; <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>layerInfo<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> legendDijit <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; layerInfos<SPAN class="punctuation token">:</SPAN> layerInfo<SPAN class="punctuation token">,</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp;&nbsp;&nbsp; legendDijit<SPAN class="punctuation token">.</SPAN><SPAN class="token function">refresh</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> 
&nbsp; <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>SafetyBridges<SPAN class="punctuation token">,</SPAN> WMAFL <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

LayerList.js

<SPAN class="comment token">// WMA LINE </SPAN>
window<SPAN class="punctuation token">.</SPAN>WMAFL <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fxx%2Farcgis%2Frest%2Fservices%2FProjects%2Fxx%2FMapServer%2F4" target="_blank">https://xyz/arcgis/rest/services/Projects/xyz/MapServer/4</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legendLayers4<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> layer<SPAN class="punctuation token">:</SPAN> WMAFL<SPAN class="punctuation token">,</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'WMA Line'</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

jaykapalczynski

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

RobertScheitlin__GISP

Jay,

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.