"Overlapping Marker Spiderfier for Leaflet"Bibliothek in ein ES Module umwandeln

components/MapComponent.js

@@ -5,6 +5,8 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import "leaflet-contextmenu";
 import * as config from "../config/config.js";
+import { OverlappingMarkerSpiderfier } from "../lib/OverlappingMarkerSpiderfier.js";
+
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
@@ -27,6 +29,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
   const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
   const mapDataIconUrl = config.mapDataIconUrl;
+  const [oms, setOms] = useState(null); // State für OMS-Instanz
 
   // Funktion zum Aktualisieren der Position in der Datenbank
   const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
@@ -682,7 +685,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             popupAnchor: [1, -34],
             shadowSize: [41, 41],
           }),
-        }).addTo(map);
+        });
+        //oms.addMarker(marker); // Marker zum OMS hinzufügen
+        marker.addTo(map);
 
         marker.on("mouseover", function (e) {
           this.openPopup();