Select to view content in your preferred language

Add/Remove Layers By Group

2347
6
06-01-2023 10:25 AM
Labels (2)
JeffreyThompson2
MVP Regular Contributor

I have put together a widget designed to allow users to add/remove layers at runtime either one-by-one or as a group of related layers, in a simple, user-friendly interface.

Use case it was designed for:

I am building a map to be a central data repository for a city government. Users usually only want to see data from their department, but may occasionally need access to other data. There is far too much data visually/performance wise to have it all loaded at a single time. Many users have little to no GIS or computer skills.

Problems in current widgets this widget is designed to compensate for:

Add Data Widget - Not very user-friendly, does not support adding groups of data at once, does not allow limiting data to curated list (Looks like this feature is coming very soon.)

Layers are usually given random ids.

Map Layers Widget- Users can make layers visible or hidden, but not totally add or remove them which could cause performance issues and an overly cluttered layer list. 

Screenshots:

Widget CollapsedWidget CollapsedSelect layers by groupSelect layers by groupSelect layers IndividuallySelect layers Individually

How to use:

Open /src/components/layers.ts and replace the dummy data with the layers and groups you want to use. I recommend setting your Map Widget to a WebMap with only a basemap and no layer data and loading all of your data from this widget. By default, groups[0] will appear selected on load, you may wish to set this to null or a different group. If you chose to have a group selected on load, each layer in that group should be set to activeOnLoad: true. By default, layers are loaded as MapImageLayers to support sublayers. You may wish to change the type to a FeatureLayer or some other type of layer.

Possible Improvements (I'm not planning to do additional support or improvements.):

Getting the layers.ts data to load from config.json, so it could be edited without the developer edition.

Adding additional properties to the layers and modify the addLayers function to construct the layers differently based on these properties. (Such as a property that says if a layer should be a FeatureLayer or a MapImageLayer.) 

GIS Developer
City of Arlington, Texas
6 Replies
FredericPoliart_EsriAU
Occasional Contributor II

Great! thank you

0 Kudos
BrandonPrice1
Occasional Contributor

Yes Jeffrey, this is great. Nice job. Since the layers added through the widget aren't part of the initial web map where the symbology and popups are normally set, how are you customizing the symbology and popup details?

0 Kudos
JeffreyThompson2
MVP Regular Contributor

The map layer will pick up the default symbology and popup from the map server.

You can also extend the widget to set the symbology and popupTemplate when loading the layer. If you want to customize the symbology and popupTemplates, I recommend using FeatureLayers rather than MapImageLayers.

GIS Developer
City of Arlington, Texas
0 Kudos
TommyJackson
New Contributor II

Can added layers then be edited in Experience Builder?

0 Kudos
JeffreyThompson2
MVP Regular Contributor

No. At least, not currently or without other customizations. The added layers will not be configured in the Edit Widget of Experience Builder. I think the latest Online update allows for the Edit Widget to edit data from the Add Data Widget, so it is possible that in Developer Edition 1.14, which should be out soon, that the Edit Widget will also be able to pickup layers added from this widget.

GIS Developer
City of Arlington, Texas
0 Kudos
AlixVezina
Esri Regular Contributor

This is currently under design and is targeted for the June 2024 update. However, the definitive release is to be confirmed. Tagging @TianWen for any other updates.

0 Kudos