Access list of FeatureLayers in separate js file

Question

Hello all!

Was wondering if it's possible to create a .js file with a long list of FeatureLayer URLs,  and access those FeatureLayers from my main .js file in order create a GroupLayer that can be more simply controlled/rendered?

the FeatureLayer list is so long that I did not want to clutter my main .js file.  hoping to keep it cleaner with separate list of URLs in a separate file and just access it.  can I read those newly created Layers from main.js?

example:

-layers.js-

const firstLayer = new FeatureLayer({
url: "https://../FeatureServer/0",
})

const secondLayer = new FeatureLayer({
url: "https://../FeatureServer/0",
})

const thirdLayer = new FeatureLayer({
url: "https://../FeatureServer/0",
})

-main.js-

const newGroupLayer = new GroupLayer({
renderer: Render,
layers: [firstLayer, secondLayer, thirdLayer]
});
map.add(newGroupLayer);

Sage_Wall · Answer

Yeah its a scope thing.  I could be wrong, but looks like you may be using the AMD modules from CDN and then possibly adding multiple script tags in your HTLM?  The first example I shared was for cases where you are using the ESM and installing from npm.

Removing the var, let, or const from in front of the name will push the variable up into the global scope, but that could lead to issues down the road that are very hard to debug.

I'd suggest taking a look at how to define and require custom AMD modules.  We have some documentation here: https://developers.arcgis.com/javascript/latest/amd-build/#configure-amd-to-load-custom-modules and there is more documentation on AMD modules from dojo here: https://dojotoolkit.org/documentation/tutorials/1.10/modules/

I made a quick example of what I think you may be trying to do in a different stackblitz project that uses AMD modules:

https://stackblitz.com/edit/web-platform-tauguw?file=app%2Fmain.js

The layers are created in a layers.js file and added to the map in main.js

Paco · Answer

Thanks!  that looks like a good way to do it using an array.

I think I was(and still am) just struggling with "scope" in my code.   I thought using "var" in my related js code would give me global access?  but I just removed "var" or "const"(ex.  "layername = new FeatureLayer") and the variable was now readable.   I tried all sorts of placement of variables and js "<script src=>",   but it just didnt want to find those external variables.  removing the "var/const" has worked for now.

not sure if that is the correct fix?  was scope my biggest/only problem?   Thx!

Sage_Wall · Answer

Hi @Paco , this can be done quite easily.  Simply create a new file and export an array of objects with the feature layer properties you want to define.

// layers.js
export const layers = [
  {
    title: 'Smoke Forecast',
    url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NDGD_SmokeForecast_v1/FeatureServer',
  },
  {
    title: 'Current Wildfires',
    url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USA_Wildfires_v1/FeatureServer',
  },
  {
    title: 'Watches and Warnings',
    url: 'https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/NWS_Watches_Warnings_v1/FeatureServer',
  },
];

then in your main.js file import your array and add new feature layers to your group layer like this:

// index.js
import { layers } from './layers';
const groupLayer = new GroupLayer();

layers.forEach((layer) => {
  groupLayer.add(
    new FeatureLayer({
      ...layer,
    })
  );
});

map.add(groupLayer);

I made a complete demo app up on StackBlitz https://stackblitz.com/edit/js-dkcbd7?file=index.js