Enabling a specific reference layer when one base layer of a particular set of base layers is selected

[andrewc213]

In my Esri map ReactJS TypeScript program, I have a LayerList widget, a portion of which I took a screenshot (Street Labels, Mobile Home Parks, and Tax Rate Areas belong to the reference layers GroupLayer; zero, one, or multiple reference layers can be enabled at the same time, but exactly one and only one base layer can be active at any given time):

I have a specific requirement that I need to fulfill (two specific behaviors; nothing more, nothing less):

At any given moment, if "Street Labels" is inactive and any Aerial (satellite imagery) base layer is clicked on (regardless of whether that Aerial layer is already selected), "Street Labels" is enabled.
At any given moment, if "Street Labels" is active and the Street base layer is clicked on (regardless of whether the Street layer is already selected), "Street Labels" is disabled.

I tried using the on() method to watch for a click on any of the pertinent layer options and then perform the necessary behaviors, but it doesn't seem to be working.

    layerList.on("trigger-action", () => {
      // Check the visibility of the aerial layers
      const isAerialLayerVisible = [Layers.aerial2023Map, Layers.aerial2020Map, Layers.aerial2017Map, Layers.aerial2014Map].some(layer => layer.visible);
      
      // Automatically enable streetLabelsMap if any aerial layer is visible
      if (isAerialLayerVisible) {
        Layers.streetLabelsMap.visible = true;
      }

      // Disable streetLabelsMap if streetMap is the selected base layer
      if (Layers.streetMap.visible) {
        Layers.streetLabelsMap.visible = false;
      }
    });

[Sage_Wall · Accepted solution]

Hi @andrewc213 ,

The trigger-action event only emits when a custom action added to the list item is clicked. This does not include the visibility button.  What you want to do is watch the visible property on the layer with reactiveUtils and respond when that changes.  Since you are using the exclusive visibility mode on the group layer it simplifies things, you can assume if the streets layer is visible the arial layers are not visible.

Wrote a quick codepen, I had to substitute the labels for another point feature service but it's the same workflow (sorry that they are tiny black dots).  https://codepen.io/sagewall/pen/GRbQbzw

    reactiveUtils.watch(
      () => streetLayer.visible,
      (visible) => {
        visible
          ? (streetLabels.visible = false)
          : (streetLabels.visible = true);
      }
    );

 Hope this helps 😀

[andrewc213]

This solution worked wonders; thanks very much!