front: add unique map

front/src/applications/editor/Editor.tsx

@@ -32,6 +32,7 @@ import { loadDataModel, updateTotalsIssue } from 'reducers/editor/thunkActions';
 import { setFailure } from 'reducers/main';
 import { getIsLoading } from 'reducers/main/mainSelector';
 import { updateViewport, type Viewport } from 'reducers/map';
+import { getMap } from 'reducers/map/selectors';
 import { useAppDispatch } from 'store';
 import { castErrorToFailure } from 'utils/error';
 
@@ -101,9 +102,7 @@ const Editor = () => {
     forceRender();
   }, [switchTool, forceRender]);
 
-  const { mapStyle, viewport } = useSelector(
-    (state: { map: { mapStyle: string; viewport: Viewport } }) => state.map
-  );
+  const { mapStyle, viewport } = useSelector(getMap);
 
   const setViewport = useCallback(
     (value: Partial<Viewport>) => {

front/src/applications/editor/Map.tsx

@@ -16,24 +16,18 @@ import type { EditorContextType, ExtendedEditorContextType, Tool } from 'applica
 import type { InfraError } from 'common/api/osrdEditoastApi';
 import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
 import colors from 'common/Map/Consts/colors';
-import Background from 'common/Map/Layers/Background';
 import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
-import Hillshade from 'common/Map/Layers/Hillshade';
-import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
-import IGN_CADASTRE from 'common/Map/Layers/IGN_CADASTRE';
-import IGN_SCAN25 from 'common/Map/Layers/IGN_SCAN25';
+import IGNLayers from 'common/Map/Layers/IGNLayers';
 import { NeutralSectionsLayer, OperationalPointsLayer } from 'common/Map/Layers/InfraObjectLayers';
 import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
-import OSM from 'common/Map/Layers/OSM';
+import OSMLayers from 'common/Map/Layers/OSMLayers';
 import { Platforms as PlatformsLayer } from 'common/Map/Layers/Platforms';
 import SearchMarker from 'common/Map/Layers/SearchMarker';
-import Terrain from 'common/Map/Layers/Terrain';
-import TracksOSM from 'common/Map/Layers/TracksOSM';
 import { removeSearchItemMarkersOnMap } from 'common/Map/utils';
 import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
 import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
 import { getEditorState } from 'reducers/editor/selectors';
-import type { Viewport } from 'reducers/map';
+import type { MapStyle, Viewport } from 'reducers/map';
 import { getMap, getShowOSM, getTerrain3DExaggeration } from 'reducers/map/selectors';
 import { useAppDispatch } from 'store';
 import { getMapMouseEventNearestFeature } from 'utils/mapHelper';
@@ -43,7 +37,7 @@ interface MapProps<S extends CommonToolState = CommonToolState> {
   toolState: S;
   setToolState: (state: Partial<S>) => void;
   activeTool: Tool<S>;
-  mapStyle: string;
+  mapStyle: MapStyle;
   viewport: Viewport;
   setViewport: (newViewport: Partial<Viewport>, updateRouter?: boolean) => void;
   mapRef: React.RefObject<MapRef>;
@@ -287,30 +281,8 @@ const MapUnplugged = ({
             }}
           />
 
-          {/* Common layers */}
-          <Background
-            colors={colors[mapStyle]}
-            layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
-          />
-          <Terrain />
-          <TracksOSM
-            colors={colors[mapStyle]}
-            layerOrder={LAYER_GROUPS_ORDER[LAYERS.TRACKS_OSM.GROUP]}
-          />
-
-          <IGN_BD_ORTHO layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-          <IGN_SCAN25 layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-          <IGN_CADASTRE layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-
-          {!showOSM ? null : (
-            <>
-              <OSM mapStyle={mapStyle} layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-              <Hillshade
-                mapStyle={mapStyle}
-                layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
-              />
-            </>
-          )}
+          <OSMLayers mapStyle={mapStyle} showOSM={showOSM} hidePlatforms />
+          <IGNLayers />
 
           <LineSearchLayer
             layerOrder={LAYER_GROUPS_ORDER[LAYERS.LINE_SEARCH.GROUP]}

front/src/applications/editor/types.ts

@@ -9,6 +9,7 @@ import type { SwitchType } from 'applications/editor/tools/switchEdition/types';
 import type { Operation } from 'common/api/osrdEditoastApi';
 import type { ModalContextType } from 'common/BootstrapSNCF/ModalSNCF/ModalProvider';
 import type { EditorState } from 'reducers/editor';
+import type { MapStyle } from 'reducers/map';
 import type { AppDispatch } from 'store';
 
 import type { Layer } from './consts';
@@ -20,7 +21,7 @@ export type Reducer<T> = (value: T) => T;
 export type PartialOrReducer<T> = Partial<T> | Reducer<T>;
 
 export type MapState = {
-  mapStyle: string;
+  mapStyle: MapStyle;
   viewport: ViewState;
 };
 

front/src/applications/operationalStudies/views/SimulationResults.tsx

@@ -25,7 +25,6 @@ import SimulationResultExport from 'modules/simulationResult/SimulationResultExp
 import type { ProjectionData } from 'modules/simulationResult/types';
 import TimesStopsOutput from 'modules/timesStops/TimesStopsOutput';
 import type { TrainScheduleWithDetails } from 'modules/trainschedule/components/Timetable/types';
-import { updateViewport, type Viewport } from 'reducers/map';
 import { updateSelectedTrainId } from 'reducers/simulationResults';
 import { getTrainIdUsedForProjection } from 'reducers/simulationResults/selectors';
 import { useAppDispatch } from 'store';
@@ -73,7 +72,6 @@ const SimulationResults = ({
 
   const trainIdUsedForProjection = useSelector(getTrainIdUsedForProjection);
 
-  const [extViewport, setExtViewport] = useState<Viewport>();
   const [showWarpedMap, setShowWarpedMap] = useState(false);
   const [pathItemsCoordinates, setPathItemsCoordinates] = useState<Position[]>();
 
@@ -169,16 +167,6 @@ const SimulationResults = ({
     }
   };
 
-  useEffect(() => {
-    if (extViewport !== undefined) {
-      dispatch(
-        updateViewport({
-          ...extViewport,
-        })
-      );
-    }
-  }, [extViewport]);
-
   if ((!selectedTrainSchedule || !trainSimulation) && !projectionData) {
     return null;
   }
@@ -282,7 +270,6 @@ const SimulationResults = ({
           {/* SIMULATION : MAP */}
           <div className="simulation-map">
             <SimulationResultsMap
-              setExtViewport={setExtViewport}
               geometry={pathProperties?.geometry}
               trainSimulation={{
                 ...trainSimulation,

front/src/applications/referenceMap/Map.tsx

@@ -1,180 +1,74 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
-import { isNil } from 'lodash';
-import ReactMapGL, { AttributionControl, ScaleControl } from 'react-map-gl/maplibre';
 import type { MapRef } from 'react-map-gl/maplibre';
 import { useSelector } from 'react-redux';
-import { useParams } from 'react-router-dom';
 
+import BaseMap from 'common/Map/BaseMap';
 import MapButtons from 'common/Map/Buttons/MapButtons';
-import { CUSTOM_ATTRIBUTION } from 'common/Map/const';
-import colors from 'common/Map/Consts/colors';
-import Background from 'common/Map/Layers/Background';
-import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
-import Hillshade from 'common/Map/Layers/Hillshade';
-import IGN_BD_ORTHO from 'common/Map/Layers/IGN_BD_ORTHO';
-import IGN_CADASTRE from 'common/Map/Layers/IGN_CADASTRE';
-import IGN_SCAN25 from 'common/Map/Layers/IGN_SCAN25';
-import InfraObjectLayers from 'common/Map/Layers/InfraObjectLayers';
-import LineSearchLayer from 'common/Map/Layers/LineSearchLayer';
-import OSM from 'common/Map/Layers/OSM';
-import PlatformsLayer from 'common/Map/Layers/Platforms';
-import SearchMarker from 'common/Map/Layers/SearchMarker';
-import Terrain from 'common/Map/Layers/Terrain';
-import TracksOSM from 'common/Map/Layers/TracksOSM';
 import { removeSearchItemMarkersOnMap } from 'common/Map/utils';
 import { useInfraID } from 'common/osrdContext';
-import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
-import VirtualLayers from 'modules/simulationResult/components/SimulationResultsMap/VirtualLayers';
 import type { Viewport } from 'reducers/map';
 import { updateViewport } from 'reducers/map';
 import { getMap, getTerrain3DExaggeration } from 'reducers/map/selectors';
 import { useAppDispatch } from 'store';
 
-function Map() {
-  const mapBlankStyle = useMapBlankStyle();
+const REFERENCE_MAP_ID = 'reference-map';
 
-  const [mapLoaded, setMapLoaded] = useState(false);
+const Map = () => {
+  const dispatch = useAppDispatch();
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(getMap);
   const infraID = useInfraID();
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
+
   const mapRef = useRef<MapRef | null>(null);
-  const { urlLat, urlLon, urlZoom, urlBearing, urlPitch } = useParams();
-  const dispatch = useAppDispatch();
+
   const updateViewportChange = useCallback(
-    (value: Partial<Viewport>, updateRouter = false) => {
+    (value: Partial<Viewport>, { updateRouter } = { updateRouter: false }) => {
       dispatch(updateViewport(value, `/map`, updateRouter));
     },
     [dispatch]
   );
 
-  const scaleControlStyle = {
-    left: 20,
-    bottom: 20,
-  };
-
   const resetPitchBearing = () => {
     updateViewportChange({
-      ...viewport,
       bearing: 0,
       pitch: 0,
     });
   };
 
-  const defineInteractiveLayers = () => {
-    const interactiveLayersLocal = [];
-    if (layersSettings.tvds) {
-      interactiveLayersLocal.push('chartis/osrd_tvd_section/geo');
-    }
-    return interactiveLayersLocal;
-  };
-
-  /**
-   * When the component mount
-   * => we check if url has viewport and set it in store
-   */
-  useEffect(() => {
-    // viewport
-    const newViewport: Partial<Viewport> = {};
-    if (!isNil(urlLat)) newViewport.latitude = parseFloat(urlLat);
-    if (!isNil(urlLon)) newViewport.longitude = parseFloat(urlLon);
-    if (!isNil(urlZoom)) newViewport.zoom = parseFloat(urlZoom);
-    if (!isNil(urlBearing)) newViewport.bearing = parseFloat(urlBearing);
-    if (!isNil(urlPitch)) newViewport.pitch = parseFloat(urlPitch);
-    if (Object.keys(newViewport).length > 0) updateViewportChange(newViewport);
-    // we only do it at mount time
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const interactiveLayerIds = useMemo(
+    () => (layersSettings.tvds ? ['chartis/osrd_tvd_section/geo'] : []),
+    [layersSettings]
+  );
 
   return (
     <main className="mastcontainer mastcontainer-map">
       <MapButtons
         map={mapRef.current ?? undefined}
         resetPitchBearing={resetPitchBearing}
-        withInfraButton
-        withMapKeyButton
         bearing={viewport.bearing}
         viewPort={viewport}
+        withInfraButton
+        withMapKeyButton
       />
-      <ReactMapGL
-        {...viewport}
-        ref={mapRef}
+      <BaseMap
+        mapId={REFERENCE_MAP_ID}
+        mapRef={mapRef}
         cursor="normal"
-        style={{ width: '100%', height: '100%' }}
-        mapStyle={mapBlankStyle}
-        onMove={(e) => updateViewportChange(e.viewState)}
-        onMoveEnd={(e) => updateViewportChange(e.viewState, true)}
-        attributionControl={false} // Defined below
-        onResize={(e) => {
-          updateViewportChange({
-            width: e.target.getContainer().offsetWidth,
-            height: e.target.getContainer().offsetHeight,
-          });
-        }}
-        interactiveLayerIds={defineInteractiveLayers()}
-        touchZoomRotate
-        maxPitch={85}
-        terrain={
-          terrain3DExaggeration
-            ? { source: 'terrain', exaggeration: terrain3DExaggeration }
-            : undefined
-        }
-        onLoad={() => {
-          setMapLoaded(true);
-        }}
+        infraId={infraID}
+        interactiveLayerIds={interactiveLayerIds}
+        mapSearchMarker={mapSearchMarker}
+        mapStyle={mapStyle}
         onClick={() => {
           removeSearchItemMarkersOnMap(dispatch);
         }}
-      >
-        <VirtualLayers />
-        <AttributionControl customAttribution={CUSTOM_ATTRIBUTION} />
-        <ScaleControl maxWidth={100} unit="metric" style={scaleControlStyle} />
-
-        <Background
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
-        />
-        <Terrain />
-
-        <IGN_BD_ORTHO layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-        <IGN_SCAN25 layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-        <IGN_CADASTRE layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
-
-        {infraID && <InfraObjectLayers infraId={infraID} mapStyle={mapStyle} />}
-
-        {!showOSM ? null : (
-          <>
-            <OSM
-              mapStyle={mapStyle}
-              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
-              mapIsLoaded={mapLoaded}
-            />
-            <Hillshade
-              mapStyle={mapStyle}
-              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
-            />
-          </>
-        )}
-
-        <PlatformsLayer
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.PLATFORMS.GROUP]}
-        />
-
-        <TracksOSM
-          colors={colors[mapStyle]}
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.TRACKS_OSM.GROUP]}
-        />
-
-        <LineSearchLayer
-          layerOrder={LAYER_GROUPS_ORDER[LAYERS.LINE_SEARCH.GROUP]}
-          infraID={infraID}
-        />
-
-        {mapSearchMarker && <SearchMarker data={mapSearchMarker} colors={colors[mapStyle]} />}
-      </ReactMapGL>
+        showOSM={showOSM}
+        viewPort={viewport}
+        updatePartialViewPort={updateViewportChange}
+        terrain3DExaggeration={terrain3DExaggeration}
+      />
     </main>
   );
-}
+};
 
 export default Map;

front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx

@@ -12,10 +12,10 @@ import {
   validateTotalLength,
   validateTotalMass,
 } from 'applications/stdcm/utils/consistValidation';
+import DefaultBaseMap from 'common/Map/DefaultBaseMap';
 import { useOsrdConfSelectors } from 'common/osrdContext';
 import useInfraStatus from 'modules/pathfinding/hooks/useInfraStatus';
 import { useStoreDataForRollingStockSelector } from 'modules/rollingStock/components/RollingStockSelector/useStoreDataForRollingStockSelector';
-import NewMap from 'modules/trainschedule/components/ManageTrainSchedule/NewMap';
 import { resetMargins, restoreStdcmConfig, updateStdcmPathStep } from 'reducers/osrdconf/stdcmConf';
 import {
   getMaxSpeed,
@@ -289,14 +289,10 @@ const StdcmConfig = ({
         </div>
 
         <div className="osrd-config-item-container osrd-config-item-container-map stdcm-map">
-          <NewMap
-            id="stdcm-map-config"
-            hideAttribution
-            hideItinerary
-            preventPointSelection
-            pathGeometry={pathfinding?.geometry}
-            showStdcmAssets
-            simulationPathSteps={markersInfo}
+          <DefaultBaseMap
+            mapId="stdcm-map-config"
+            infraId={infra?.id}
+            pathStepMarkers={markersInfo}
           />
         </div>
       </div>