front: add vias in simulation results map and warped map

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

@@ -20,6 +20,7 @@ import type { ProjectionData } from 'modules/simulationResult/types';
 import TimesStopsOutput from 'modules/timesStops/TimesStopsOutput';
 import { updateViewport, type Viewport } from 'reducers/map';
 import { useAppDispatch } from 'store';
+import { getPointCoordinates } from 'utils/geometry';
 
 const SPEED_SPACE_CHART_HEIGHT = 521.5;
 const HANDLE_TAB_RESIZE_HEIGHT = 20;
@@ -65,6 +66,15 @@ const SimulationResults = ({
     infraId
   );
 
+  // Compute path items coordinates in order to place them on the map
+
+  const pathItemsCoordinates =
+    path &&
+    pathProperties &&
+    path.path_item_positions.map((positionOnPath) =>
+      getPointCoordinates(pathProperties.geometry, path.length, positionOnPath)
+    );
+
   const {
     operationalPoints: projectedOperationalPoints,
     filteredOperationalPoints,
@@ -192,6 +202,7 @@ const SimulationResults = ({
                 }
               : undefined
           }
+          pathItemsCoordinates={pathItemsCoordinates}
           setMapCanvas={setMapCanvas}
         />
       </div>

front/src/modules/simulationResult/components/SimulationResultsMap/RenderItinerary.tsx

@@ -1,18 +1,23 @@
-import type { Feature, LineString } from 'geojson';
+import cx from 'classnames';
+import type { Feature, LineString, Position } from 'geojson';
 import { Marker, Source } from 'react-map-gl/maplibre';
 
 import destinationIcon from 'assets/pictures/mapMarkers/destination.svg';
+import viaIcon from 'assets/pictures/mapMarkers/intermediate-point.svg';
 import originIcon from 'assets/pictures/mapMarkers/start.svg';
 import OrderedLayer from 'common/Map/Layers/OrderedLayer';
 
 interface RenderItineraryProps {
   geojsonPath: Feature<LineString>;
+  pathItemsCoordinates?: Position[];
   layerOrder: number;
 }
 
-export default function RenderItinerary(props: RenderItineraryProps) {
-  const { geojsonPath, layerOrder } = props;
-
+export default function RenderItinerary({
+  geojsonPath,
+  pathItemsCoordinates,
+  layerOrder,
+}: RenderItineraryProps) {
   const paintBackgroundLine = {
     'line-width': 4,
     'line-color': '#EDF9FF',
@@ -23,15 +28,30 @@ export default function RenderItinerary(props: RenderItineraryProps) {
     'line-color': '#158DCF',
   };
 
-  // We know we have a geometry so we have at least 2 coordinates
-  const [startLongitude, startLatitude] = geojsonPath.geometry.coordinates.at(0)!;
-  const [endLongitude, endLatitude] = geojsonPath.geometry.coordinates.at(-1)!;
+  if (!pathItemsCoordinates || pathItemsCoordinates.length < 2) {
+    return null;
+  }
+
+  const [originLongitude, originLatitude] = pathItemsCoordinates.at(0)!;
+  const [destinationLongitude, destinationLatitude] = pathItemsCoordinates.at(-1)!;
+  const vias = pathItemsCoordinates.slice(1, -1);
 
   return (
     <Source type="geojson" data={geojsonPath}>
-      <Marker longitude={startLongitude} latitude={startLatitude} anchor="bottom">
+      <Marker longitude={originLongitude} latitude={originLatitude} anchor="bottom">
         <img src={originIcon} alt="origin" />
       </Marker>
+      {vias.map(([longitude, latitude], index) => (
+        <Marker key={`via-${index}`} longitude={longitude} latitude={latitude} anchor="bottom">
+          <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">
+        <img src={destinationIcon} alt="destination" />
+      </Marker>
       <OrderedLayer
         id="geojsonPathBackgroundLine"
         type="line"
@@ -40,9 +60,6 @@ export default function RenderItinerary(props: RenderItineraryProps) {
         layerOrder={layerOrder}
       />
       <OrderedLayer id="geojsonPathLine" type="line" paint={paintLine} layerOrder={layerOrder} />
-      <Marker longitude={endLongitude} latitude={endLatitude} anchor="bottom">
-        <img src={destinationIcon} alt="destination" />
-      </Marker>
     </Source>
   );
 }

front/src/modules/simulationResult/components/SimulationResultsMap/SimulationResultsMap.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import bbox from '@turf/bbox';
-import { lineString, point } from '@turf/helpers';
+import { lineString, point, type Position } from '@turf/helpers';
 import lineLength from '@turf/length';
 import lineSlice from '@turf/line-slice';
 import type { MapLayerMouseEvent } from 'maplibre-gl';
@@ -64,12 +64,14 @@ type SimulationResultMapProps = {
   setExtViewport: (mapViewport: Viewport) => void;
   geometry?: PathPropertiesFormatted['geometry'];
   trainSimulation?: SimulationResponseSuccess & { trainId: number; startTime: string };
+  pathItemsCoordinates?: Position[];
   setMapCanvas?: (mapCanvas: string) => void;
 };
 
 const SimulationResultMap = ({
   geometry,
   trainSimulation,
+  pathItemsCoordinates,
   setMapCanvas,
 }: SimulationResultMapProps) => {
   const { urlLat = '', urlLon = '', urlZoom = '', urlBearing = '', urlPitch = '' } = useParams();
@@ -347,6 +349,7 @@ const SimulationResultMap = ({
           <RenderItinerary
             geojsonPath={geojsonPath}
             layerOrder={LAYER_GROUPS_ORDER[LAYERS.ITINERARY.GROUP]}
+            pathItemsCoordinates={pathItemsCoordinates}
           />
         )}
 

front/src/styles/scss/applications/operationalStudies/_simulationresults.scss

@@ -85,4 +85,27 @@
     text-shadow: 0 0 3px #fff;
     padding-bottom: 1.5rem;
   }
+
+  .map-pathfinding-marker {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    position: absolute;
+    font-weight: 500;
+    border-radius: 4px;
+    line-height: 0.7rem;
+    padding: 0.15rem 0.25rem;
+    font-size: 0.7rem;
+    white-space: nowrap;
+    &.via-number {
+      padding: 0;
+      font-weight: bold;
+      color: white;
+    }
+    &.stdcm-via {
+      align-self: flex-start;
+      padding-top: 0.5rem;
+      color: black;
+    }
+  }
 }