diff --git a/components/MapComponent.js b/components/MapComponent.js
index 803b72d1c..016d69829 100644
--- a/components/MapComponent.js
+++ b/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]);
//---------------------------------------------
diff --git a/components/imports.js b/components/imports.js
index eb0fd565b..1f5b3ddc4 100644
--- a/components/imports.js
+++ b/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,
diff --git a/utils/mapFeatures.js b/utils/mapFeatures.js
index a92d1d1ee..67c822e36 100644
--- a/utils/mapFeatures.js
+++ b/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(`
-
- ${location.description || "Unbekannt"}
- ${deviceName}
- ${poiTypName}
-
- `);
-
- 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 = [];
diff --git a/utils/setupPOIs.js b/utils/setupPOIs.js
new file mode 100644
index 000000000..3276e6730
--- /dev/null
+++ b/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(`
+
+ ${location.description || "Unbekannt"}
+ ${deviceName}
+ ${poiTypName}
+
+ `);
+
+ 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);
+ }
+ }
+ }
+};