Layer List that remembers visible layers

[PartyPelican]

Hello,

There have been times when users have asked me if they could save their own version of visible layers in an experience. It usually occurs on experiences that contain a map with many layers. So, I decided to work on a layer list widget that does just that: it saves whatever the current layer list visibility settings are for the corresponding map. Feel free to download the code and try it out (I am still working on it).

It uses the IndexedDB API and saves a database to your client side storage.

I wanted to allow the user to change the colors of the save and clear buttons but I hit a snag. While the colors do change, the slider icon and details on the jimu-ui ColorPicker component doesnt update. The color and details in the setting pane just stay the same. Has anyone ever experienced that behavior before? How do I get those details to update?

Update:

Found a bug where the layer list wouldn't render. I fixed it. I've attached the latest code.

Found a bug where a sublayer wouldn't be updated with the settings saved in IndexedDB. Fixed the bug, attached the latest code. Also added a modal to prompt the resetting of the visible layers so you don't accidentally clear it out. 

Found a bug where the modal wouldn't display across the entire page, fixed it. Also fixed slowness when loading the data from indexdb. It now uses a cursor to grab all the data and is much faster. 

[JanSarata · Accepted solution]

Hi @PartyPelican 

I had the same issues. I believe the problem is with different format how the color is saved in config and the format which the component ColorPicker is using.

<ColorPicker

                      color={props.config.graphicsColor}

                      width={30}

                      height={30}

                      showArrow={true}

                      placement={'bottom'}

                      disableAlpha={false}

                      onChange={(value) => { onMapGraphicsColorChanged(value); }} />

const onMapGraphicsColorChanged = (value: string): void => {

    // color in array format needs to be transformed to rgba(255,255,255, 1) format which is readable by ColorPicker component

    const rgbaString = rgbaToRgbaString(value);

    props.onSettingChange({

      id: props.id,

      config: {

        ...props.config,

        graphicsColor: rgbaString

      }

    });

  };

Initial value in config.json

  "graphicsColor": "rgba(0, 255, 255, 0.65)",

[JeffreyThompson2]

Nice. I've been wanting to work on something like this. How close are you to finishing? I would like to include it in the Custom Widgets list when it is ready.

Do you think you can make a version that makes a deep clone of the layers so that it can also remember layers that have been added at runtime?

[PartyPelican]

Pretty close!

Once I fix that ColorPicker issue I am just going to refactor the code, comment, and try to spot any bugs I might have missed. If you spot any errors, please let me know. I'm always open to suggestions on how to improve it.

So you're saying if a user adds a layer, if I could also store that layer in the client side database so that it comes up again when they come back to the experience? I think that's possible.

[JeffreyThompson2]

The API contains the map.layers property which is an array of all the operational layers in the map. https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#layers

If you could store a deep clone of this array, then calling map.layers.addMany(savedArray) should effectively restore all the layers to the save state. I believe the API ignores trying to add a duplicate layer, but you may need to do some sort of check to prevent that. It might not work for any client side layers either.