front: add start and destination icons in the scenario map

Signed-off-by: theocrsb <[email protected]>
OpenRailAssociation · Oct 30, 2024 · b535c1c · b535c1c
1 parent 0cce373
commit b535c1c
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 7 deletions.
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmDestination.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmDestination.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import DestinationIcon from 'assets/pictures/stdcm/destination.svg';
+import DestinationIcon from 'assets/pictures/mapMarkers/destination.svg';
 import { useOsrdConfActions } from 'common/osrdContext';
 import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
 import type { PathStep } from 'reducers/osrdconf/types';

diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmOrigin.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmOrigin.tsx
@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import OriginIcon from 'assets/pictures/stdcm/start.svg';
+import OriginIcon from 'assets/pictures/mapMarkers/start.svg';
 import { useOsrdConfActions } from 'common/osrdContext';
 import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
 import type { PathStep } from 'reducers/osrdconf/types';

diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmVias.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmVias.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import nextId from 'react-id-generator';
 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 { PathStep } from 'reducers/osrdconf/types';

diff --git a/...src/assets/pictures/stdcm/destination.svg → ...ssets/pictures/mapMarkers/destination.svg b/...src/assets/pictures/stdcm/destination.svg → ...ssets/pictures/mapMarkers/destination.svg
diff --git a/...ets/pictures/stdcm/intermediate-point.svg → ...ictures/mapMarkers/intermediate-point.svg b/...ets/pictures/stdcm/intermediate-point.svg → ...ictures/mapMarkers/intermediate-point.svg
diff --git a/front/src/assets/pictures/stdcm/start.svg → .../src/assets/pictures/mapMarkers/start.svg b/front/src/assets/pictures/stdcm/start.svg → .../src/assets/pictures/mapMarkers/start.svg
diff --git a/front/src/modules/simulationResult/components/SimulationResultsMap/RenderItinerary.tsx b/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 {
@@ -21,8 +23,15 @@ export default function RenderItinerary(props: RenderItineraryProps) {
     'line-color': '#158DCF',
   };
 
+  const startCoordinate = geojsonPath.geometry.coordinates[0];
+  const endCoordinate =
+    geojsonPath.geometry.coordinates[geojsonPath.geometry.coordinates.length - 1];
+
   return (
     <Source type="geojson" data={geojsonPath}>
+      <Marker longitude={startCoordinate[0]} latitude={startCoordinate[1]} anchor="bottom">
+        <img src={originIcon} alt="origin" />
+      </Marker>
       <OrderedLayer
         id="geojsonPathBackgroundLine"
         type="line"
@@ -31,6 +40,9 @@ export default function RenderItinerary(props: RenderItineraryProps) {
         layerOrder={layerOrder}
       />
       <OrderedLayer id="geojsonPathLine" type="line" paint={paintLine} layerOrder={layerOrder} />
+      <Marker longitude={endCoordinate[0]} latitude={endCoordinate[1]} anchor="bottom">
+        <img src={destinationIcon} alt="destination" />
+      </Marker>
     </Source>
   );
 }
diff --git a/.../trainschedule/components/ManageTrainSchedule/ManageTrainScheduleMap/ItineraryMarkers.tsx b/.../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';