Update the whole leaflet ecosystem

frontend/package.json

@@ -34,11 +34,11 @@
     }
   },
   "dependencies": {
-    "@20tab/react-leaflet-resetview": "^1.0.1",
+    "@20tab/react-leaflet-resetview": "^1.1.0",
     "@hcaptcha/react-hcaptcha": "^1.4.4",
     "@makina-corpus/rando3d": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.1",
-    "@raruto/leaflet-elevation": "1.7.0",
+    "@raruto/leaflet-elevation": "1.9.0",
     "@react-hook/resize-observer": "^1.2.6",
     "@sentry/nextjs": "^7.12.1",
     "@tanstack/react-query": "^5.51.1",
@@ -55,13 +55,13 @@
     "dotenv-flow": "^3.2.0",
     "express": "^4.17.1",
     "html-react-parser": "^2.0.0",
-    "leaflet": "^1.7.1",
     "leaflet-boundary-canvas": "^1.0.0",
     "leaflet-rastercoords": "^1.0.5",
     "leaflet.locatecontrol": "^0.81.1",
-    "leaflet.offline": "^3.0.1",
+    "leaflet.offline": "^3.1.0",
     "next": "^13.1.6",
     "next-compose-plugins": "^2.2.1",
+    "next-leaflet-cluster": "^1.0.0",
     "next-pwa": "^5.6.0",
     "orejime": "^2.3.0",
     "postcss": "8.3.6",
@@ -72,9 +72,8 @@
     "react-infinite-scroll-component": "6.1.0",
     "react-inlinesvg": "^4.0.4",
     "react-intl": "^6.2.1",
-    "react-leaflet": "3.1.0",
+    "react-leaflet": "^4.2.1",
     "react-leaflet-fullscreen": "^4.1.0",
-    "react-leaflet-markercluster": "^3.0.0-rc1",
     "react-leaflet-textpath": "2.1.0",
     "react-media-hook": "^0.5.0",
     "react-select": "^5.7.2",
@@ -101,7 +100,7 @@
     "@testing-library/react": "^16.0.0",
     "@types/debounce": "^1.2.1",
     "@types/jest": "27.0.2",
-    "@types/leaflet": "1.7.5",
+    "@types/leaflet": "^1.9.12",
     "@types/node": "22.5.4",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",

frontend/src/__mocks__/react-leaflet.js

@@ -0,0 +1,11 @@
+const MapContainer = ({ children }) => <div data-testid="MapContainer">{children}</div>;
+
+const useMap = () => ({ fitBounds: () => {} });
+
+const TileLayer = () => <div data-testid="TileLayer" />;
+
+const Marker = ({ children }) => <div data-testid="Marker">{children}</div>;
+
+const Popup = () => <div data-testid="Popup" />;
+
+export { MapContainer, TileLayer, Marker, Popup, useMap };

frontend/src/components/Map/DetailsMap/DetailsMap.tsx

@@ -32,22 +32,23 @@
 import { OutdoorCourseResult } from 'modules/outdoorCourse/interface';
 import { cn } from 'services/utils/cn';
 import { BackToMapButton } from 'components/BackToMapButton';
-import { BackButton } from '../components/BackButton';
 
-import { TrekMarkersAndCourse } from './TrekMarkersAndCourse';
-import { getMapConfig } from '../config';
-import { AltimetricProfile } from '../components/AltimetricProfile';
-import { ControlSection } from '../components/ControlSection';
-import { useDetailsMap } from './useDetailsMap';
+import { BackButton } from 'components/Map/components/BackButton';
+import { AltimetricProfile } from 'components/Map/components/AltimetricProfile';
+import { ControlSection } from 'components/Map/components/ControlSection';
+import DetailsMapDrawer from 'components/Map/components/DetailsMapDrawer';
+import { ResetView } from 'components/Map/components/ResetView';
+import TileLayerManager from 'components/Map/components/TileLayerManager';
+import FullscreenControl from 'components/Map/components/FullScreenControl';
+import ViewPointHD from 'components/Map/components/ViewPointHD';
+import { CRSPixel } from 'components/Map/components/ViewPointHD/CRSPixel';
+import { AnnotationList } from 'components/Map/components/ViewPointHD/AnnotationList';
+import LocateControl from 'components/Map/components/LocateControl';
+
 import { MapChildren, PointWithIcon } from './MapChildren';
-import DetailsMapDrawer from '../components/DetailsMapDrawer';
-import { ResetView } from '../components/ResetView';
-import TileLayerManager from '../components/TileLayerManager';
-import FullscreenControl from '../components/FullScreenControl';
-import ViewPointHD from '../components/ViewPointHD';
-import { CRSPixel } from '../components/ViewPointHD/CRSPixel';
-import { AnnotationList } from '../components/ViewPointHD/AnnotationList';
-import LocateControl from '../components/LocateControl';
+import { useDetailsMap } from './useDetailsMap';
+import { getMapConfig } from '../config';
+import { TrekMarkersAndCourse } from './TrekMarkersAndCourse';
 
 export interface GeometryListProps {
   geometry:
@@ -160,7 +161,7 @@
     if (visibleSection === 'report' && reportVisibility) {
       props.setMapId?.('default');
     }
   }, [visibleSection, props.setMapId]);
 
   const hasTitle = Boolean(props.title);
 
@@ -189,7 +190,7 @@
           navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))
         }
         zoomControl={props.hasZoomControl}
-        whenCreated={setMapInstance}
+        ref={setMapInstance}
         bounds={bounds}
         {...(mapToDisplay !== 'default' && { crs: CRSPixel(mapToDisplay) })}
       >
@@ -198,7 +199,7 @@
             <FormattedMessage id="report.mapButton.validate" />
           </BackButton>
         ) : (
-          <BackButton icon={<ArrowLeft size={24} />} onClick={hideMap} />
+          <BackButton icon={<ArrowLeft size={18} />} onClick={hideMap} />
         )}
         {props.hasZoomControl && <FullscreenControl />}
         {mapToDisplay !== 'default' && (

frontend/src/components/Map/SearchMap/MapContainer.tsx

@@ -18,7 +18,7 @@ const MapContainer: React.FC<Props> = ({ children, whenCreated, hasZoomControl =
       center={mapConfig.searchMapCenter as [number, number]}
       zoom={mapConfig.searchMapZoom}
       maxZoom={mapConfig.maximumZoomLevel}
-      whenCreated={whenCreated}
+      ref={whenCreated}
       scrollWheelZoom
       zoomControl={hasZoomControl}
       id="search_map"

frontend/src/components/Map/SearchMap/index.tsx

@@ -1,19 +1,18 @@
-import MapContainer from 'components/Map/SearchMap/MapContainer';
-import MoveHandler from 'components/Map/SearchMap/MoveHandler';
-import SearchMapChildrens from 'components/Map/SearchMap/SearchMapChildrens';
 import { LatLngBounds } from 'leaflet';
-import React from 'react';
 import { ScaleControl } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 
+import MapContainer from 'components/Map/SearchMap/MapContainer';
+import MoveHandler from 'components/Map/SearchMap/MoveHandler';
+import SearchMapChildrens from 'components/Map/SearchMap/SearchMapChildrens';
 import { ArrowLeft } from 'components/Icons/ArrowLeft';
 import { useTileLayer } from 'hooks/useTileLayer';
-import { BackButton } from '../components/BackButton';
-import { FilterButton } from '../components/FilterButton';
-import { ResetView } from '../components/ResetView';
-import TileLayerManager from '../components/TileLayerManager';
-import FullscreenControl from '../components/FullScreenControl';
-import LocateControl from '../components/LocateControl';
+import { BackButton } from 'components/Map/components/BackButton';
+import { FilterButton } from 'components/Map/components/FilterButton';
+import { ResetView } from 'components/Map/components/ResetView';
+import TileLayerManager from 'components/Map/components/TileLayerManager';
+import FullscreenControl from 'components/Map/components/FullScreenControl';
+import LocateControl from 'components/Map/components/LocateControl';
 
 export type PropsType = {
   segments?: { x: number; y: number }[];
@@ -41,7 +40,7 @@ const SearchMap: React.FC<PropsType> = props => {
     <MapContainer whenCreated={setMapInstance} hasZoomControl={props.hasZoomControl}>
       {props.onMove && <MoveHandler onMove={props.onMove} />}
       <TileLayerManager />
-      <BackButton icon={<ArrowLeft size={24} />} onClick={hideMap} />
+      <BackButton icon={<ArrowLeft size={18} />} onClick={hideMap} />
       <FilterButton openFilterMenu={props.openFilterMenu} />
       {props.hasZoomControl === true && <FullscreenControl />}
       <ResetView />

frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { MapContainer, ScaleControl } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 
-import { ArrowLeft } from 'components/Icons/ArrowLeft';
 import { Bbox } from 'modules/details/interface';
 import {
   GeometryCollection,
@@ -15,13 +14,16 @@ import {
   PolygonGeometry,
 } from 'modules/interface';
 import { useTileLayer } from 'hooks/useTileLayer';
-import { BackButton } from '../components/BackButton';
+import { ArrowLeft } from 'components/Icons/ArrowLeft';
+import { BackButton } from 'components/Map/components/BackButton';
 
-import { GeometryList } from '../DetailsMap/GeometryList';
-import { getMapConfig } from '../config';
-import { GeometryListProps } from '../DetailsMap/DetailsMap';
-import { ResetView } from '../components/ResetView';
-import TileLayerManager from '../components/TileLayerManager';
+import { GeometryList } from 'components/Map/DetailsMap/GeometryList';
+import { getMapConfig } from 'components/Map/config';
+import { GeometryListProps } from 'components/Map/DetailsMap/DetailsMap';
+import { ResetView } from 'components/Map/components/ResetView';
+import TileLayerManager from 'components/Map/components/TileLayerManager';
+import LocateControl from 'components/Map/components/LocateControl';
+import FullscreenControl from 'components/Map/components/FullScreenControl';
 
 interface TouristicContentGeometryNullable {
   geometry:
@@ -46,12 +48,12 @@ export type PropsType = {
 };
 
 export const TouristicContentMap: React.FC<PropsType> = props => {
-  const center: LatLngBoundsExpression = [
+  const bounds: LatLngBoundsExpression = [
     [props.bbox.corner1.y, props.bbox.corner1.x],
     [props.bbox.corner2.y, props.bbox.corner2.x],
   ];
 
-  const { setMapInstance } = useTileLayer(Number(props.touristicContentGeometry.id), center);
+  const { setMapInstance } = useTileLayer(Number(props.touristicContentGeometry.id), bounds);
 
   const hideMap = () => {
     if (props.hideMap) {
@@ -61,32 +63,30 @@ export const TouristicContentMap: React.FC<PropsType> = props => {
 
   const mapConfig = getMapConfig();
   return (
-    <>
-      <MapContainer
-        className="size-full"
-        scrollWheelZoom
-        maxZoom={
-          navigator.onLine
-            ? mapConfig.maximumZoomLevel
-            : Math.max(...(mapConfig?.zoomAvailableOffline ?? []))
-        }
-        minZoom={
-          navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))
-        }
-        whenCreated={setMapInstance}
-        zoomControl={props.hasZoomControl}
-        bounds={center}
-        attributionControl={false}
-      >
-        <BackButton className="desktop:hidden" icon={<ArrowLeft size={24} />} onClick={hideMap} />
-        <ResetView />
-        <TileLayerManager />
-        <ScaleControl />
-        {props.touristicContentGeometry !== null && (
-          <GeometryList contents={[props.touristicContentGeometry as GeometryListProps]} />
-        )}
-      </MapContainer>
-    </>
+    <MapContainer
+      className="size-full"
+      scrollWheelZoom
+      maxZoom={
+        navigator.onLine
+          ? mapConfig.maximumZoomLevel
+          : Math.max(...(mapConfig?.zoomAvailableOffline ?? []))
+      }
+      minZoom={navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))}
+      ref={setMapInstance}
+      zoomControl={props.hasZoomControl}
+      bounds={bounds}
+      attributionControl={false}
+    >
+      <BackButton icon={<ArrowLeft size={18} />} onClick={hideMap} />
+      {props.hasZoomControl === true && <FullscreenControl />}
+      <ResetView />
+      <TileLayerManager />
+      <LocateControl />
+      <ScaleControl />
+      {props.touristicContentGeometry !== null && (
+        <GeometryList contents={[props.touristicContentGeometry as GeometryListProps]} />
+      )}
+    </MapContainer>
   );
 };
 

frontend/src/components/Map/components/AltimetricProfile/index.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect } from 'react';
-import '@raruto/leaflet-elevation';
-import '@raruto/leaflet-elevation/dist/leaflet-elevation.min.css';
+import { useEffect } from 'react';
 import L from 'leaflet';
+import '@raruto/leaflet-elevation/src/index.js';
+import '@raruto/leaflet-elevation/src/index.css';
 import { useMap } from 'react-leaflet';
 import { useIntl } from 'react-intl';
 import { useRouter } from 'next/router';
 import { getDefaultLanguage } from 'modules/header/utills';
-import useHasMounted from 'hooks/useHasMounted';
 
 interface AltimetricProfileProps {
   trekGeoJSON: string;
@@ -17,14 +16,11 @@ export const AltimetricProfile: React.FC<AltimetricProfileProps> = ({ trekGeoJSO
   const map = useMap();
   const intl = useIntl();
   const language = useRouter().locale ?? getDefaultLanguage();
-  const isMounted = useHasMounted();
 
   useEffect(() => {
-    if (!isMounted) {
+    if (!map) {
       return;
     }
-    const div = document.getElementById(id);
-    if (div) div.innerHTML = '';
 
     // @ts-expect-error the lib is not typed
     const elevationControl = L.control.elevation({
@@ -56,7 +52,13 @@ export const AltimetricProfile: React.FC<AltimetricProfileProps> = ({ trekGeoJSO
     L.setLocale(language);
 
     elevationControl.load(trekGeoJSON);
-  }, [id, intl, isMounted, language, map, trekGeoJSON]);
+
+    return () => {
+      elevationControl.clear();
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      map.removeControl(elevationControl);
+    };
+  }, [id, intl, language, map, trekGeoJSON]);
 
   return null;
 };

frontend/src/components/Map/components/ClusterContainer/index.tsx

@@ -1,7 +1,6 @@
+import ClusterGroup from 'next-leaflet-cluster';
 import { getMapConfig } from 'components/Map/config';
-import React from 'react';
-import MarkerClusterGroup from 'react-leaflet-markercluster';
-import { ClusterMarker } from '../../Markers/Cluster';
+import { ClusterMarker } from 'components/Map/Markers/Cluster';
 
 interface ClusterContainerProps {
   children: React.ReactNode;
@@ -21,25 +20,18 @@ const clusteringMaxZoom = getMapConfig().maximumZoomLevel;
 /**
  * Wraps MarkerClusterGroup to enable/disable it easily
  */
-export const ClusterContainer: React.FC<ClusterContainerProps> = ({ children, enabled }) => {
-  // All MarkerClusterGroup props options are here: (the lib is not properly typed yet)
-  // https://github.com/Leaflet/Leaflet.markercluster#all-options
-
-  // The issue: https://github.com/yuzhva/react-leaflet-markercluster/issues
-
-  return (
-    <MarkerClusterGroup
-      iconCreateFunction={ClusterMarker}
-      maxClusterRadius={
-        enabled
-          ? (zoom: number) =>
-              zoom <= clusterRadiusThreshold ? lowZoomClusterRadius : highZoomClusterRadius
-          : 0
-      }
-      disableClusteringAtZoom={clusteringMaxZoom}
-      spiderfyOnMaxZoom={true}
-    >
-      {children}
-    </MarkerClusterGroup>
-  );
-};
+export const ClusterContainer: React.FC<ClusterContainerProps> = ({ children, enabled }) => (
+  <ClusterGroup
+    iconCreateFunction={ClusterMarker}
+    maxClusterRadius={
+      enabled
+        ? (zoom: number) =>
+            zoom <= clusterRadiusThreshold ? lowZoomClusterRadius : highZoomClusterRadius
+        : 0
+    }
+    disableClusteringAtZoom={clusteringMaxZoom}
+    spiderfyOnMaxZoom
+  >
+    {children}
+  </ClusterGroup>
+);

frontend/src/components/Map/components/CustomControl/index.tsx

@@ -3,7 +3,7 @@ import { useMap } from 'react-leaflet';
 import L, { ControlPosition } from 'leaflet';
 import ReactDOM from 'react-dom';
 
-interface CustomControlProps {
+export interface CustomControlProps {
   children: React.ReactNode;
   position?: ControlPosition;
   name?: string;

frontend/src/components/Map/components/HoverableMarker.tsx

@@ -2,14 +2,15 @@
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
 import React, { ReactNode, useMemo } from 'react';
 import { Marker } from 'react-leaflet';
+import { LatLngTuple } from 'leaflet';
 import { TrekChildMarker } from '../Markers/TrekChildMarker';
 import { TrekMarker } from '../Markers/TrekMarker';
 
 const ZOOM_RATIO = 1.5;
 
 interface BaseProps {
   id: string;
-  position: [number, number];
+  position: LatLngTuple;
   children?: ReactNode;
   onMouseOver?: () => void;
   onMouseOut?: () => void;
@@ -50,6 +51,6 @@
         {props.children}
       </Marker>
     ),
     [props.id, isCorrespondingCardHovered, color],
   );
 };