LayerList wdiget listen to layer changes

Aeseir

i created a layerlist widget as so:

 

this.layerList = new LayerList({
      view: this.view,
      selectionEnabled: true,
    });

 

and then added it to ui.

 

I have bunch of featurelayers, mapimagelayers,grouplayers etc now loaded on the map.

 

The user rearranges the layer in the widget list as they choose fit, is it possible to find out which layer was changed?

Sage_Wall

Hi @Aeseir take a look at this codepen, hopefully it will get you started in the right direction.  I wasn't sure exactly what properties on the layer you were interested in so I just used the layer title and index in the example.

 

require([
  "esri/WebMap",
  "esri/views/MapView",
  "esri/core/Collection",
  "esri/core/reactiveUtils",
  "esri/widgets/LayerList"
], (WebMap, MapView, Collection, reactiveUtils, LayerList) => {
  const changesList = document.querySelector("#changesList");

  const map = new WebMap({
    portalItem: {
      id: "512944c00f8a4219a4bb70691089c9e9"
    }
  });

  const view = new MapView({
    container: "viewDiv",
    map
  });

  const layerList = new LayerList({
    selectionEnabled: true,
    view
  });

  view.ui.add(layerList, "top-right");

  let previousTitles = new Collection();

  reactiveUtils.watch(
    () => view.map.allLayers.map((layer) => layer.title),
    (titles) => {
      const areTitlesEqual = detectChanges(previousTitles, titles);
      if (!areTitlesEqual) {
        whatChanged(previousTitles, titles);
      }
      previousTitles = titles;
    }
  );

  function detectChanges(
    firstCollection: Collection,
    secondCollection: Collection
  ) {
    if (firstCollection.length === secondCollection.length) {
      firstCollection.forEach((item, index) => {
        if (item === secondCollection.getItemAt(index)) {
          return true;
        }
        return false;
      });
    }
    return false;
  }

  function whatChanged(
    firstCollection: Collection,
    secondCollection: Collection
  ) {
    changesList!.innerHTML = "";
    firstCollection.forEach((item, index) => {
      if (item !== secondCollection.getItemAt(index)) {
        const listItem = document.createElement("calcite-list-item");
        listItem.label = item;
        listItem.description = `previously at index ${index} moved to index ${secondCollection.findIndex(
          (secondItem) => secondItem === item
        )}`;
        changesList!.appendChild(listItem);
      }
    });
  }
});