front: fix map marker offset

Set the `offset` prop to define the image "hotspot" (ie, pixel coordinate where the sign is planted on). Signed-off-by: Simon Ser <[email protected]> Closes: #9633
OpenRailAssociation · Dec 3, 2024 · 7f31f82 · 7f31f82
1 parent 08d9839
commit 7f31f82
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/front/src/modules/simulationResult/components/SimulationResultsMap/RenderItinerary.tsx b/front/src/modules/simulationResult/components/SimulationResultsMap/RenderItinerary.tsx
@@ -28,6 +28,8 @@ export default function RenderItinerary({
     'line-color': '#158DCF',
   };
 
+  const markerOffset: [number, number] = [0, 8];
+
   if (!pathItemsCoordinates || pathItemsCoordinates.length < 2) {
     return null;
   }
@@ -38,18 +40,34 @@ export default function RenderItinerary({
 
   return (
     <Source type="geojson" data={geojsonPath}>
-      <Marker longitude={originLongitude} latitude={originLatitude} anchor="bottom">
+      <Marker
+        longitude={originLongitude}
+        latitude={originLatitude}
+        anchor="bottom"
+        offset={markerOffset}
+      >
         <img src={originIcon} alt="origin" />
       </Marker>
       {vias.map(([longitude, latitude], index) => (
-        <Marker key={`via-${index}`} longitude={longitude} latitude={latitude} anchor="bottom">
+        <Marker
+          key={`via-${index}`}
+          longitude={longitude}
+          latitude={latitude}
+          anchor="bottom"
+          offset={markerOffset}
+        >
           <img src={viaIcon} alt={`via ${index + 1}`} />
           <span className={cx('map-pathfinding-marker', 'via-number', 'stdcm-via')}>
             {index + 1}
           </span>
         </Marker>
       ))}
-      <Marker longitude={destinationLongitude} latitude={destinationLatitude} anchor="bottom">
+      <Marker
+        longitude={destinationLongitude}
+        latitude={destinationLatitude}
+        anchor="bottom"
+        offset={markerOffset}
+      >
         <img src={destinationIcon} alt="destination" />
       </Marker>
       <OrderedLayer