Trip start end markers (fix #674)

1 files changed, 20 insertions, 1 deletions

diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index 5ad51f00..6e79128f 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -20,6 +20,7 @@ import MapView from '../map/core/MapView';
 import MapRoutePath from '../map/MapRoutePath';
 import AddressValue from '../common/components/AddressValue';
 import TableShimmer from '../common/components/TableShimmer';
+import MapMarkers from '../map/MapMarkers';
 
 const columnsArray = [
   ['startTime', 'reportStartTime'],
@@ -51,6 +52,19 @@ const TripReportPage = () => {
   const [selectedItem, setSelectedItem] = useState(null);
   const [route, setRoute] = useState(null);
 
+  const createMarkers = () => ([
+    {
+      latitude: selectedItem.startLat,
+      longitude: selectedItem.startLon,
+      color: 'negative',
+    },
+    {
+      latitude: selectedItem.endLat,
+      longitude: selectedItem.endLon,
+      color: 'positive',
+    },
+  ]);
+
   useEffectAsync(async () => {
     if (selectedItem) {
       const query = new URLSearchParams({
@@ -126,7 +140,12 @@ const TripReportPage = () => {
         {selectedItem && (
           <div className={classes.containerMap}>
             <MapView>
-              {route && <MapRoutePath positions={route} />}
+              {route && (
+                <>
+                  <MapRoutePath positions={route} />
+                  <MapMarkers markers={createMarkers()} />
+                </>
+              )}
             </MapView>
           </div>
         )}