front: redesign map in result page

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import DestinationIcon from 'assets/pictures/stdcm/destination.svg';
+import DestinationIcon from 'assets/pictures/mapMarkers/destination.svg';
 import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
 import type { StdcmConfSelectors } from 'reducers/osrdconf/stdcmConf/selectors';

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import OriginIcon from 'assets/pictures/stdcm/start.svg';
+import OriginIcon from 'assets/pictures/mapMarkers/start.svg';
 import { useOsrdConfActions, useOsrdConfSelectors } from 'common/osrdContext';
 import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
 import type { StdcmConfSelectors } from 'reducers/osrdconf/stdcmConf/selectors';

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

@@ -4,7 +4,7 @@ import { Location } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import IntermediatePointIcon from 'assets/pictures/stdcm/intermediate-point.svg';
+import IntermediatePointIcon from 'assets/pictures/mapMarkers/intermediate-point.svg';
 import { useOsrdConfSelectors, useOsrdConfActions } from 'common/osrdContext';
 import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
 import type { StdcmConfSelectors } from 'reducers/osrdconf/stdcmConf/selectors';

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

@@ -1,6 +1,8 @@
 import type { Feature, LineString } from 'geojson';
-import { Source } from 'react-map-gl/maplibre';
+import { Marker, Source } from 'react-map-gl/maplibre';
 
+import destinationIcon from 'assets/pictures/mapMarkers/destination.svg';
+import originIcon from 'assets/pictures/mapMarkers/start.svg';
 import OrderedLayer from 'common/Map/Layers/OrderedLayer';
 
 interface RenderItineraryProps {
@@ -11,14 +13,36 @@ interface RenderItineraryProps {
 export default function RenderItinerary(props: RenderItineraryProps) {
   const { geojsonPath, layerOrder } = props;
 
-  const paint = {
-    'line-width': 3,
-    'line-color': '#82be00',
+  const paintBackgroundLine = {
+    'line-width': 4,
+    'line-color': '#EDF9FF',
   };
 
+  const paintLine = {
+    'line-width': 1,
+    '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)!;
+
   return (
     <Source type="geojson" data={geojsonPath}>
-      <OrderedLayer id="geojsonPath" type="line" paint={paint} layerOrder={layerOrder} />
+      <Marker longitude={startLongitude} latitude={startLatitude} anchor="bottom">
+        <img src={originIcon} alt="origin" />
+      </Marker>
+      <OrderedLayer
+        id="geojsonPathBackgroundLine"
+        type="line"
+        paint={paintBackgroundLine}
+        beforeId="geojsonPathLine"
+        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/trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/ItineraryMarkers.tsx

@@ -7,10 +7,10 @@ import { Marker } from 'react-map-gl/maplibre';
 import { useSelector } from 'react-redux';
 
 import destinationSVG from 'assets/pictures/destination.svg';
+import stdcmDestination from 'assets/pictures/mapMarkers/destination.svg';
+import stdcmVia from 'assets/pictures/mapMarkers/intermediate-point.svg';
+import stdcmOrigin from 'assets/pictures/mapMarkers/start.svg';
 import originSVG from 'assets/pictures/origin.svg';
-import stdcmDestination from 'assets/pictures/stdcm/destination.svg';
-import stdcmVia from 'assets/pictures/stdcm/intermediate-point.svg';
-import stdcmOrigin from 'assets/pictures/stdcm/start.svg';
 import viaSVG from 'assets/pictures/via.svg';
 import { useOsrdConfSelectors } from 'common/osrdContext';
 import type { PathStep } from 'reducers/osrdconf/types';