Getting name of activated layer of LayerList

KaiBehncke

Dear users,

in my application I use the LayerList Widget and an Expand-Div to place "hard-coded" legend-images:

 

 const layerList = new LayerList({
            view: view
          });
          
          
          
          const expandbutton = new Expand({
  view: view,
  content: "Legende<br>(aktuell kein Layer aktiviert)",
  label: "Legende",
  id: "legendendings",
  expandTooltip:"Legende",
  expanded:false,
  container: document.createElement("div")
});

 

E.G. if the users has actived the layer "climate" a hard-coded image like "climatelegend.png" has to be placed in the legend-container.

I wonder now: How can I  find out which layer of the LayerList is activated?

If I open the legend-Expand I would like to have that information.

I tried things like:

reactiveUtils.watch(
    () => [expandbutton.expanded], ([expandbutton]) => {
      alert ("hello: "+layerList.selectedItems.layer);
    });

...but so far I don`t get the layer-name?

 

Sage_Wall

Happy to help @KaiBehncke .

Your not alone it's a common question.  An item in the layer list can be selected (area 1 in your screenshot) or the visibility on the layer can be changed with the eyeball (area 2). The selection allows for things like showing a layer's properties in a different panel without affecting the visibility of the layer.  In your case, if you want to respond to a change in the visibility of the layer you have a couple options.  One of which is to create a listItemCreatedFunction and set up the watch on an individual layer's visible property.  Another way would be to watch and respond to changes directly on the layers collection, which might be better if you wanted to show the legends for all the visible layers in the map.  I created a codepen to hopefully show how this can be done.

https://codepen.io/sagewall/pen/ZEdvLmy

// Watch the selected items array for the first selected item and log it's title
    reactiveUtils.watch(
      () => layerList.selectedItems?.getItemAt(0),
      (selectedItem) => {
        console.log("Title from selectedItems:", selectedItem?.layer.title);
      }
    );

    // Create a listItemCreatedFunction and watch the list items layer.visible property
    function listItemCreatedFunction(event) {
      const { item } = event;
      const { layer } = item;

      reactiveUtils.watch(
        () => layer.visible,
        () => {
          if (layer.visible) {
            console.log(layer.title, " is visible");
          } else {
            console.log(layer.title, " is not visible");
          }
        },
        { initial: true }
      );
    }
  });

  // Watch for all the visible layers in the map and respond when one changes
  reactiveUtils.watch(
    () =>
      view.map.layers
        .filter((layer) => layer.visible)
        .map((layer) => layer.title)
        .reverse(),
    (titles) => {
      titles.forEach((title) => {
        console.log(
          "From the watch on view.map.layers: ",
          title,
          " is visible"
        );
      });
    }
  );