Main page: Select a road

frontend/src/Components/Map/DetectMapClick.tsx

@@ -0,0 +1,22 @@
+import { useMapEvents } from 'react-leaflet';
+import { LatLng } from 'leaflet';
+import { FC } from 'react';
+
+interface Props {
+  /** The callback function */
+  onClick: (latLng: LatLng) => void;
+}
+
+/**
+ * A component that detects a click on the map and calls the callback function
+ */
+const DetectMapClick: FC<Props> = ({ onClick }) => {
+  useMapEvents({
+    click: (e) => {
+      onClick(e.latlng);
+    },
+  });
+  return null;
+};
+
+export default DetectMapClick;

frontend/src/Components/Map/ForceMapUpdate.tsx

@@ -19,6 +19,7 @@ const ForceMapUpdate: React.FC<Props> = ({ triggerUpdate, position }) => {
     map.invalidateSize();
   }, [triggerUpdate]);
 
+  // TODO: not working when moving too little
   useEffect(() => {
     if (position) {
       map.flyTo(position);

frontend/src/Components/Map/Road.tsx

@@ -2,6 +2,7 @@ import { IRoad } from '../../models/path';
 import { LatLng, LatLngLiteral } from 'leaflet';
 import { Polyline } from 'react-leaflet';
 import React, { ReactElement, useEffect } from 'react';
+import L from 'leaflet';
 
 interface Props {
   /** The roads */
@@ -47,11 +48,12 @@ const Road: React.FC<Props> = ({ road, onClick }) => {
         pathOptions={{ weight: 5, opacity: opacity }}
         positions={data}
         eventHandlers={{
-          click: ({ latlng }) => {
-            if (onClick) onClick(latlng);
+          click: (e) => {
+            L.DomEvent.stopPropagation(e); // used to prevent the map to detect the click
+            if (onClick) onClick(e.latlng);
           },
           mouseover: () => {
-            setOpacity(0.8);
+            setOpacity(0.9);
           },
           mouseout: () => {
             setOpacity(0.2);

frontend/src/Components/Map/Roads.tsx

@@ -2,38 +2,45 @@ import React from 'react';
 import { IRoad } from '../../models/path';
 import Road from './Road';
 import { LatLng } from '../../models/models';
-import { useNavigate } from 'react-router-dom';
 
 interface Props {
   /** The roads */
   roads?: IRoad[];
+  /** The selected road index */
+  selectedRoadIdx?: number;
   /** The event handlers, when a road is selected */
-  onSelectedRoad?: (road: IRoad, position: LatLng) => void;
+  onSelectedRoad?: (index: number, road: IRoad, position: LatLng) => void;
 }
 
 /**
  * A components that renders the roads on the map
  */
-const Roads: React.FC<Props> = ({ roads, onSelectedRoad }) => {
-  const navigate = useNavigate();
-
+const Roads: React.FC<Props> = ({ roads, selectedRoadIdx, onSelectedRoad }) => {
   return (
     <>
-      {roads?.map((road) => (
+      {selectedRoadIdx === undefined || selectedRoadIdx === -1 || !roads ? (
+        roads?.map((road, index) => (
+          <Road
+            key={road.way_name}
+            road={road}
+            onClick={(position) => {
+              if (onSelectedRoad) {
+                onSelectedRoad(index, road, position);
+              }
+            }}
+          />
+        ))
+      ) : (
         <Road
-          key={road.way_name}
-          road={road}
+          key={roads[selectedRoadIdx].way_name}
+          road={roads[selectedRoadIdx]}
           onClick={(position) => {
-            console.log(road, position);
-            // TODO: remove when possible to select a road
-            navigate('/road-details');
-
             if (onSelectedRoad) {
-              onSelectedRoad(road, position);
+              onSelectedRoad(selectedRoadIdx, roads[selectedRoadIdx], position);
             }
           }}
         />
-      ))}
+      )}
     </>
   );
 };