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.
2026-07-21 18:45:15 +02:00 · 2026-07-21 18:45:15 +02:00 · bc778bfd97
commit bc778bfd97
parent e61a3a9bcb
18 changed files with 276 additions and 220 deletions
--- a/PENDIENTE.md
+++ b/PENDIENTE.md
@ -18,7 +18,7 @@ desarrollo (no en producción) y **bloquean el salto a React 19**. Estado:
 | react-bootstrap | 0.31 → 2 | ✅ hecho (CSS sigue en Bootstrap 4) |
 | reactstrap + 3 deps muertas | — | ✅ eliminadas (0 usos) |
 | react-router-dom | 4.2 → 6.30 | ✅ hecho (history 5, HOC `withRouterCompat`) |
-| **react-leaflet + leaflet** | 1.8/1.3 → 4/1.9 | ⏸️ **diferida** (mapa = feature central; 4 plugins v1-only sin equivalente v4; ver UPGRADE.md) |
+| react-leaflet + leaflet | 1.8/1.3 → 4.2/1.9 | ✅ hecho (Map→MapContainer, refs directas, useMap/useMapEvents; 4 plugins reimplementados: MapControl portal, GoogleMutantLayer, fullscreen, sleep/graphicscale vanilla; ver UPGRADE.md) |
 | **Bootstrap CSS/JS** | 4.1 → 5 | ⏸️ **diferida** (carrusel/navbar jQuery BS4; ver UPGRADE.md) |

 Lo verificado en navegador tras cada lib: `/`, `/fires`, `/fire/archive/<hex>`,
@ -28,9 +28,10 @@ parámetros por defecto; `UNSAFE_componentWillReceiveProps` (FromNow, FireStats,
 Fires, SelectionMap) → `getDerivedStateFromProps`/`componentDidUpdate`; Reconnect
 (banner Blaze `meteorStatus` con `findDOMNode`) → React nativo con
 `useTracker(Meteor.status)`; react-share 2→5 y react-progress-bar.js → progressbar.js
-(ambos tiraban `findDOMNode`/`defaultProps`). **Tras esto, la ÚNICA fuente de
-warnings en consola es react-leaflet + sus 4 plugins (diferida).** (Queda un
-`findDOMNode` menor solo en `/status`: el `<Blaze serverFacts>` de Status.js, página admin.)
+(ambos tiraban `findDOMNode`/`defaultProps`); y react-leaflet 1.8→4.2 (mapa central,
+4 plugins reimplementados). **Tras esto la consola tiene 0 warnings de React en las
+rutas principales** (verificado forzando re-render en / y /fires). Único resto para
+React 19: el `<Blaze serverFacts>` de Status.js (`findDOMNode`), solo en `/status` (admin).

 ---

--- a/UPGRADE.md
+++ b/UPGRADE.md
@ -308,7 +308,7 @@ MONGO_CONTAINER=tcef-mongo7 MONGO_SHELL=mongosh MONGO_PORT=27019 ./smoke/smoke.s

 | Dep | From | Target | Status |
 |---|---|---|---|
-| React / react-dom | 16.0 | 18 | ✅ done — 18.3.1 + createRoot. The peripheral react-* libs that only worked on 18 via legacy context are now all modernized (rows below) **except react-leaflet** (deferred). Our own React-19 blockers are also cleared: `defaultProps` on function components → default params; `UNSAFE_componentWillReceiveProps` → `getDerivedStateFromProps`/`componentDidUpdate`; the Blaze/findDOMNode `Reconnect` → native React; react-share 2→5 and react-progress-bar.js → progressbar.js (both dropped their findDOMNode/defaultProps). **Sole remaining console warnings are react-leaflet + its 4 plugins** — nothing else. |
+| React / react-dom | 16.0 | 18 | ✅ done — 18.3.1 + createRoot. The peripheral react-* libs that only worked on 18 via legacy context are now all modernized (rows below) **except react-leaflet** (deferred). Our own React-19 blockers are also cleared: `defaultProps` on function components → default params; `UNSAFE_componentWillReceiveProps` → `getDerivedStateFromProps`/`componentDidUpdate`; the Blaze/findDOMNode `Reconnect` → native React; react-share 2→5 and react-progress-bar.js → progressbar.js (both dropped their findDOMNode/defaultProps). react-leaflet 1.8→4.2 done too (row below). **Dev console is now 0 React warnings** on the main routes. The only React-19 leftover is the Blaze `serverFacts` on the /status admin page (findDOMNode via gadicc:blaze-react-component). |
 | react-share | 2.0 | 5.3 | ✅ done — v2 shipped function-component `defaultProps` (React-19 blocker). v5 is clean. Dropped the dead GooglePlus button (removed upstream in v4+); the other 6 share buttons are API-compatible. |
 | react-progress-bar.js | 0.2.3 | — (progressbar.js 1.1) | ✅ removed — the wrapper used the deprecated `findDOMNode`. `LoadingBar` now drives `progressbar.js` (its own underlying dep, promoted to direct) through a ref. |
 | gadicc:blaze-react-component (in Reconnect) | — | native React | ✅ Reconnect's Blaze `meteorStatus` bridge used `findDOMNode` and was always mounted → rewritten with `useTracker(Meteor.status)` + countdown effect, reusing 255kb:meteor-status's CSS. (Status.js's Blaze `serverFacts` kept — /status admin page only.) |
@ -320,7 +320,7 @@ MONGO_CONTAINER=tcef-mongo7 MONGO_SHELL=mongosh MONGO_PORT=27019 ./smoke/smoke.s
 | react-meteor-data | 0.2.16 | 3.0.6 | ✅ done — 0.2.16 (React-15/16-era) looped `withTracker` on fire-detail pages under React 18 (never-ready → blank). `meteor add react-meteor-data@3.0.6`; no call-site changes (HOC API kept). Also dropped `tmeasday:check-npm-versions` (the constraint pinning 0.2.16). See section above. |
 | i18next | 10.5 | 23.16 | ✅ done — with react-i18next 14. `whitelist`→`supportedLngs`, added `compatibilityJSON: 'v3'` (our locale JSON uses natural-language keys + v3 `_plural` layout, not the v4 `_one`/`_other` suffixes), custom separators `ß`/`ð`/`đ` kept. `sendMissing`→`saveMissing`, missingKeyHandler signature is `(lngs, ns, key, fallbackValue)` now (array first). See react-i18next row. |
 | react-i18next | 7.4 | 14.1 | ✅ done — 48 `translate([], {wait:true})`/`translate()` HOCs → `withTranslation()`; `react.wait:true`→`react.useSuspense:false`. `<Trans>` unchanged (locale JSON already stores the indexed-tag format `<1><0>{{x}}</0></1>`). ReSendEmail: removed `<Interpolate>` (deleted in v10) → `<Trans i18nKey values={{email}}/>`, dropped the removed bare `t` export. This is what silenced the per-component `Translate`/`I18n` legacy-context console spam. Backends: xhr→`i18next-http-backend` (client), sync-fs→`i18next-fs-backend` (server); `i18next-localstorage-cache` dropped (was `enabled:false`); languagedetector 2→8. Browser-verified: es/en switch, `<Trans>` interpolation (`{{countTotal}}`+`<strong>`) renders on /fires. |
-| react-leaflet + leaflet | 1.8 / 1.3.1 | 4.x / 1.9 | ⏸️ **deferred as debt** (the one lib not modernized this pass). react-leaflet v4 is a ground-up hooks rewrite of the app's core feature (the fire map), and the migration is deeply entangled: (a) **4 unmaintained v1-only plugins with no v4 equivalent** — `react-leaflet-control` (custom map buttons, 3 maps), `react-leaflet-fullscreen`, `react-leaflet-google` (`GoogleLayer` base layers in DefMapLayers), `leaflet-sleep` (`sleep`/`wakeTime`… props on `<Map>`) — each needs a bespoke `createControlComponent`/`createLayerComponent`/googlemutant reimplementation; (b) the **controlled-viewport** pattern (`onViewportChanged` + `state.center/zoom` in FiresMap/SelectionMap) is gone in v4 (`MapContainer` center/zoom are initial-only; you drive it via a `useMap()` child); (c) `.leafletElement` refs in 6 files/13 sites (FiresMap, SelectionMap, SubscriptionsMap, Fires, SubsUnion) — v4 hands you the `L.Map`/layer directly with different timing; (d) `Leaflet.control.graphicScale().addTo(map)` + `subsUnion` reach into the raw map via the ref. **v1.8 works on React 18** (verified: all maps render), so this only blocks the eventual React 19 jump. Do it as its own focused project with heavy in-browser verification (drag markers, viewport-driven fire reload, fitBounds, layer switch, fullscreen, sleep, custom controls). Stays pinned at 1.8 until then. **After the rest of the front-end modernization + warning cleanup, react-leaflet + these 4 plugins are the SOLE remaining source of dev-console warnings** (legacy context on Map/LayersControl/TileLayer/Marker/CircleMarker/Circle/Tooltip and the plugins, plus `ReactDOM.render` from react-leaflet-control). |
+| react-leaflet + leaflet | 1.8 / 1.3.1 | 4.2.1 / 1.9.4 | ✅ done — the last and hardest lib; a ground-up hooks rewrite of the app's core map. `<Map>`→`<MapContainer>`; `.leafletElement` refs (6 files/13 sites) → the map/layer instances directly (via a `<MapReady>` child using `useMap`, and plain refs on Marker/Circle/GeoJSON); the controlled-viewport pattern (`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 were reimplemented** with react-leaflet v4's factories / vanilla Leaflet plugins: `react-leaflet-control`→ in-repo `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 pipeline, no NaN), fire detail (GeoJSON rect + fitBounds), home (all 3 maps coexist; SelectionMap draggable marker→updatePosition + distance circle). **Console now 0 warnings** across home/`/fires` (forced full re-render). REST smoke byte-identical. |
 | arkham:comments-ui | 1.4.x | — | ✅ replaced with in-repo React feature |
 | nimble:restivus | Atmosphere | vendored | ✅ local precompiled package, accounts-password 2.x |
 | maximum:server-transform, meteorhacks:zones, less, markdown, test stack | — | — | ✅ removed (dead/unused) |
--- a/imports/ui/components/Maps/DefMapLayers.js
+++ b/imports/ui/components/Maps/DefMapLayers.js
@ -5,7 +5,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import { GoogleLayer } from 'react-leaflet-google/lib/';
+import GoogleMutantLayer from '/imports/ui/components/Maps/GoogleMutantLayer';
 import Gkeys from '/imports/startup/client/Gkeys';
 import { TileLayer, LayersControl } from 'react-leaflet';

@ -54,15 +54,15 @@ class DefMapLayers extends Component {
        {/* React.Fragment does not work here */}
        { this.state.gkey &&
        <BaseLayer name={t('Mapa de carreteras de Google')}>
-          <GoogleLayer opacity={defOpacity} googlekey={this.state.gkey} maptype="ROADMAP" />
+          <GoogleMutantLayer opacity={defOpacity} maptype="ROADMAP" />
        </BaseLayer> }
        { this.state.gkey &&
          <BaseLayer name={t('Mapa de terreno de Google')} checked={this.props.terrain}>
-            <GoogleLayer opacity={defOpacity} googlekey={this.state.gkey} maptype="TERRAIN" />
+            <GoogleMutantLayer opacity={defOpacity} maptype="TERRAIN" />
          </BaseLayer> }
        { this.state.gkey &&
          <BaseLayer name={t('Mapa de satélite de Google')} checked={this.props.satellite}>
-            <GoogleLayer opacity={defOpacity} googlekey={this.state.gkey} maptype="SATELLITE" />
+            <GoogleMutantLayer opacity={defOpacity} maptype="SATELLITE" />
          </BaseLayer> }
      </LayersControl>
    );
--- a/imports/ui/components/Maps/FireCircleMark.js
+++ b/imports/ui/components/Maps/FireCircleMark.js
@ -31,7 +31,7 @@ class FireCircleMark extends Component {
    } = this.props;
    const rect = rectangleAround({ lat, lon }, track, track);
    return (
-      <GeoJSON data={rect} color="red" stroke width="1" opacity=".4" fillOpacity="1">
+      <GeoJSON data={rect} style={{ color: 'red', stroke: true, weight: 1, opacity: 0.4, fillOpacity: 1 }}>
        <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
      </GeoJSON>
    );
--- a/imports/ui/components/Maps/FireIconMark.js
+++ b/imports/ui/components/Maps/FireIconMark.js
@ -33,9 +33,9 @@ class FireIconMark extends Component {
      lat, lon, scan, track, nasa, id, history, falsePositives, industries, neighbour, when, t
    } = this.props;
    return (
-      <div>
+      <Fragment>
        { !falsePositives && !industries &&
-          <Marker position={[lat, lon]} icon={nasa ? this.getIcon(scan) : nFireIcon} onClick={this.onClick} >
+          <Marker position={[lat, lon]} icon={nasa ? this.getIcon(scan) : nFireIcon} eventHandlers={{ click: this.onClick }} >
            <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
          </Marker> }
        { industries && <Marker position={[lat, lon]} icon={regIndustryIcon}>
@ -43,23 +43,20 @@ class FireIconMark extends Component {
                        </Marker> }
        { /* disabled */ industries && false && <CircleMarker
          center={[lat, lon]}
-          color="violet"
-          stroke={false}
-          fillOpacity="1"
-          fill
          radius={1}
+          pathOptions={{ color: 'violet', stroke: false, fillOpacity: 1, fill: true }}
        />}
        { falsePositives && !industries &&
-        <Marker position={[lat, lon]} icon={industryIcon} onClick={this.onClick}>
+        <Marker position={[lat, lon]} icon={industryIcon} eventHandlers={{ click: this.onClick }}>
          <Tooltip><Fragment>{t('Es una industria (fuente: nuestros usuarios/as)')}</Fragment></Tooltip>
          { /* disabled because was a past fire (and can be marked multiple times) */ false && <FirePopup t={t} history={history} id={id} lat={lat} lon={lon} /> }
        </Marker>
          }
        { !falsePositives && !industries &&
-        <CircleMarker center={[lat, lon]} color={nasa ? 'red' : '#D35400'} stroke={false} fillOpacity="1" fill radius={1} onClick={this.onClick}>
+        <CircleMarker center={[lat, lon]} radius={1} pathOptions={{ color: nasa ? 'red' : '#D35400', stroke: false, fillOpacity: 1, fill: true }} eventHandlers={{ click: this.onClick }}>
          <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
        </CircleMarker> }
-      </div>
+      </Fragment>
    );
  }
 }
--- a/imports/ui/components/Maps/FirePixel.js
+++ b/imports/ui/components/Maps/FirePixel.js
@ -12,11 +12,8 @@ const FirePixel = ({
 }) => (
  <CircleMarker
        center={[lat, lon]}
-        color={nasa ? 'red' : '#D35400'}
-        stroke={false}
-        fillOpacity="1"
-        fill
        radius={nasa ? 1 : 2}
+        pathOptions={{ color: nasa ? 'red' : '#D35400', stroke: false, fillOpacity: 1, fill: true }}
  >
    <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} />
  </CircleMarker>
--- a/imports/ui/components/Maps/FirePolygonMark.js
+++ b/imports/ui/components/Maps/FirePolygonMark.js
@ -29,7 +29,7 @@ class FirePolygonMark extends Component {
    const lon = centerid.coordinates[0];
    const lat = centerid.coordinates[1];
    return (
-      <GeoJSON data={shape} color="orange" stroke width="1" opacity=".2" fillOpacity=".0" />
+      <GeoJSON data={shape} style={{ color: 'orange', stroke: true, weight: 1, opacity: 0.2, fillOpacity: 0 }} />
    );
    /* <FirePopup t={t} history={history} id={id} nasa={nasa} lat={lat} lon={lon} when={when} /> */
  }
--- a/imports/ui/components/Maps/FullScreenMap.js
+++ b/imports/ui/components/Maps/FullScreenMap.js
@ -1,25 +1,27 @@
 /* eslint-disable react/jsx-indent-props */
 /* eslint-disable import/no-absolute-path */
-/* eslint-disable import/no-absolute-path */

-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
-import FullscreenControl from 'react-leaflet-fullscreen';
-import 'react-leaflet-fullscreen/dist/styles.css';
+import { createControlComponent } from '@react-leaflet/core';
+import L from 'leaflet';
+import 'leaflet.fullscreen';
+import 'leaflet.fullscreen/Control.FullScreen.css';

-class FullScreenMap extends Component {
-  render() {
-    const { t } = this.props;
-    return (
-      <FullscreenControl
-          position="topleft"
-          title={t('Pantalla completa')}
-          titleCancel={t('Salir de pantalla completa')}
-      />
-    );
-  }
-}
+// Replacement for react-leaflet-fullscreen (v1-only): wrap the vanilla
+// leaflet.fullscreen control with react-leaflet v4's control factory.
+const FullscreenControl = createControlComponent(
+  ({ position = 'topleft', title, titleCancel }) => L.control.fullscreen({ position, title, titleCancel })
+);
+
+const FullScreenMap = ({ t }) => (
+  <FullscreenControl
+      position="topleft"
+      title={t('Pantalla completa')}
+      titleCancel={t('Salir de pantalla completa')}
+  />
+);

 FullScreenMap.propTypes = {
  t: PropTypes.func.isRequired
--- a/imports/ui/components/Maps/GoogleMutantLayer.js
+++ b/imports/ui/components/Maps/GoogleMutantLayer.js
@ -0,0 +1,25 @@
+import { createLayerComponent } from '@react-leaflet/core';
+import L from 'leaflet';
+import 'leaflet.gridlayer.googlemutant';
+
+// Replacement for react-leaflet-google's GoogleLayer (v1-only). The Google Maps
+// JS API is already loaded (with the places library) by Gkeys before any Google
+// BaseLayer renders, so googlemutant can use window.google.maps directly.
+function createGoogleMutant({
+  maptype = 'roadmap', opacity, googlekey, ...options
+}, ctx) {
+  const instance = L.gridLayer.googleMutant({
+    type: String(maptype).toLowerCase(),
+    ...(opacity != null ? { opacity } : {}),
+    ...options
+  });
+  return { instance, context: { ...ctx } };
+}
+
+function updateGoogleMutant(instance, props, prevProps) {
+  if (props.opacity != null && props.opacity !== prevProps.opacity) {
+    instance.setOpacity(props.opacity);
+  }
+}
+
+export default createLayerComponent(createGoogleMutant, updateGoogleMutant);
--- a/imports/ui/components/Maps/MapBridge.js
+++ b/imports/ui/components/Maps/MapBridge.js
@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useMap, useMapEvents } from 'react-leaflet';
+
+// v4 replaces the v1 `ref`/`.leafletElement` + handleLeafletLoad pattern: this
+// child runs inside <MapContainer> and hands the ready Leaflet map to a class
+// parent once, so the parent can drive it imperatively (setView, fitBounds,
+// graphicScale, subsUnion, …).
+export const MapReady = ({ onReady }) => {
+  const map = useMap();
+  useEffect(() => {
+    if (onReady) onReady(map);
+    // run once per map instance
+  }, [map]); // eslint-disable-line react-hooks/exhaustive-deps
+  return null;
+};
+
+// Bridges Leaflet map events to callbacks (replaces the v1 onMoveend /
+// onViewportChanged / onZoomend props on <Map>).
+export const MapEvents = ({ handlers }) => {
+  useMapEvents(handlers || {});
+  return null;
+};
--- a/imports/ui/components/Maps/MapControl.js
+++ b/imports/ui/components/Maps/MapControl.js
@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMap } from 'react-leaflet';
+import L from 'leaflet';
+
+// Replacement for react-leaflet-control (v1-only): mounts a Leaflet control at
+// the given corner and portals arbitrary React children into it. Click/scroll
+// on the control no longer pans/zooms the map underneath.
+const MapControl = ({ position = 'topright', children }) => {
+  const map = useMap();
+  const [container, setContainer] = useState(null);
+
+  useEffect(() => {
+    const ReactControl = L.Control.extend({
+      onAdd: () => {
+        const div = L.DomUtil.create('div', 'leaflet-control leaflet-control-react');
+        L.DomEvent.disableClickPropagation(div);
+        L.DomEvent.disableScrollPropagation(div);
+        setContainer(div);
+        return div;
+      },
+      onRemove: () => setContainer(null)
+    });
+    const control = new ReactControl({ position });
+    control.addTo(map);
+    return () => control.remove();
+  }, [map, position]);
+
+  return container ? createPortal(children, container) : null;
+};
+
+export default MapControl;
--- a/imports/ui/components/Maps/SubsUnion/SubsUnion.js
+++ b/imports/ui/components/Maps/SubsUnion/SubsUnion.js
@ -12,7 +12,8 @@ const subsUnion = (union, options) => {
  const interactive = options.interactive || false;

  if (options.subs) {
-    const lmap = options.map.leafletElement;
+    // v4: options.map is the Leaflet map instance directly (no .leafletElement)
+    const lmap = options.map;
    if (union) {
      lmap.removeLayer(union);
    }
@ -30,7 +31,7 @@ const subsUnion = (union, options) => {
        if (options.fit && options.bounds) {
          // console.log(options.bounds);
          const bounds = JSON.parse(options.bounds);
-          options.map.leafletElement.fitBounds(L.latLngBounds(bounds._northEast, bounds._southWest));
+          lmap.fitBounds(L.latLngBounds(bounds._northEast, bounds._southWest));
        }
      } else if (options.subs.length > 0) {
        const result = calcUnion(L, options.subs, sub => sub, true);
@ -43,7 +44,7 @@ const subsUnion = (union, options) => {
        });
        union.addTo(lmap);
        if (options.fit) {
-          options.map.leafletElement.fitBounds(bounds);
+          lmap.fitBounds(bounds);
        }
      }
    }
--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/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>
        :
--- a/imports/ui/pages/Fires/Fires.js
+++ b/imports/ui/pages/Fires/Fires.js
@ -10,7 +10,8 @@ import { Row, Col, Alert, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
-import { Map, GeoJSON } from 'react-leaflet';
+import { MapContainer, GeoJSON } from 'react-leaflet';
+import { MapReady } from '/imports/ui/components/Maps/MapBridge';
 import { rectangleAround } from 'map-common-utils';
 import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
 import NotFound from '/imports/ui/pages/NotFound/NotFound';
@ -75,9 +76,15 @@ class Fire extends React.Component {
    });
  }

-  handleLeafletMapLoad(map) {
-    if (map && map.leafletElement) {
-      const lmap = map.leafletElement;
+  // v4: MapReady hands us the ready Leaflet map directly (no ref/.leafletElement)
+  handleMapReady(lmap) {
+    this.fireMap = lmap;
+    this.handleLeafletMapLoad(lmap);
+    if (this.circle) lmap.fitBounds(this.circle.getBounds());
+  }
+
+  handleLeafletMapLoad(lmap) {
+    if (lmap) {
      const bounds = lmap.getBounds();
      const ne = bounds.getNorthEast();
      const sw = bounds.getSouthWest();
@ -103,8 +110,9 @@ class Fire extends React.Component {
  }

  handleLeafletCircleLoad(circle) {
-    if (this.fireMap && this.fireMap.leafletElement && circle && circle.leafletElement) {
-      this.fireMap.leafletElement.fitBounds(circle.leafletElement.getBounds());
+    // v4: circle is the Leaflet GeoJSON layer; this.fireMap is the Leaflet map
+    if (this.fireMap && circle) {
+      this.fireMap.fitBounds(circle.getBounds());
    }
  }

@ -134,27 +142,17 @@ class Fire extends React.Component {
        {!loading &&
         <Fragment>
           <h4 className="page-header">{this.title}</h4>
-           <Map
-               ref={(map) => {
-                   this.fireMap = map;
-                   this.handleLeafletMapLoad(map);
-                 }}
-               animate
-               sleep={false}
+           <MapContainer
               center={[fire.lat, fire.lon]}
               className="fire-leaflet-container"
               zoom={13}
           >
-             <Fragment>
-               <GeoJSON
-                   ref={(circle) => { this.circle = circle; this.handleLeafletCircleLoad(circle); }}
-                   data={rect}
-                   color="red"
-                   stroke
-                   width="1"
-                   fillOpacity="0.0"
-               />
-             </Fragment>
+             <MapReady onReady={map => this.handleMapReady(map)} />
+             <GeoJSON
+                 ref={(circle) => { this.circle = circle; this.handleLeafletCircleLoad(circle); }}
+                 data={rect}
+                 style={{ color: 'red', stroke: true, weight: 1, fillOpacity: 0 }}
+             />
             <FireList
                 t={t}
                 history={this.props.history}
@ -179,7 +177,7 @@ class Fire extends React.Component {
             />
             <DefMapLayers satellite />
             <FullScreenMap />
-           </Map>
+           </MapContainer>
           <p>{t('Coordenadas:')} {fire.lat}, {fire.lon}</p>
           {(fire.type === 'modis' || fire.type === 'viirs') &&
            <Fragment>
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -11,8 +11,9 @@ import { withTracker } from 'meteor/react-meteor-data';
 import { Tracker } from 'meteor/tracker';
 import { Helmet } from 'react-helmet-async';
 import { Trans, withTranslation } from 'react-i18next';
-import { Map } from 'react-leaflet';
-import Control from 'react-leaflet-control';
+import { MapContainer } from 'react-leaflet';
+import MapControl from '/imports/ui/components/Maps/MapControl';
+import { MapReady, MapEvents } from '/imports/ui/components/Maps/MapBridge';
 import LoadingBar from '/imports/ui/components/Loading/LoadingBar';
 import _ from 'lodash';
 import store from 'store';
@ -76,6 +77,24 @@ class FiresMap extends React.Component {
    this.onViewportChanged = this.onViewportChanged.bind(this);
    this.onMoveEnd = this.onMoveEnd.bind(this);
    this.onMoveStart = this.onMoveStart.bind(this);
+    this.handleMoveEnd = this.handleMoveEnd.bind(this);
+    this.handleMapReady = this.handleMapReady.bind(this);
+  }
+
+  // v4: combined moveend/zoomend handler fed by <MapEvents> — clears the
+  // moving flag and reports the new viewport (was the v1 onMoveend +
+  // onViewportChanged props on <Map>).
+  handleMoveEnd() {
+    this.onMoveEnd();
+    if (!this.map) return;
+    const c = this.map.getCenter();
+    this.onViewportChanged({ center: [c.lat, c.lng], zoom: this.map.getZoom() });
+  }
+
+  // v4: MapReady hands us the ready Leaflet map (replaces ref/.leafletElement)
+  handleMapReady(map) {
+    this.map = map;
+    this.handleLeafletLoad(map);
  }

  componentDidMount() {
@ -110,7 +129,7 @@ class FiresMap extends React.Component {
  }

  getMap() {
-    return this.fireMap.leafletElement;
+    return this.map;
  }

  setShowSubsUnion(showSubsUnion) {
@ -124,7 +143,7 @@ class FiresMap extends React.Component {

  handleViewportChange(viewport) {
    console.log(`Viewport changed: ${JSON.stringify(viewport)}`);
-    if (this.fireMap) {
+    if (this.map) {
      const bounds = this.getMap().getBounds();
      // console.log(bounds);
      mapSize.set([bounds.getNorthEast(), bounds.getSouthWest()]);
@ -143,6 +162,8 @@ class FiresMap extends React.Component {

  centerOnUserLocation(viewport) {
    this.setState({ viewport: { center: viewport.center, zoom: 10 } });
+    // v4 map is uncontrolled: move it imperatively
+    if (this.map) this.map.setView(viewport.center, 10);
  }

  useMarkers(use) {
@ -161,8 +182,8 @@ class FiresMap extends React.Component {
  }

  handleLeafletLoad(map) {
-    if (map && map.leafletElement && !this.state.moving) {
-      const lmap = map.leafletElement;
+    if (map && !this.state.moving) {
+      const lmap = map;
      try {
        const bounds = lmap.getBounds();
        mapSize.set([bounds.getNorthEast(), bounds.getSouthWest()]);
@ -266,24 +287,13 @@ class FiresMap extends React.Component {
           <LoadingBar progress={this.props.loading ? 0.9 : 1} />
           : ''}
           {/* https://github.com/CliffCloud/Leaflet.Sleep */}
-           <Map
-               ref={(map) => {
-                   this.fireMap = map;
-                   this.handleLeafletLoad(map);
-                   }}
+           <MapContainer
               className="firesmap-leaflet-container"
-               animate
               minZoom={5}
               center={this.state.viewport.center}
               zoom={this.state.viewport.zoom}
               preferCanvas
-               viewport={this.state.viewport}
-               onViewportChanged={this.onViewportChanged}
               sleep={isHome() && !isChrome}
-               onMoveend={this.onMoveEnd}
-               onMovestart={this.onMoveStart}
-               onZoomend={this.onMoveEnd}
-               onZoomstart={this.onMoveStart}
               sleepTime={10750}
               wakeTime={750}
               sleepNote
@ -292,6 +302,14 @@ class FiresMap extends React.Component {
               wakeMessageTouch={this.props.t('Pulsa para activar')}
               sleepOpacity={0.6}
           >
+             <MapReady onReady={this.handleMapReady} />
+             <MapEvents handlers={{
+                 movestart: this.onMoveStart,
+                 zoomstart: this.onMoveStart,
+                 moveend: this.handleMoveEnd,
+                 zoomend: this.handleMoveEnd
+               }}
+             />
             {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
             {!this.props.loading &&
             <Fragment>
@ -349,13 +367,13 @@ class FiresMap extends React.Component {
               />
             </Fragment> }
             <DefMapLayers gray />
-             <Control position="topright" >
+             <MapControl position="topright" >
               <ButtonGroup>
                 <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
               </ButtonGroup>
-             </Control>
+             </MapControl>
             <FullScreenMap />
-           </Map>
+           </MapContainer>
           <Row>
             <Col xs={12} sm={12} md={12} lg={12}>
               <p className="firesmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
--- a/imports/ui/pages/Subscriptions/SubscriptionsMap.js
+++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.js
@ -8,14 +8,15 @@ import { Button, ButtonGroup, Row, Col } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, withTranslation } from 'react-i18next';
-import { Map } from 'react-leaflet';
+import { MapContainer } from 'react-leaflet';
 import { Helmet } from 'react-helmet-async';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 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 } from '/imports/ui/components/Maps/MapBridge';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
 import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
 import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
@ -39,16 +40,18 @@ class SubscriptionsMap extends React.Component {
      },
      init: true
    };
-  }
-
-  componentDidMount() {
-    if (this.subscriptionsMap) {
-      this.addScale();
-    }
+    this.handleMapReady = this.handleMapReady.bind(this);
  }

  getMap() {
-    return this.subscriptionsMap.leafletElement;
+    return this.map;
+  }
+
+  // v4: <MapReady> hands us the ready Leaflet map (no ref/.leafletElement)
+  handleMapReady(map) {
+    this.map = map;
+    this.addScale();
+    this.handleLeafletLoad(map);
  }

  addScale() {
@ -77,8 +80,9 @@ class SubscriptionsMap extends React.Component {
  }

  centerOnUserLocation(viewport) {
-    console.log(`viewport: ${JSON.stringify(viewport)}`);
    this.setState({ init: false, viewport });
+    // v4 map is uncontrolled: move it imperatively
+    if (this.map) this.map.setView(viewport.center, viewport.zoom);
  }

  gotoParticipe() {
@ -112,15 +116,10 @@ class SubscriptionsMap extends React.Component {
             <Trans>En verde, las zonas vigiladas por nuestros usuari@s actualmente</Trans>&nbsp;(*)
           </Row>
         </Col>
-         <Map
-             ref={(map) => {
-                 this.subscriptionsMap = map;
-                 this.handleLeafletLoad(map);
-               }}
+         <MapContainer
             zoom={this.state.viewport.zoom}
             center={this.state.viewport.center}
             className="subscriptionsmap-leaflet-container"
-             animate
             sleep={window.location.pathname === '/' && !isChrome}
             sleepTime={10750}
             wakeTime={750}
@ -130,8 +129,9 @@ class SubscriptionsMap extends React.Component {
             wakeMessageTouch={this.props.t('Pulsa para activar')}
             sleepOpacity={0.6}
         >
+           <MapReady onReady={this.handleMapReady} />
           <DefMapLayers gray />
-           <Control position="topright" >
+           <MapControl position="topright" >
             <ButtonGroup>
               <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
               <Button
@ -141,9 +141,9 @@ class SubscriptionsMap extends React.Component {
                 {this.props.t('Participa')}
               </Button>
             </ButtonGroup>
-           </Control>
+           </MapControl>
           <FullScreenMap />
-         </Map>
+         </MapContainer>
         <Row>
           <Col xs={12} sm={12} md={12} lg={12}>
             <p className="subscriptionsmap-footnote"><span style={{ paddingRight: '5px' }}>(*)</span><Trans i18nKey="mapPrivacy" parent="span"><em>Para preservar la privacidad de nuestros usuarios/as, los datos reflejados están aleatoriamente alterados y son solo orientativos.</em></Trans></p>
--- a/package-lock.json
+++ b/package-lock.json
@ -36,9 +36,11 @@
        "jquery-validation": "^1.17.0",
        "jsend": "^1.0.2",
        "juice": "^4.2.2",
-        "leaflet": "^1.3.1",
+        "leaflet": "^1.9.4",
        "leaflet-graphicscale": "0.0.2",
        "leaflet-sleep": "^0.5.1",
+        "leaflet.fullscreen": "^3.0.2",
+        "leaflet.gridlayer.googlemutant": "^0.14.1",
        "lodash": "^4.17.4",
        "loms.perlin": "^1.0.1",
        "map-common-utils": "^0.5.0",
@ -66,10 +68,7 @@
        "react-dom": "^18.3.1",
        "react-helmet-async": "^2.0.5",
        "react-i18next": "^14.1.3",
-        "react-leaflet": "^1.8.0",
-        "react-leaflet-control": "^1.4.0",
-        "react-leaflet-fullscreen": "0.0.6",
-        "react-leaflet-google": "^3.2.1",
+        "react-leaflet": "^4.2.1",
        "react-mobile-store-button": "0.0.3",
        "react-places-autocomplete": "^5.4.3",
        "react-resize-detector": "^1.1.0",
@ -1433,6 +1432,17 @@
        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
      }
    },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
    "node_modules/@react-types/shared": {
      "version": "3.36.0",
      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
@ -11138,9 +11148,10 @@
      }
    },
    "node_modules/leaflet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
-      "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
    },
    "node_modules/leaflet-graphicscale": {
      "version": "0.0.2",
@ -11154,9 +11165,16 @@
      "integrity": "sha1-kfhDPzjtu2uKm3jT0E7HOW6fYPY="
    },
    "node_modules/leaflet.fullscreen": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/leaflet.fullscreen/-/leaflet.fullscreen-1.4.4.tgz",
-      "integrity": "sha512-HxHDHAQt/Q7nMlo/v3MUhir30GXt4YXIbmyJT53EnnBAyXC6IbKXeCnl2Mlsj6V5kSBwh3J8No6btaBdAz64og=="
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/leaflet.fullscreen/-/leaflet.fullscreen-3.0.2.tgz",
+      "integrity": "sha512-m27waFVmwdrLGXjZw2L8b7w/W28EY+u7IGzK2x8K99XaPuzKbjI+/H1j0OMawLcRPZyDRh+39XpyLsvDwHUEoA==",
+      "license": "MIT"
+    },
+    "node_modules/leaflet.gridlayer.googlemutant": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.14.1.tgz",
+      "integrity": "sha512-/OYxEjmgxO1U1KOhTzg+m8c0b95J0943LU8DXQmdJu/x2f+1Ur78rvEPO2QCS0cmwZ3m6FvE5I3zXnBzJNWRCA==",
+      "license": "Beerware"
    },
    "node_modules/leven": {
      "version": "2.1.0",
@ -11270,11 +11288,6 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
    },
-    "node_modules/lodash-es": {
-      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.5.tgz",
-      "integrity": "sha512-Ez3ONp3TK9gX1HYKp6IhetcVybD+2F+Yp6GS9dfH8ue6EOCEzQtQEh4K0FYWBP9qLv+lzeQAYXw+3ySfxyZqkw=="
-    },
    "node_modules/lodash._basecallback": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/lodash._basecallback/-/lodash._basecallback-3.3.1.tgz",
@ -19621,67 +19634,17 @@
      "license": "MIT"
    },
    "node_modules/react-leaflet": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-1.8.0.tgz",
-      "integrity": "sha512-/2mm/ZQodvcknMJpHm0UMbsQIeQVe9TNA62TUYzTWEX6yAqfLxjQmKIio0xKWSoMIRuQ0R1lROvVZFgiHT7KNw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "license": "Hippocratic-2.1",
      "dependencies": {
-        "lodash": "^4.0.0",
-        "lodash-es": "^4.0.0",
-        "warning": "^3.0.0"
+        "@react-leaflet/core": "^2.1.0"
      },
      "peerDependencies": {
-        "leaflet": "^1.3.0",
-        "prop-types": "^15.5.0",
-        "react": "^15.0.0 || ^16.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0"
-      }
-    },
-    "node_modules/react-leaflet-control": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/react-leaflet-control/-/react-leaflet-control-1.4.0.tgz",
-      "integrity": "sha1-sqNFgZQ+HTsCBi7XoOx556zHuSM=",
-      "dependencies": {
-        "prop-types": "^15.5.7"
-      },
-      "peerDependencies": {
-        "leaflet": "^0.7.7 || ^1.0.2",
-        "react": "^0.14.7 || ^15.0.0",
-        "react-dom": "^0.14.7 || ^15.0.0",
-        "react-leaflet": "^0.11.5 || ^1.0.1"
-      }
-    },
-    "node_modules/react-leaflet-fullscreen": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/react-leaflet-fullscreen/-/react-leaflet-fullscreen-0.0.6.tgz",
-      "integrity": "sha512-YWP58+mgpyAbTPGdMRRWGuHV4GrkThmDRXth7qcVGqBxJTj1Nt4xy2zwOKcEYtfTimiG4lEXS18UQ+5cyuh0FQ==",
-      "dependencies": {
-        "leaflet.fullscreen": "^1.4.x"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.6.x",
-        "react": "^15.2.x || ^16.x",
-        "react-dom": "^15.2.x || ^16.x",
-        "react-leaflet": "^0.12.x || ^1.x"
-      }
-    },
-    "node_modules/react-leaflet-google": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/react-leaflet-google/-/react-leaflet-google-3.2.1.tgz",
-      "integrity": "sha1-WEEcGqvvi92PBjFZF+MjHX3ezb8=",
-      "deprecated": "This npm package is obsolete. Plz, use the npm package react-leaflet-google-v2",
-      "peerDependencies": {
-        "google-maps": "^3.2.1",
-        "leaflet": "^1.0.3",
-        "react": "^15.5.0",
-        "react-leaflet": "^1.0.1"
-      }
-    },
-    "node_modules/react-leaflet/node_modules/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
      }
    },
    "node_modules/react-lifecycles-compat": {
--- a/package.json
+++ b/package.json
@ -36,9 +36,11 @@
    "jquery-validation": "^1.17.0",
    "jsend": "^1.0.2",
    "juice": "^4.2.2",
-    "leaflet": "^1.3.1",
+    "leaflet": "^1.9.4",
    "leaflet-graphicscale": "0.0.2",
    "leaflet-sleep": "^0.5.1",
+    "leaflet.fullscreen": "^3.0.2",
+    "leaflet.gridlayer.googlemutant": "^0.14.1",
    "lodash": "^4.17.4",
    "loms.perlin": "^1.0.1",
    "map-common-utils": "^0.5.0",
@ -66,10 +68,7 @@
    "react-dom": "^18.3.1",
    "react-helmet-async": "^2.0.5",
    "react-i18next": "^14.1.3",
-    "react-leaflet": "^1.8.0",
-    "react-leaflet-control": "^1.4.0",
-    "react-leaflet-fullscreen": "0.0.6",
-    "react-leaflet-google": "^3.2.1",
+    "react-leaflet": "^4.2.1",
    "react-mobile-store-button": "0.0.3",
    "react-places-autocomplete": "^5.4.3",
    "react-resize-detector": "^1.1.0",