deps: react-leaflet 1.8 -> 4.2 (+ leaflet 1.9) — the last legacy react-* lib

Ground-up hooks rewrite of the app's core map. Removes the final batch of
React-19-blocking warnings (legacy context on Map/LayersControl/TileLayer/
Marker/CircleMarker/Circle/Tooltip + ReactDOM.render from the old controls).

Core: <Map> -> <MapContainer>; .leafletElement refs (6 files) -> the map/
layer instances directly, via a <MapReady> child (useMap) + plain refs on
Marker/Circle/GeoJSON; controlled viewport (onViewportChanged + state.center/
zoom) -> <MapEvents> (useMapEvents moveend/zoomend) + imperative setView;
onClick -> eventHandlers={{click}}; Path styling -> pathOptions/style;
subsUnion takes the L.Map directly.

The 4 v1-only plugins reimplemented (new in-repo helpers under Maps/):
- react-leaflet-control -> MapControl (L.Control + createPortal)
- react-leaflet-google  -> GoogleMutantLayer (createLayerComponent +
  leaflet.gridlayer.googlemutant; Google Maps API already loaded by Gkeys)
- react-leaflet-fullscreen -> createControlComponent + leaflet.fullscreen
- leaflet-sleep / leaflet-graphicscale kept as vanilla (work on leaflet 1.9)

Browser-verified: /fires (tiles, OSM+Google layer switch, custom control,
fullscreen, graphic scale, pan/zoom -> re-fetch, no NaN), fire detail
(GeoJSON rect + fitBounds), home (3 maps coexist; SelectionMap draggable
marker -> updatePosition + distance circle). Console now shows 0 React
warnings on home/fires. REST smoke byte-identical.

imports/ui/components/SelectionMap/SelectionMap.js

@@ -7,7 +7,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
-import { Map, Marker, CircleMarker, Circle, Tooltip } from 'react-leaflet';
+import { MapContainer, Marker, CircleMarker, Circle, Tooltip } from 'react-leaflet';
 import Leaflet from 'leaflet';
 import { withTranslation } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
@@ -18,7 +18,8 @@ import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
 import 'leaflet-sleep/Leaflet.Sleep.js';
-import Control from 'react-leaflet-control';
+import MapControl from '/imports/ui/components/Maps/MapControl';
+import { MapReady, MapEvents } from '/imports/ui/components/Maps/MapBridge';
 import { Row, Col, Button, ButtonGroup } from 'react-bootstrap';
 import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
 import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
@@ -51,13 +52,16 @@ class SelectionMap extends Component {
     this.fit = this.fit.bind(this);
     this.addScale = this.addScale.bind(this);
     this.onFstBtn = this.onFstBtn.bind(this);
-    this.onViewportChanged = this.onViewportChanged.bind(this);
+    this.onMapMove = this.onMapMove.bind(this);
+    this.handleMapReady = this.handleMapReady.bind(this);
   }
 
-  componentDidMount() {
-    if (this.isValidState()) {
-      this.addScale();
-    }
+  // v4: MapReady hands us the ready Leaflet map (replaces the componentDidMount
+  // + ref/.leafletElement wiring)
+  handleMapReady(map) {
+    this.map = map;
+    if (this.isValidState()) this.addScale();
+    this.handleLeafletLoad(map);
   }
 
   // Was UNSAFE_componentWillReceiveProps: pull center/distance from props into
@@ -75,6 +79,8 @@ class SelectionMap extends Component {
         marker: center[0] ? center : this.state.marker,
         distance: distance || this.state.distance
       });
+      // v4 map is uncontrolled: move it imperatively on a real center change
+      if (centerChanged && this.map) this.map.setView(center, this.state.zoom);
     }
     this.fit();
   }
@@ -90,7 +96,11 @@ class SelectionMap extends Component {
     this.props.onSndBtn();
   }
 
-  onViewportChanged(viewport) {
+  // v4: fed by <MapEvents> on moveend/zoomend (was the v1 onViewportChanged prop)
+  onMapMove() {
+    if (!this.map) return;
+    const c = this.map.getCenter();
+    const viewport = { center: [c.lat, c.lng], zoom: this.map.getZoom() };
     if (this.props.onViewportChanged) {
       this.props.onViewportChanged(viewport);
     }
@@ -100,7 +110,7 @@ class SelectionMap extends Component {
   }
 
   getMap() {
-    return this.selectionMap.leafletElement;
+    return this.map;
   }
 
   toggleDraggable() {
@@ -108,7 +118,7 @@ class SelectionMap extends Component {
   }
 
   updatePosition() {
-    const { lat, lng } = this.marker.leafletElement.getLatLng();
+    const { lat, lng } = this.marker.getLatLng();
     // console.log(`New marker lat ${lat} and lng ${lng}`);
     const currentDistance = this.state.distance;
     this.setState(update(this.state, { $merge: { marker: [lat, lng] } }));
@@ -122,10 +132,10 @@ class SelectionMap extends Component {
     // console.log("fit!");
     if (this.props.currentSubs.length > 0 && this.state.subsFit && this.props.action !== action.add) {
       // has autofit, do nothing
-    } else if (this.selectionMap && this.distanceCircle) {
-      if (!this.getMap().getBounds().contains(this.distanceCircle.leafletElement.getBounds())) {
+    } else if (this.map && this.distanceCircle) {
+      if (!this.getMap().getBounds().contains(this.distanceCircle.getBounds())) {
         // console.log('New area circle not visible');
-        this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds()); // padding , [70, 70]);
+        this.getMap().fitBounds(this.distanceCircle.getBounds()); // padding , [70, 70]);
       } else {
         // console.log('New area circle visible');
       }
@@ -133,7 +143,7 @@ class SelectionMap extends Component {
   }
 
   addScale() {
-    if (this.selectionMap) {
+    if (this.map) {
       // https://www.npmjs.com/package/leaflet-graphicscale
       const map = this.getMap();
       const options = {
@@ -170,16 +180,10 @@ class SelectionMap extends Component {
       this.isValidState() ?
       <Row>
         <Col xs={12} sm={12} md={12} lg={12}>
-          <Map
-              ref={(map) => {
-                  this.selectionMap = map;
-                  this.handleLeafletLoad(map);
-                }}
+          <MapContainer
               zoom={this.state.zoom}
               center={this.state.center}
               className="selectionmap-leaflet-container"
-              onViewportChanged={this.onViewportChanged}
-              animate
               sleep={window.location.pathname === '/' && !isChrome}
               sleepTime={10750}
               wakeTime={750}
@@ -189,6 +193,8 @@ class SelectionMap extends Component {
               wakeMessageTouch={t('Pulsa para activar')}
               sleepOpacity={0.6}
           >
+            <MapReady onReady={this.handleMapReady} />
+            <MapEvents handlers={{ moveend: this.onMapMove, zoomend: this.onMapMove }} />
             <DefMapLayers osmcolor />
             {this.props.action === action.edit &&
              this.props.currentSubs.map((subs, index) => (
@@ -198,7 +204,7 @@ class SelectionMap extends Component {
                    position={[subs.location.lat, subs.location.lon]}
                    icon={removeIcon}
                    title={t('Pulsa para borrar')}
-                   onClick={() => { onRemove(subs._id); }}
+                   eventHandlers={{ click: () => { onRemove(subs._id); } }}
                >
                  {index === 0 &&
                   <Tooltip
@@ -217,7 +223,7 @@ class SelectionMap extends Component {
                 <Fragment>
                   <Marker
                       draggable={this.state.draggable}
-                      onDragend={this.updatePosition}
+                      eventHandlers={{ dragend: this.updatePosition }}
                       position={this.state.marker}
                       icon={positionIcon}
                       title={t('Arrastrar para seleccionar otro punto')}
@@ -225,23 +231,18 @@ class SelectionMap extends Component {
                   />
                   <CircleMarker
                       center={this.state.marker}
-                      color="red"
-                      stroke={false}
-                      fillOpacity="1"
-                      fill
                       radius={3}
+                      pathOptions={{ color: 'red', stroke: false, fillOpacity: 1, fill: true }}
                   />
                   <Circle
                       center={this.state.marker}
                       ref={(ref) => { this.distanceCircle = ref; }}
-                      color="#145A32"
-                      fillColor="green"
-                      fillOpacity={0.1}
+                      pathOptions={{ color: '#145A32', fillColor: 'green', fillOpacity: 0.1 }}
                       radius={this.state.distance * 1000}
                   />
                 </Fragment>
                }
-                <Control position="topright" >
+                <MapControl position="topright" >
                   <ButtonGroup>
                     { this.props.sndBtn && this.props.onSndBtn &&
                       <Button
@@ -260,9 +261,9 @@ class SelectionMap extends Component {
                         {this.props.fstBtn}
                       </Button>
                   </ButtonGroup>
-                </Control>
+                </MapControl>
                 <FullScreenMap />
-          </Map>
+          </MapContainer>
         </Col>
       </Row>
         :