2 files changed, 78 insertions, 1 deletions
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index 5e09bc9c..704c24bd 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -35,7 +35,7 @@ const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => {
   const onMouseLeave = () => map.getCanvas().style.cursor = '';
 
   const onMapClick = useCallback((event) => {
-    if (!event.defaultPrevented) {
+    if (!event.defaultPrevented && onClick) {
       onClick();
     }
   }, [onClick]);
diff --git a/modern/src/map/MapRoutePoints.js b/modern/src/map/MapRoutePoints.js
new file mode 100644
index 00000000..38a0e226
--- /dev/null
+++ b/modern/src/map/MapRoutePoints.js
@@ -0,0 +1,77 @@
+import { useId, useCallback, useEffect } from 'react';
+import { useTheme } from '@mui/styles';
+import { map } from './core/MapView';
+
+const MapPositions = ({ positions, onClick }) => {
+  const id = useId();
+
+  const theme = useTheme();
+
+  const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
+  const onMouseLeave = () => map.getCanvas().style.cursor = '';
+
+  const onMarkerClick = useCallback((event) => {
+    event.preventDefault();
+    const feature = event.features[0];
+    if (onClick) {
+      onClick(feature.properties.id, feature.properties.index);
+    }
+  }, [onClick]);
+
+  useEffect(() => {
+    map.addSource(id, {
+      type: 'geojson',
+      data: {
+        type: 'FeatureCollection',
+        features: [],
+      },
+    });
+    map.addLayer({
+      id,
+      type: 'circle',
+      source: id,
+      paint: {
+        'circle-radius': 5,
+        'circle-color': theme.palette.colors.geometry,
+      },
+    });
+
+    map.on('mouseenter', id, onMouseEnter);
+    map.on('mouseleave', id, onMouseLeave);
+    map.on('click', id, onMarkerClick);
+
+    return () => {
+      map.off('mouseenter', id, onMouseEnter);
+      map.off('mouseleave', id, onMouseLeave);
+      map.off('click', id, onMarkerClick);
+
+      if (map.getLayer(id)) {
+        map.removeLayer(id);
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+    };
+  }, [onMarkerClick]);
+
+  useEffect(() => {
+    map.getSource(id).setData({
+      type: 'FeatureCollection',
+      features: positions.map((position, index) => ({
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [position.longitude, position.latitude],
+        },
+        properties: {
+          index,
+          id: position.id,
+        },
+      })),
+    });
+  }, [positions]);
+
+  return null;
+};
+
+export default MapPositions;