Merge branch 'develop'

components/MapComponent.js

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState, useCallback } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
+
 import "leaflet-contextmenu";
 import * as config from "../config/config.js";
 import "leaflet.smooth_marker_bouncing";
@@ -43,13 +44,7 @@ import useLineData from "../hooks/useLineData.js";
 import { useMapComponentState } from "../hooks/useMapComponentState";
 import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
 import { updateLocation } from "../utils/updateBereichUtil";
-import { usePolylineTooltipLayer } from "../hooks/usePolylineTooltipLayer";
-import { useFetchLineStatusData } from "../hooks/useFetchLineStatusData";
-import { useFetchPriorityConfig } from "../hooks/useFetchPriorityConfig";
-import { useUpdateGmaData } from "../hooks/useUpdateGmaData";
-import { useDynamicMarkerLayers } from "../hooks/useDynamicMarkerLayers";
-import { useFetchUserRights } from "../hooks/useFetchUserRights";
-import { useFetchWebServiceMap } from "../hooks/useFetchWebServiceMap";
+import { initGeocoderFeature } from "../components/features/GeocoderFeature";
 //--------------------------------------------
 import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
 import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
@@ -522,24 +517,100 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   useUpdateGmaData(map, setGisStationsMeasurements, mapGisStationsMeasurementsUrl, gmaMarkers, layers, oms);
 
   //---------------------------------
-  useDynamicMarkerLayers(map, gisSystemStaticLoaded, GisSystemStatic, priorityConfig, {
-    setGmaMarkers,
-    setTalasMarkers,
-    setEciMarkers,
-    setGsmModemMarkers,
-    setCiscoRouterMarkers,
-    setWagoMarkers,
-    setSiemensMarkers,
-    setOtdrMarkers,
-    setWdmMarkers,
-    setMessstellenMarkers,
-    setTalasiclMarkers,
-    setDauzMarkers,
-    setSmsfunkmodemMarkers,
-    setUlafMarkers,
-    setSonstigeMarkers,
-    setTkComponentsMarkers,
-  });
+
+  const gmaLayerRef = useRef(null);
+  const talasLayerRef = useRef(null);
+  const eciMarkersLayerRef = useRef(null);
+  const gsmModemMarkersLayerRef = useRef(null);
+  const ciscoRouterMarkersLayerRef = useRef(null);
+  const wagoMarkersLayerRef = useRef(null);
+  const siemensMarkersLayerRef = useRef(null);
+  const otdrMarkersLayerRef = useRef(null);
+  const wdmMarkersLayerRef = useRef(null);
+  const messstellenMarkersLayerRef = useRef(null);
+  const talasiclMarkersLayerRef = useRef(null);
+  const dauzMarkersLayerRef = useRef(null);
+  const smsfunkmodemMarkersLayerRef = useRef(null);
+  const ulafMarkersLayerRef = useRef(null);
+  const sonstigeMarkersLayerRef = useRef(null);
+  const tkComponentsMarkersRef = useRef(null);
+  useEffect(() => {
+    if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind
+
+    const layerGroups = [
+      { ref: gmaLayerRef, id: 11, setState: setGmaMarkers },
+      { ref: talasLayerRef, id: 1, setState: setTalasMarkers },
+      { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers },
+      { ref: gsmModemMarkersLayerRef, id: 5, setState: setGsmModemMarkers },
+      { ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers },
+      { ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers },
+      { ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers },
+      { ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers },
+      { ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers },
+      { ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers },
+      { ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers },
+      { ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers },
+      { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers },
+      { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers },
+      { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers },
+      { ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers },
+    ];
+
+    // Initialisiere LayerGroups nur einmal
+    layerGroups.forEach(({ ref }) => {
+      if (!ref.current) {
+        ref.current = new L.LayerGroup().addTo(map);
+      }
+    });
+    //--------------------------------------------
+
+    //--------------------------------------------
+
+    const updateMarkers = ({ ref, id, setState }) => {
+      if (ref.current) {
+        ref.current.clearLayers(); // Entferne alte Marker
+      }
+
+      // Erstelle und füge neue Marker hinzu
+      createAndSetDevices(
+        id,
+        (newMarkers) => {
+          setState(newMarkers); // Zustand aktualisieren
+          newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen
+
+          // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu
+          checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
+        },
+        GisSystemStatic,
+        priorityConfig
+      );
+    };
+
+    // Aktualisiere alle Marker-Gruppen
+    const updateAllMarkers = () => {
+      layerGroups.forEach(updateMarkers);
+    };
+
+    // Initiales Update
+    updateAllMarkers();
+
+    // Setze ein Intervall für regelmäßige Updates
+    /*     const intervalId = setInterval(() => {
+      updateAllMarkers();
+    }, 60000); // 20 Sekunden
+
+    // Aufräumen bei Komponentenentladung
+    return () => {
+      clearInterval(intervalId); // Entferne Intervall
+
+      // LayerGroups leeren
+      layerGroups.forEach(({ ref }) => {
+        if (ref.current) {
+          ref.current.clearLayers();
+        }
+      });
+    }; */
+  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);
 
   //---------------------------------------
   // Initialisiere Leaflet-Karte
@@ -601,6 +672,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   }, [map, allMarkers]);
 
   //---------------------------------------
+  useEffect(() => {
+    if (map) {
+      initGeocoderFeature(map); // Geocoder-Feature initialisieren
+    }
+  }, [map]);
+  //--------------------------------------------
 
   return (
     <>

components/features/GeocoderFeature.js

@@ -0,0 +1,49 @@
+// components/features/GeocoderFeature.js
+export function initGeocoderFeature(map) {
+  // Feature Toggle
+  const isGeocoderEnabled = process.env.NEXT_PUBLIC_ENABLE_GEOCODER === "true";
+
+  if (!isGeocoderEnabled) return; // Falls deaktiviert, nichts ausführen
+
+  // Benutzerdefiniertes Icon erstellen
+  const customIcon = L.icon({
+    iconUrl: "/img/marker-icon.png",
+    iconSize: [32, 32],
+    iconAnchor: [16, 32],
+    popupAnchor: [0, -32],
+  });
+
+  // Geocoder hinzufügen
+  const geocoder = L.Control.geocoder({
+    position: "topleft",
+    defaultMarkGeocode: false,
+    errorMessage: "", // Keine Fehlermeldung anzeigen
+    geocoder: new L.Control.Geocoder.Nominatim({
+      serviceUrl: "https://nominatim.openstreetmap.org/",
+      geocodingQueryParams: {
+        "accept-language": "de",
+        countrycodes: "DE",
+      },
+    }),
+  })
+    .on("markgeocode", function (e) {
+      const latlng = e.geocode.center;
+      map.setView(latlng, 15);
+      L.marker(latlng, { icon: customIcon }).addTo(map).bindPopup(e.geocode.name).openPopup();
+    })
+    .addTo(map);
+
+  // Styling mit Tailwind CSS
+  setTimeout(() => {
+    const geocoderContainer = document.querySelector(".leaflet-control-geocoder");
+    if (geocoderContainer) {
+      geocoderContainer.classList.add("shadow-md", "border", "border-gray-300", "rounded-full", "bg-white", "p-2", "w-96");
+
+      const geocoderInput = geocoderContainer.querySelector("input");
+      if (geocoderInput) {
+        geocoderInput.classList.add("border-none", "outline-none", "w-full", "text-sm", "text-gray-700", "pl-3");
+        geocoderInput.placeholder = "Ort oder Adresse suchen...";
+      }
+    }
+  }, 100);
+}