how to listen to the layer control events of a react-leaflet map

Question

I'm following this example

https://react-leaflet.js.org/docs/example-layers-control

to build in a small ionic+react app.

How could I listen to change of state of each of the overlay layers checkboxes?

I would like to change the center and zoom of my map to show all makers of the active overlay layers.

Answer 1

You can tap into the eventHandlers prop of each layer, which is just a wrapper for all the event handlers that can be added to any leaflet layer. So you can tap into the add and remove events, and listen for those events on each layer. Those events are triggered when adding and removing layers with the LayersControl:

    <MapContainer {...props}>
      <LayersControl collapsed={false}>
        <LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
          <TileLayer
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            eventHandlers={{
              add: (e) => {
                console.log("Added Layer:", e.target);
              },
              remove: (e) => {
                console.log("Removed layer:", e.target);
              }
            }}
          />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="OpenStreetMap.BlackAndWhite">
          <TileLayer
            url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
            eventHandlers={{
              add: (e) => {
                console.log("Added Layer:", e.target);
              },
              remove: (e) => {
                console.log("Removed layer:", e.target);
              }
            }}
          />
        </LayersControl.BaseLayer>
        <LayersControl.Overlay name="Marker with popup">
          <Marker
            position={center}
            eventHandlers={{
              add: (e) => {
                console.log("Added Layer:", e.target);
              },
              remove: (e) => {
                console.log("Removed layer:", e.target);
              }
            }}
          >
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </LayersControl.Overlay>
      </LayersControl>
    </MapContainer>

Working Codesandbox