changed current position marker to red circle

Signed-off-by: Lucas Nandico <lucas.nandico@fau.de>
amosproj · May 21, 2024 · c4e9108 · c4e9108
1 parent 824da1f
commit c4e9108
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/frontend/src/components/MapView/MapView.tsx b/frontend/src/components/MapView/MapView.tsx
@@ -22,6 +22,19 @@ const DefaultIcon = L.icon({
 
 L.Marker.prototype.options.icon = DefaultIcon;
 
+const svgIcon = L.divIcon({
+  html: `
+    <svg width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="17" cy="17" r="14" stroke="white" stroke-width="2" fill="transparent"/>
+      <circle cx="17" cy="17" r="12" stroke="red" stroke-width="3" fill="transparent"/>
+      <circle cx="17" cy="17" r="9" stroke="white" stroke-width="1" fill="transparent"/>
+    </svg>
+  `,
+  className: "", // Optional: add a custom class name
+  iconSize: [34, 34],
+  iconAnchor: [17, 17], // Adjust the anchor point as needed
+});
+
 const MapView: React.FC = () => {
   const { currentMapCache, setCurrentMapCache } = useContext(MapContext);
   const geoData = useGeoData(currentMapCache.mapBounds, currentMapCache.zoom);
@@ -46,7 +59,7 @@ const MapView: React.FC = () => {
       },
     });
     return (
-      <Marker position={currentMapCache.selectedCoordinates}>
+      <Marker position={currentMapCache.selectedCoordinates} icon={svgIcon}>
         <Popup>
           <span
             // Get the current location of the user