setupMarkers in setupPOIs umbenennt und ausgelagert

components/MapComponent.js

@@ -59,7 +59,7 @@ import {
   fetchGisStationsMeasurements,
   fetchGisSystemStatic,
   setupPolylines,
-  setupMarkers,
+  setupPOIs,
   VersionInfoModal,
   useFetchPoiData,
   usePoiTypData,
@@ -318,7 +318,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useEffect(() => {
     if (poiData.length === 0) return;
 
-    setupMarkers(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData);
+    setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData);
   }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);
 
   //---------------------------------------------

components/imports.js

@@ -57,7 +57,8 @@ import useUlafMarkersLayer from "../hooks/useUlafMarkersLayer.js";
 import useSonstigeMarkersLayer from "../hooks/useSonstigeMarkersLayer.js";
 import handlePoiSelect from "../utils/handlePoiSelect.js";
 import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js";
-import { setupPolylines, setupMarkers } from "../utils/mapFeatures.js"; // Import the functions
+import { setupPolylines } from "../utils/mapFeatures.js";
+import { setupPOIs } from "../utils/setupPOIs.js";
 import VersionInfoModal from "./VersionInfoModal.js";
 //--------------------------------------------
 import PoiUpdateModalWrapper from "./pois/PoiUpdateModalWrapper";
@@ -148,7 +149,7 @@ export {
   fetchGisStationsMeasurements,
   fetchGisSystemStatic,
   setupPolylines,
-  setupMarkers,
+  setupPOIs,
   VersionInfoModal,
   PoiUpdateModalWrapper,
   AddPoiModalWindowWrapper,

utils/mapFeatures.js

@@ -36,118 +36,6 @@ export function enablePolylineEvents(polylines, lineColors) {
   });
 }
 
-export const setupMarkers = async (
-  map,
-  locations,
-  poiData,
-  poiTypMap,
-  userRights,
-  poiLayerRef,
-  setSelectedPoi,
-  setLocationDeviceData,
-  setDeviceName,
-  setCurrentPoi,
-  poiLayerVisible,
-  fetchPoiData,
-  toast,
-  setShowPoiUpdateModal,
-  setCurrentPoiData,
-  deviceName
-) => {
-  if (map && poiLayerRef.current) {
-    map.removeLayer(poiLayerRef.current);
-    poiLayerRef.current = new L.LayerGroup().addTo(map);
-
-    for (const location of locations) {
-      try {
-        const { latitude, longitude } = parsePoint(location.position);
-        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
-        const canDrag = userRights ? userRights.includes(56) : false;
-        const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
-        const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";
-
-        const marker = L.marker([latitude, longitude], {
-          icon: L.icon({
-            iconUrl: iconUrl,
-            iconSize: [25, 41],
-            iconAnchor: [12, 41],
-            popupAnchor: [1, -34],
-          }),
-          draggable: canDrag,
-          id: location.idPoi,
-          name: location.name,
-          description: location.description,
-          link: location.link,
-        }).bindContextMenu({
-          contextmenu: true,
-          contextmenuWidth: 140,
-          contextmenuItems: [
-            {
-              text: "POI Bearbeiten",
-              icon: "/img/poi-edit.png",
-              callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
-            },
-          ],
-        });
-
-        marker.bindPopup(`
-          <div>
-            <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
-            ${deviceName}<br>
-            ${poiTypName}<br>
-          </div>
-        `);
-
-        marker.on("mouseover", function () {
-          handlePoiSelect(
-            {
-              id: location.idPoi,
-              deviceId: location.idLD,
-              idPoiTyp: location.idPoiTyp,
-              typ: poiTypName,
-              description: location.description,
-            },
-            setSelectedPoi,
-            setLocationDeviceData,
-            setDeviceName,
-            poiLayerRef,
-            poiTypMap
-          );
-          setCurrentPoi(location);
-          this.openPopup();
-
-          // Deaktiviere Polyline-Ereignisse beim Öffnen des Kontextmenüs des Markers
-          disablePolylineEvents(window.polylines);
-
-          localStorage.setItem("lastElementType", "marker");
-          localStorage.setItem("markerLink", this.options.link);
-        });
-
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-
-        marker.on("dragend", (e) => {
-          if (canDrag) {
-            const newLat = e.target.getLatLng().lat;
-            const newLng = e.target.getLatLng().lng;
-            const markerId = e.target.options.id;
-            updateLocationInDatabase(markerId, newLat, newLng).then(() => {});
-          } else {
-            console.error("Drag operation not allowed");
-          }
-        });
-
-        if (poiLayerVisible) {
-          marker.addTo(poiLayerRef.current);
-        }
-      } catch (error) {
-        console.error("Error processing a location:", error);
-      }
-    }
-  }
-};
-
 export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
   const markers = [];
   const polylines = [];

utils/setupPOIs.js

@@ -0,0 +1,123 @@
+// utils/setupPOIs.js
+import { findClosestPoints } from "./geometryUtils";
+import handlePoiSelect from "./handlePoiSelect";
+import { updateLocationInDatabase } from "../services/apiService";
+import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
+import { parsePoint } from "./geometryUtils";
+import circleIcon from "../components/gisPolylines/icons/CircleIcon";
+import startIcon from "../components/gisPolylines/icons/StartIcon";
+import endIcon from "../components/gisPolylines/icons/EndIcon";
+import { redrawPolyline } from "./mapUtils";
+import { openInNewTab } from "../utils/contextMenuUtils";
+
+export const setupPOIs = async (
+  map,
+  locations,
+  poiData,
+  poiTypMap,
+  userRights,
+  poiLayerRef,
+  setSelectedPoi,
+  setLocationDeviceData,
+  setDeviceName,
+  setCurrentPoi,
+  poiLayerVisible,
+  fetchPoiData,
+  toast,
+  setShowPoiUpdateModal,
+  setCurrentPoiData,
+  deviceName
+) => {
+  if (map && poiLayerRef.current) {
+    map.removeLayer(poiLayerRef.current);
+    poiLayerRef.current = new L.LayerGroup().addTo(map);
+
+    for (const location of locations) {
+      try {
+        const { latitude, longitude } = parsePoint(location.position);
+        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
+        const canDrag = userRights ? userRights.includes(56) : false;
+        const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
+        const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";
+
+        const marker = L.marker([latitude, longitude], {
+          icon: L.icon({
+            iconUrl: iconUrl,
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+          }),
+          draggable: canDrag,
+          id: location.idPoi,
+          name: location.name,
+          description: location.description,
+          link: location.link,
+        }).bindContextMenu({
+          contextmenu: true,
+          contextmenuWidth: 140,
+          contextmenuItems: [
+            {
+              text: "POI Bearbeiten",
+              icon: "/img/poi-edit.png",
+              callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
+            },
+          ],
+        });
+
+        marker.bindPopup(`
+            <div>
+              <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
+              ${deviceName}<br>
+              ${poiTypName}<br>
+            </div>
+          `);
+
+        marker.on("mouseover", function () {
+          handlePoiSelect(
+            {
+              id: location.idPoi,
+              deviceId: location.idLD,
+              idPoiTyp: location.idPoiTyp,
+              typ: poiTypName,
+              description: location.description,
+            },
+            setSelectedPoi,
+            setLocationDeviceData,
+            setDeviceName,
+            poiLayerRef,
+            poiTypMap
+          );
+          setCurrentPoi(location);
+          this.openPopup();
+
+          // Deaktiviere Polyline-Ereignisse beim Öffnen des Kontextmenüs des Markers
+          disablePolylineEvents(window.polylines);
+
+          localStorage.setItem("lastElementType", "marker");
+          localStorage.setItem("markerLink", this.options.link);
+        });
+
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+
+        marker.on("dragend", (e) => {
+          if (canDrag) {
+            const newLat = e.target.getLatLng().lat;
+            const newLng = e.target.getLatLng().lng;
+            const markerId = e.target.options.id;
+            updateLocationInDatabase(markerId, newLat, newLng).then(() => {});
+          } else {
+            console.error("Drag operation not allowed");
+          }
+        });
+
+        if (poiLayerVisible) {
+          marker.addTo(poiLayerRef.current);
+        }
+      } catch (error) {
+        console.error("Error processing a location:", error);
+      }
+    }
+  }
+};