Emit baselayerchange Event on layer changes via layer selector

[juanbrk]

Describe the feature

Currently, the PlanPlugin does not emit a baselayerchange event when users switch layers. This makes it challenging to respond to layer changes programmatically, such as adjusting the map view to ensure the selected layer is immediately visible.

Adding support for the baselayerchange event (or a similar custom event) would allow developers to listen for layer selection changes and trigger appropriate actions (e.g., auto-zooming or fitting bounds).

Alternatives you've considered

I've tried listening to the baselayerchange event when the plan plugin is ready, but didn't get any luck. I also tried listening to the overlayadd map event with no luck.

Additional context

Currently, when switching layers to a secured basemap layer I need to zoom out or move the map around before I get the layer rendered visible on the map. I understand this is what I need to do but the users don't know about that and complain that the map is not visible.

If only I could listen to baselayerchange event, I could add a zoom transition to trigger the rendering of the map an automatically.

[mistic100]

Again : please provide a demo.

baselayerchange is a Leaflet event, so it is emitted by the Map instance, not by the PlanPlugin instance.

PlanPlugin != Leaftlet

[mistic100]

https://photo-sphere-viewer.js.org/api/classes/PlanPlugin.PlanPlugin.html#getLeaflet

viewer.getPlugin('plan').getLeaflet().on('baselayerchange', (e) => {
  console.log(e);
});

[juanbrk]

Can't provide you with a demo right now but what I'm doing is basically what You just mentioned but It doesn't work, nothing gets printed and the function is never called:

  const onBaseLayerChange = useCallback((event) => {
    console.log('e:');
  }, []);

  useEffect(() => {
    if (viewer) {
      const planPlugin = viewer.getPlugin<PlanPlugin>(PlanPlugin);
      const leaflet = planPlugin.getLeaflet();

      leaflet.on('baselayerchange', onBaseLayerChange);
    }
    return () => {
      if (viewer) {
        const planPlugin = viewer.getPlugin<PlanPlugin>(PlanPlugin);
        const leaflet = planPlugin.getLeaflet();

        leaflet.off('baselayerchange', onBaseLayerChange);
      }
    };
  }, [viewer, onBaseLayerChange]);

By the way, this is the same pattern I use to listen and handle every other event succesfuly (moveend, zoomend) but not with this one.

[mistic100]

So I made a demo https://codesandbox.io/p/sandbox/icy-bird-vwqlz4

And you just have to use "layeradd" event instead.

Because as the docs says https://leafletjs.com/reference.html#map-baselayerchange the "baselayerchange" event is only called by the Leaflet Layers control, which is not what is used by my plugin.

[juanbrk]

I've implemented your solution on my side and the event gets triggered a gazillion times, crashing the app. I've also created a mini-version of it on codesandbox to test there with the bare-minimum needed for the app to run, and It worked properly. So I must have something that makes the event get triggered multiple times that I need to figure out, on my side.