front: fix osm layers render

OpenRailAssociation · Dec 6, 2023 · b7a8a8e · b7a8a8e
1 parent 5f3df61
commit b7a8a8e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 13 deletions.
diff --git a/front/src/applications/referenceMap/Map.tsx b/front/src/applications/referenceMap/Map.tsx
@@ -1,5 +1,5 @@
 import { isNil } from 'lodash';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import ReactMapGL, { AttributionControl, ScaleControl, MapRef } from 'react-map-gl/maplibre';
 import { useDispatch, useSelector } from 'react-redux';
@@ -48,6 +48,7 @@ function Map() {
   const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(
     (state: RootState) => state.map
   );
+  const [mapLoaded, setMapLoaded] = useState(false);
   const terrain3DExaggeration = useSelector(getTerrain3DExaggeration);
   const mapRef = useRef<MapRef | null>(null);
   const { urlLat, urlLon, urlZoom, urlBearing, urlPitch } = useParams();
@@ -127,6 +128,9 @@ function Map() {
             ? { source: 'terrain', exaggeration: terrain3DExaggeration }
             : undefined
         }
+        onLoad={() => {
+          setMapLoaded(true);
+        }}
       >
         <VirtualLayers />
         <AttributionControl customAttribution={CUSTOM_ATTRIBUTION} />
@@ -144,7 +148,11 @@ function Map() {
 
         {!showOSM ? null : (
           <>
-            <OSM mapStyle={mapStyle} layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
+            <OSM
+              mapStyle={mapStyle}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
+              mapIsLoaded={mapLoaded}
+            />
             <Hillshade
               mapStyle={mapStyle}
               layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}

diff --git a/front/src/common/Map/Layers/OSM.tsx b/front/src/common/Map/Layers/OSM.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import { LayerProps, Source } from 'react-map-gl/maplibre';
 
 import mapStyleBluePrintJson from 'assets/mapstyles/OSMBluePrintStyle.json';
@@ -12,6 +11,7 @@ import OrderedLayer, { OrderedLayerProps } from 'common/Map/Layers/OrderedLayer'
 
 interface OSMProps {
   mapStyle: string;
+  mapIsLoaded?: boolean;
   layerOrder?: number;
 }
 
@@ -47,13 +47,12 @@ export function genOSMLayers(mapStyle: string, layerOrder?: number) {
   return genOSMLayerProps(mapStyle, layerOrder).map((props) => <OrderedLayer {...props} />);
 }
 
-function OSM(props: OSMProps) {
-  const { mapStyle, layerOrder } = props;
-
+function OSM({ mapStyle, layerOrder, mapIsLoaded }: OSMProps) {
   // Hack to full reload layers to avoid glitches
   // when switching map style (see #5777)
   const [reload, setReload] = useState(true);
-  useEffect(() => setReload(true), [mapStyle]);
+
+  useEffect(() => setReload(true), [mapStyle, mapIsLoaded]);
   useEffect(() => {
     if (reload) setReload(false);
   }, [reload]);
@@ -65,8 +64,4 @@ function OSM(props: OSMProps) {
   ) : null;
 }
 
-OSM.propTypes = {
-  mapStyle: PropTypes.string.isRequired,
-};
-
 export default OSM;
diff --git a/front/src/modules/simulationResult/components/SimulationResultsMap.tsx b/front/src/modules/simulationResult/components/SimulationResultsMap.tsx
@@ -270,7 +270,11 @@ const Map: FC<MapProps> = ({ setExtViewport }) => {
 
         {!showOSM ? null : (
           <>
-            <OSM mapStyle={mapStyle} layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
+            <OSM
+              mapStyle={mapStyle}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
+              mapIsLoaded={mapLoaded}
+            />
             <Hillshade
               mapStyle={mapStyle}
               layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}

diff --git a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx
@@ -60,6 +60,9 @@ function Map() {
     (value: Partial<Viewport>) => dispatch(updateViewport(value, undefined)),
     [dispatch]
   );
+
+  const [mapLoaded, setMapLoaded] = useState(false);
+
   const mapRef = useRef<MapRef | null>(null);
 
   const scaleControlStyle = {
@@ -149,6 +152,10 @@ function Map() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleLoadFinished = () => {
+    setMapLoaded(true);
+  };
+
   return (
     <>
       <MapButtons map={mapRef.current ?? undefined} resetPitchBearing={resetPitchBearing} />
@@ -176,6 +183,7 @@ function Map() {
             ? { source: 'terrain', exaggeration: terrain3DExaggeration }
             : undefined
         }
+        onLoad={handleLoadFinished}
       >
         <VirtualLayers />
         <AttributionControl position="bottom-right" customAttribution={CUSTOM_ATTRIBUTION} />
@@ -193,7 +201,11 @@ function Map() {
 
         {!showOSM ? null : (
           <>
-            <OSM mapStyle={mapStyle} layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
+            <OSM
+              mapStyle={mapStyle}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
+              mapIsLoaded={mapLoaded}
+            />
             <Hillshade
               mapStyle={mapStyle}
               layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}