-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Littwin Systemtechnik GmbH & Co. KG
-Bürgermeister-Brötje Str. 28
D-26180 Rastede
T: +49 4402 9725 77-0
E: kontakt@littwin-systemtechnik.de
- TALAS.MAP Version 0.5.5
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ ${status.Me} (${status.Na})
+
+ `
+ )
+ .join("");
+
+ marker.bindPopup(`
+
+
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
+ `);
+ return marker;
+ });
+
+ setMarkersFunction(markersData);
+ }
+ } catch (error) {
+ console.error("Error fetching data: ", error);
+ }
+ };
+ //--------------------------------------------------------------------------------
+
+ const mapLayersVisibility = useRecoilValue(mapLayersState);
+ /*
+ const handleCheckboxChange = (name, event) => {
+ const { checked } = event.target;
+ const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
+
+ setMapLayersVisibility((prev) => {
+ return {
+ ...prev,
+ [internalName]: checked,
+ };
+ });
+ }; */
+
+ //------------------------------------------
+ //------------------------------------------ */
+ const selectedArea = useRecoilValue(selectedAreaState);
+
+ // Combine all markers into a single array
+ const allMarkers = [
+ ...talasMarkers,
+ ...eciMarkers,
+ ...gsmModemMarkers,
+ ...ciscoRouterMarkers,
+ ...wagoMarkers,
+ ...siemensMarkers,
+ ...otdrMarkers,
+ ...wdmMarkers,
+ ...gmaMarkers,
+ ...messstellenMarkers,
+ ...talasiclMarkers,
+ ...dauzMarkers,
+ ...smsfunkmodemMarkers,
+ ...sonstigeMarkers,
+ ...ulafMarkers,
+ ];
+
+ // Function to find a marker by areaName across all groups
+ const findMyMarker = (areaName) => {
+ return allMarkers.find((marker) => marker.options.areaName === areaName);
+ };
+ //--------------------------------------------------------------
+ //---------------------------------------------------------
+ // Now update checkOverlappingMarkers to check if oms is initialized
+ function checkOverlappingMarkers(map, markers, plusIcon) {
+ // Ensure markers is always an array
+ if (!Array.isArray(markers)) {
+ //console.error("The `markers` argument is not an array:", markers);
+ return;
+ }
+
+ const overlappingGroups = {};
+
+ // Group markers by coordinates as strings
+ markers.forEach((marker) => {
+ const latlngStr = marker.getLatLng().toString();
+ if (overlappingGroups[latlngStr]) {
+ overlappingGroups[latlngStr].push(marker);
+ } else {
+ overlappingGroups[latlngStr] = [marker];
+ }
+ });
+
+ // Add plus markers at coordinates where overlaps occur
+ for (const coords in overlappingGroups) {
+ if (overlappingGroups[coords].length > 1) {
+ const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
+ const plusMarker = L.marker(latLng, { icon: plusIcon });
+ plusMarker.addTo(map);
+
+ //console.log("Adding plus icon marker at", latLng);
+ }
+ }
+ }
+ //---------------------------------------------------------
+ const handleMarkerClick = (markerData) => {
+ // Setze die aktuellen Daten im State, um sie im Formular vorzubelegen
+ setCurrentMarkerData(markerData);
+ setShowEditModal(true);
+ };
+ // In der Marker-Erstellungsfunktion
+//---------------------------------------------------------
+useEffect(() => {
+ console.log("useEffect current Data:", currentPoiData);
+}, [currentPoiData]);
+//---------------------------------------------------------
+ //------------------------------------------
+ // API-Daten laden für GisStationsStaticDistrict
+ //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(mapGisStationsStaticDistrictUrl);
+ const jsonResponse = await response.json();
+
+ // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+ if (jsonResponse && jsonResponse.Points) {
+ setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
+ } else {
+ console.error(
+ 'Erwartete Daten im "Points"-Array nicht gefunden',
+ jsonResponse
+ );
+ setGisStationsStaticDistrict([]);
+ }
+ } catch (error) {
+ console.error("Fehler beim Laden der Daten 1: ", error);
+ setGisStationsStaticDistrict([]);
+ }
+ };
+
+ fetchData();
+ }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+
+ //GisStationsStaticDistrict Daten laden
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(mapGisStationsStaticDistrictUrl);
+ const jsonResponse = await response.json();
+
+ // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+ if (jsonResponse && jsonResponse.Points) {
+ setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
+ } else {
+ console.error(
+ 'Erwartete Daten im "Points"-Array nicht gefunden',
+ jsonResponse
+ );
+ setGisStationsStaticDistrict([]);
+ }
+ } catch (error) {
+ console.error("Fehler beim Laden der Daten 1: ", error);
+ setGisStationsStaticDistrict([]);
+ }
+ };
+
+ fetchData();
+ }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+ //------------------------------------------
+ //GisStationsStatusDistrict Daten laden
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(mapGisStationsStatusDistrictUrl);
+ const jsonResponse = await response.json();
+
+ // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+ if (jsonResponse && jsonResponse.Statis) {
+ setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
+ } else {
+ console.error(
+ 'Erwartete Daten im "Statis"-Array nicht gefunden',
+ jsonResponse
+ );
+ setGisStationsStatusDistrict([]);
+ }
+ } catch (error) {
+ console.error("Fehler beim Laden der Daten 2: ", error);
+ setGisStationsStatusDistrict([]);
+ }
+ };
+
+ fetchData();
+ }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+ //------------------------------------------
+ //GisStationsMeasurements Daten laden
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(mapGisStationsMeasurementsUrl);
+ const jsonResponse = await response.json();
+
+ // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
+ if (jsonResponse && jsonResponse.Statis) {
+ setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
+ } else {
+ console.error(
+ 'Erwartete Daten im "Statis"-Array nicht gefunden',
+
+ jsonResponse
+ );
+ setGisStationsMeasurements([]);
+ }
+ } catch (error) {
+ console.error("Fehler beim Laden der Daten 3: ", error);
+ setGisStationsMeasurements([]);
+ }
+ };
+
+ fetchData();
+ }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
+ //------------------------------------------
+
+ //GisSystemStatic Daten laden
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ const response = await fetch(mapGisSystemStaticUrl);
+ const jsonResponse = await response.json();
+
+ if (jsonResponse && jsonResponse.Systems) {
+ setGisSystemStatic(jsonResponse.Systems);
+ setGisSystemStaticLoaded(true); // Setze den Zustand auf geladen
+ } else {
+ console.error(
+ 'Erwartete Daten im "Systems"-Array nicht gefunden',
+ jsonResponse
+ );
+ setGisSystemStatic([]);
+ }
+ } catch (error) {
+ console.error("Fehler beim Laden der Daten 4: ", error);
+ setGisSystemStatic([]);
+ }
+ };
+
+ fetchData();
+ }, []);
+ //------------------------------------------
+
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ //console.log("Window height from config:", config.windowHeight);
+ }
+ }, []);
+
+ // Initialisierung der karte und hinzuügen der Layers
+ useEffect(() => {
+ if (mapRef.current && !map) {
+ initMap = L.map(mapRef.current, {
+ center: [53.111111, 8.4625],
+ zoom: 8,
+ layers: [
+ TALAS,
+ ECI,
+ ULAF,
+ GSMModem,
+ CiscoRouter,
+ WAGO,
+ Siemens,
+ OTDR,
+ WDM,
+ GMA,
+ Sonstige,
+ TALASICL,
+ ],
+ minZoom: 5, // Minimale Zoomstufe
+ maxZoom: 15, // Maximale Zoomstufe
+ zoomControl: false,
+ contextmenu: true,
+ contextmenuItems: contextMenuItems,
+ });
+
+ L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
+ attribution:
+ '© OpenStreetMap contributors',
+ }).addTo(initMap);
+
+ const overlappingMarkerSpiderfier =
+ new window.OverlappingMarkerSpiderfier(initMap, {
+ nearbyDistance: 20,
+ });
+
+ setMap(initMap);
+ setOms(overlappingMarkerSpiderfier);
+
+ initMap.on("zoomend", function () {
+ // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
+ if (initMap.getZoom() > 15) {
+ initMap.setZoom(15);
+ } else if (initMap.getZoom() < 5) {
+ initMap.setZoom(5);
+ }
+ });
+
+ // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
+ initMap.whenReady(() => {
+ console.log("Karte ist jetzt bereit und initialisiert.");
+ // Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
+ });
+ }
+ //console.log("trigger in MapComponent.js:", poiReadTrigger);
+ }, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig
+
+ // poiTyp Daten hinzufügen
+ //------------------------------------------
+ // Funktion zum Abrufen der poiTyp Daten
+
+ useEffect(() => {
+ const fetchPoiTypData = async () => {
+ try {
+ const response = await fetch("/api/readPoiTyp");
+ const data = await response.json();
+ setPoiTypData(data); // Daten im Recoil State speichern
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiTyp Daten:", error);
+ }
+ };
+ /* console.log(
+ "trigger in MapComponent.js in fetchPoiTypData:",
+ poiReadTrigger
+ ); */
+ fetchPoiTypData();
+ }, []);
+
+ // Effekt zum Loggen der poiTypData, wenn sie sich ändern
+ useEffect(() => {
+ //console.log("poiTypData aktualisiert:", poiTypData);
+ }, [poiTypData]);
+
+ //---------------------------------------
+
+ // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
+ useEffect(() => {
+ const fetchPoiTypData = async () => {
+ try {
+ const response = await fetch("/api/readPoiTyp");
+ const data = await response.json();
+ const map = new Map();
+ data.forEach((item) => map.set(item.idPoiTyp, item.name));
+ setPoiTypMap(map);
+ setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen
+ //console.log("poiTypMap:", map);
+ const poiTypName = poiTypMap.get(0) || "Unbekannt";
+ //console.log("poiTypName:", poiTypName);
+ } catch (error) {
+ console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
+ }
+ };
+
+ fetchPoiTypData();
+ }, []);
+ //------------------------------------------
+ let dbLayer = null;
+ useEffect(() => {
+ if (map) {
+ // Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist
+ dbLayer = new L.LayerGroup().addTo(map);
+
+ // Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist
+
+ return () => {
+ // Bereinigung, entfernt dbLayer, wenn die Komponente unmountet
+ dbLayer.remove();
+ };
+ }
+ }, [map]);
+
+ //------------------------------------------
+
+ useEffect(() => {
+ // Initialisierung der dbLayer, wenn die Karte verfügbar ist
+ if (map && !poiLayerRef.current) {
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+ }
+
+ return () => {
+ if (map && poiLayerRef.current) {
+ // Entfernen der dbLayer bei Unmount
+ map.removeLayer(poiLayerRef.current);
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+ }
+ locations.forEach((location) => {
+ // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
+ });
+ };
+ console.log("trigger in MapComponent.js:", poiReadTrigger);
+ }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
+ //------------------------------------------
+ function editPoi(marker) {
+ // Zugriff auf die Markerdaten
+ const markerId = marker.options.id;
+ console.log("Bearbeiten des POI mit ID:", markerId);
+
+ // Hier könnte ein Modal mit Formular geöffnet werden
+ // Beispiel: openEditModal(markerId);
+ }
+
+ //------------------------------------------
+ // poiLayerRef(poiDbLayer) POI hinzufügen
+ //--------------------------------------------
+
+ useEffect(() => {
+ if (map && poiLayerRef.current && isPoiTypLoaded) {
+ // Entfernen Sie die bestehende Ebene und erstellen Sie eine neue
+ map.removeLayer(poiLayerRef.current);
+ poiLayerRef.current = new L.LayerGroup().addTo(map);
+
+ // Fügen Sie die aktualisierten Marker hinzu
+ locations.forEach((location) => {
+ const { latitude, longitude } = parsePoint(location.position);
+ const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
+ console.log("poiTypName in poiLayer:", poiTypName);
+ //console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
+ console.log("location.idPoiTyp poiLayer:", location);
+ console.log("location.idPoiTyp:", location.idPoiTyp);
+
+ const marker = L.marker([latitude, longitude], {
+ icon: L.icon({
+ iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ }),
+ draggable: true,
+ id: location.idPoi,
+ }).bindContextMenu({
+ contextmenu: true,
+ contextmenuWidth: 140,
+ contextmenuItems: [
+ {
+ text: "POI Bearbeiten", //git stash save "POI Bearbeiten"
+
+ icon: "/img/poi-edit.png",
+ callback: () => handleEditPoi(marker),
+ },
+ ],
+ });
+ console.log("location.idPoi:", location);
+
+ // Popup konfigurieren
+ marker.bindPopup(`
+ ${station.LD_Name}
+ ${station.Device}+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name}) +
${statusInfo}
+
+ ${location.description || "Unbekannt"}
+ ${poiTypName}
+
+ `);
+
+ const poiData = {
+ id: location.idPoi,
+ deviceId: location.idLD,
+ typ: poiTypName,
+ description: location.description,
+ };
+
+ // Event-Handler hinzufügen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ //Informationen in der Konsole anzeigen
+ //console.log("poiLayer Marker ID:", location.idPoi);
+ //console.log("poiLayer Marker Typ:", poiTypName);
+ //console.log("poiLayer Marker Beschreibung:", location.description);
+ //Informationen an handlePoiSelect übergeben
+ handlePoiSelect(poiData);
+
+ setCurrentPoi(location);
+ console.log("POI-Daten currentPoi:", currentPoi);
+ //console.log("poiData in MapComponent.js:", poiData);
+
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+
+ marker.on("dragend", (e) => {
+ const newLat = e.target.getLatLng().lat;
+ const newLng = e.target.getLatLng().lng;
+ const markerId = e.target.options.id;
+ updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+ onLocationUpdate(markerId, newLat, newLng);
+ console.log("trigger in MapComponent.js:", poiReadTrigger);
+ });
+ });
+
+ marker.addTo(poiLayerRef.current);
+ });
+ }
+ }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
+
+ useEffect(() => {
+ if (gisSystemStaticLoaded && map) {
+ createAndSetMarkers(1, setTalasMarkers); // TALAS-System
+ createAndSetMarkers(2, setEciMarkers); // ECI-System
+ createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
+ createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
+ createAndSetMarkers(7, setWagoMarkers); // WAGO-System
+ createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
+ createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
+ createAndSetMarkers(10, setWdmMarkers); // WDM-System
+ createAndSetMarkers(11, setGmaMarkers); // GMA-System
+ createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
+ createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
+ createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
+ createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
+ createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
+ createAndSetMarkers(0, setUlafMarkers); // ULAF-System
+ }
+ }, [gisSystemStaticLoaded, map]);
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && talasMarkers.length) {
+ talasMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(TALAS);
+ //console.log("map", map);
+ //console.log("oms", oms);
+ //disable map contextmenu
+ map.options.contextmenu = false;
+ map.options.contextmenuItems = [];
+
+ oms.map.options.contextmenu = false;
+ oms.map.options.contextmenuItems = [];
+
+ // Call the function here
+ checkOverlappingMarkers(oms, map, plusRoundIcon);
+ }
+ }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && eciMarkers.length) {
+ eciMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(ECI);
+ }
+ }, [map, eciMarkers]);
+
+ //console.log("eciMarkers", eciMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && gsmModemMarkers.length) {
+ gsmModemMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(GSMModem);
+ }
+ }, [map, gsmModemMarkers]);
+
+ //console.log("gsmModemMarkers", gsmModemMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && ciscoRouterMarkers.length) {
+ ciscoRouterMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(CiscoRouter);
+ }
+ }, [map, ciscoRouterMarkers]);
+
+ //console.log("ciscoRouterMarkers", ciscoRouterMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && wagoMarkers.length) {
+ wagoMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(WAGO);
+
+ //toggleLayer(mapLayersVisibility.WAGO);
+ }
+ // }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
+ }, [map, wagoMarkers]);
+ //console.log("wagoMarkers", wagoMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && siemensMarkers.length) {
+ siemensMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(Siemens);
+ }
+ }, [map, siemensMarkers]);
+
+ //console.log("siemensMarkers", siemensMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && otdrMarkers.length) {
+ otdrMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(OTDR);
+ }
+ }, [map, otdrMarkers]);
+
+ //console.log("otdrMarkers", otdrMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && wdmMarkers.length) {
+ wdmMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(WDM);
+ }
+ }, [map, wdmMarkers]);
+
+ //console.log("wdmMarkers", wdmMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && gmaMarkers.length) {
+ // Filtern des Arrays um nur "GMA" Messungen zu erhalten
+ const gmaMeasurements = GisStationsMeasurements.filter(
+ (m) => m.Gr === "GMA"
+ );
+ let area_name = "";
+ let measurements = {};
+
+ gmaMeasurements.forEach((m) => {
+ //console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`);
+ area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array
+ measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
+ });
+
+ // Zugriff auf die Werte über die Codes
+ let measurementLT = measurements["LT"];
+ let measurementFTP = measurements["FTP"];
+ let measurementGT = measurements["GT"];
+ let measurementRLF = measurements["RLF"];
+
+ /* console.log(
+ "area_name",
+ area_name,
+ "------measurementLT",
+ measurements.LT,
+ "-------measurementFBT",
+ measurements.FBT,
+ "------measurementGT",
+ measurements.GT,
+ "------measurementRLF",
+ measurements.RLF
+ );
+ console.log("measurements", measurements); */
+ gmaMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Tooltip beim Überfahren mit der Maus anzeigen
+ marker.bindTooltip(
+ `
+ + ${poiTypName}
+
+
+ `,
+ {
+ permanent: true, // Tooltip wird ständig angezeigt
+ direction: "auto", // Automatische Ausrichtung
+ offset: [20, 0], // Offset-Werte
+ }
+ );
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(GMA);
+ }
+ }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken
+
+ //console.log("gmaMarkers", gmaMarkers);
+
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && messstellenMarkers.length) {
+ messstellenMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(GMA);
+ }
+ }, [map, messstellenMarkers]);
+
+ //console.log("messstellenMarkers", messstellenMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && talasiclMarkers.length) {
+ talasiclMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ map.addLayer(TALASICL);
+ }
+ }, [map, talasiclMarkers]);
+
+ //console.log("talasiclMarkers", talasiclMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && dauzMarkers.length) {
+ dauzMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [map, dauzMarkers]);
+
+ //console.log("dauzMarkers", dauzMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && smsfunkmodemMarkers.length) {
+ smsfunkmodemMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [map, smsfunkmodemMarkers]);
+
+ //console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && ulafMarkers.length) {
+ ulafMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [map, ulafMarkers]);
+
+ //console.log("ulafMarkers", ulafMarkers);
+ //-------------------------------------------
+ //--------------------------------------------------------------------------------
+ useEffect(() => {
+ if (map && sonstigeMarkers.length) {
+ sonstigeMarkers.forEach((marker) => {
+ marker.addTo(map);
+ oms.addMarker(marker);
+
+ // Popup beim Überfahren mit der Maus öffnen und schließen
+ marker.on("mouseover", function () {
+ this.openPopup();
+ });
+ marker.on("mouseout", function () {
+ this.closePopup();
+ });
+ addContextMenuToMarker(marker);
+ });
+ }
+ }, [map, sonstigeMarkers]);
+
+ //console.log("sonstige", sonstigeMarkers);
+ //-------------------------------------------
+
+ // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS
+
+ useEffect(() => {
+ if (!map || !talasMarkers) return;
+
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+
+ // Apply visibility state to the TALAS layer
+ toggleLayer(mapLayersVisibility.TALAS);
+ }, [map, talasMarkers, mapLayersVisibility.TALAS]);
+
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI
+
+ useEffect(() => {
+ if (!map || !eciMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility state to the ECI layer
+ toggleLayer(mapLayersVisibility.ECI);
+ }, [map, eciMarkers, mapLayersVisibility.ECI]);
+
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF
+
+ useEffect(() => {
+ if (!map || !ulafMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.ULAF);
+ }, [map, ulafMarkers, mapLayersVisibility.ULAF]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem
+
+ useEffect(() => {
+ if (!map || !gsmModemMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.GSMModem);
+ }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);
+
+ //------------------------------------------ */
+
+ // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter
+
+ useEffect(() => {
+ if (!map || !ciscoRouterMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ ciscoRouterMarkers.forEach((marker) => marker.addTo(map));
+ } else {
+ ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker));
+ }
+ };
+ // Nutzt die Map, um den internen Namen zu bekommen
+ const internalName = layerNames["Cisco Router"] || "CiscoRouter";
+ toggleLayer(mapLayersVisibility[internalName]);
+ //console.log("internalName Cisco Router: ", internalName);
+ }, [map, ciscoRouterMarkers, mapLayersVisibility]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO
+
+ useEffect(() => {
+ if (!map || !wagoMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.WAGO);
+ }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens
+
+ useEffect(() => {
+ if (!map || !siemensMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.Siemens);
+ }, [map, siemensMarkers, mapLayersVisibility.Siemens]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR
+
+ useEffect(() => {
+ if (!map || !otdrMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.OTDR);
+ }, [map, otdrMarkers, mapLayersVisibility.OTDR]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM
+
+ useEffect(() => {
+ if (!map || !wdmMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.WDM);
+ }, [map, wdmMarkers, mapLayersVisibility.WDM]);
+
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA
+
+ useEffect(() => {
+ if (!map || !gmaMarkers) return;
+
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.GMA);
+ }, [map, gmaMarkers, mapLayersVisibility.GMA]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige
+
+ useEffect(() => {
+ if (!map || !sonstigeMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.Sonstige);
+ }, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL
+
+ useEffect(() => {
+ if (!map || !talasiclMarkers) return;
+ //console.log("talasiclMarkers", talasiclMarkers);
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+
+ // Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden
+ const internalName =
+ layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers ";
+ toggleLayer(mapLayersVisibility[internalName]);
+ //console.log("internalName for TALAS ICL in MapComponent: ", internalName);
+ }, [map, talasiclMarkers, mapLayersVisibility]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ
+
+ useEffect(() => {
+ if (!map || !dauzMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.DAUZ);
+ }, [map, dauzMarkers, mapLayersVisibility.DAUZ]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem
+
+ useEffect(() => {
+ if (!map || !smsfunkmodemMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.SMSFunkmodem);
+ }, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);
+
+ //------------------------------------------ */
+ //------------------------------------------ */
+ // Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen
+
+ useEffect(() => {
+ if (!map || !messstellenMarkers) return;
+ const toggleLayer = (isVisible) => {
+ if (isVisible) {
+ messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+ } else {
+ messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
+ }
+ };
+ // Apply visibility
+ toggleLayer(mapLayersVisibility.Messstellen);
+ }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
+
+ //------------------------------------------ */
+
+ // Effect to handle navigation to selected area
+ useEffect(() => {
+ if (selectedArea && map) {
+ const marker = findMyMarker(selectedArea);
+ if (marker) {
+ map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
+ }
+ }
+ }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
+
+ //------------------------------------------
+
+ useEffect(() => {
+ if (map) {
+ var x = 51.41321407879154;
+ var y = 7.739617925303934;
+ var zoom = 7;
+
+ if (map && map.flyTo) {
+ map.flyTo([x, y], zoom);
+ } else {
+ console.error("Map object is not ready or does not have flyTo method");
+ } // Ihre bereits existierende Funktion, die Zoom-Out ausführt
+ }
+ }, [map, zoomTrigger]);
+
+ //---------------------------------------------------------
+ /* useEffect(() => {
+ //console.log("Aktualisierung in MapComponent.js:", poiReadTrigger);
+ // Logik zur Aktualisierung der Map hier hinzufügen
+ // Beispiel: Daten neu laden oder aktualisieren
+ }, [poiReadTrigger]); */
+ //---------------------------------------------------------
+
+ //---------------------------------------------------------
+ useEffect(() => {
+ if (map) {
+ // Combine all markers from different layers
+ const allMarkers = [
+ ...talasMarkers,
+ ...eciMarkers,
+ ...gsmModemMarkers,
+ ...ciscoRouterMarkers,
+ ...wagoMarkers,
+ ...siemensMarkers,
+ ...otdrMarkers,
+ ...wdmMarkers,
+ ...gmaMarkers,
+ ...messstellenMarkers,
+ ...talasiclMarkers,
+ ...dauzMarkers,
+ ...smsfunkmodemMarkers,
+ ...sonstigeMarkers,
+ ...ulafMarkers,
+ ];
+
+ // Call the function to check for overlaps and add plus icons
+ checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
+ }
+ }, [
+ map,
+ talasMarkers,
+ eciMarkers,
+ gsmModemMarkers,
+ ciscoRouterMarkers,
+ wagoMarkers,
+ siemensMarkers,
+ otdrMarkers,
+ wdmMarkers,
+ gmaMarkers,
+ messstellenMarkers,
+ talasiclMarkers,
+ dauzMarkers,
+ smsfunkmodemMarkers,
+ sonstigeMarkers,
+ ulafMarkers,
+ ]);
+
+ //---------------------------------------------------------
+
+ return (
+ <>
+
+ ${area_name}
+
+
+ LT : ${measurements.LT} °C
+
+
+ FBT : ${measurements.FBT} °C
+
+
+ GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}
+
+
+ RLF : ${measurements.RLF} %
+
+
+ {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
+ {showPoiUpdateModal && (
+
+
+ {/* Rest of your component */}
+
+
+ )}
+ e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
+ >
+ {/* Schließen-Button oben rechts */}
+
+
+ {/* Formular-Komponente zum Hinzufügen einer Station */}
+ setShowPoiUpdateModal(false)}
+ poiData={currentPoiData}
+ onSubmit={handleAddStation}
+ latlng={popupCoordinates}
+ />
+
+
+ {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
+ {showPopup && (
+
+
+
+
+ )}
+ e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
+ >
+ {/* Schließen-Button oben rechts */}
+
+
+ {/* Formular-Komponente zum Hinzufügen einer Station */}
+
+
+
+ {showVersionInfoModal && (
+
+
+
+
+ {" "}
+ TALAS.Map{" "}
+
+
+
+ Version 1.0.0 +
+ + Version 1.0.0 +
+
+
+
+
+
+ )}
+
+ );
+};
+
+export default MapComponent;
diff --git a/components/MapComponent.js b/components/MapComponent.js
index ddc8e5ae6..ad1d69b09 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -22,7 +22,7 @@ import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAto
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
import PoiUpdateModal from "./PoiUpdateModal.js";
import { selectedPoiState } from "../store/atoms/poiState.js";
-import { currentPoiState } from '../store/atoms/currentPoiState';
+import { currentPoiState } from "../store/atoms/currentPoiState";
//import { createRoot } from "react-dom/client";
@@ -35,7 +35,6 @@ const plusRoundIcon = L.icon({
});
const MapComponent = ({ locations, onLocationUpdate }) => {
-
const setSelectedPoi = useSetRecoilState(selectedPoiState);
const openPoiUpdateModal = () => setShowPoiUpdateModal(true);
@@ -59,8 +58,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
description: marker.options.description,
});
console.log("POI-Daten1:", currentPoiData);
-
-
+
fetchPoiData(marker.options.id);
setShowPoiUpdateModal(true);
@@ -601,11 +599,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
setShowEditModal(true);
};
// In der Marker-Erstellungsfunktion
-//---------------------------------------------------------
-useEffect(() => {
- console.log("useEffect current Data:", currentPoiData);
-}, [currentPoiData]);
-//---------------------------------------------------------
+ //---------------------------------------------------------
+ useEffect(() => {
+ console.log("useEffect current Data:", currentPoiData);
+ }, [currentPoiData]);
+ //---------------------------------------------------------
//------------------------------------------
// API-Daten laden für GisStationsStaticDistrict
//http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
@@ -901,7 +899,10 @@ useEffect(() => {
}
//------------------------------------------
+<<<<<<< HEAD
+=======
+>>>>>>> 1a87c21 (Server configuration)
const fetchDeviceNameById = async (idLD) => {
try {
const response = await fetch(`/api/locationDeviceNameById?idLD=${idLD}`);
@@ -918,6 +919,11 @@ useEffect(() => {
};
//------------------------------------------
+<<<<<<< HEAD
+=======
+
+ //------------------------------------------
+>>>>>>> 1a87c21 (Server configuration)
// poiLayerRef(poiDbLayer) POI hinzufügen
//--------------------------------------------
@@ -935,6 +941,10 @@ useEffect(() => {
//console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
console.log("location.idPoiTyp poiLayer:", location);
console.log("location.idPoiTyp:", location.idPoiTyp);
+<<<<<<< HEAD
+=======
+
+>>>>>>> 1a87c21 (Server configuration)
const deviceName = await fetchDeviceNameById(location.idLD);
const marker = L.marker([latitude, longitude], {
icon: L.icon({
@@ -963,7 +973,11 @@ useEffect(() => {
marker.bindPopup(`
+
+
+
+
+
+ + Littwin Systemtechnik GmbH & Co. KG +
++ Bürgermeister-Brötje Str. 28 +
++ D-26180 Rastede +
++ T: +49 4402 9725 77-0 +
++ E: kontakt@littwin-systemtechnik.de +
++ TALAS.Map Version 1.0.0 +
+ +
${location.description || "Unbekannt"}
+<<<<<<< HEAD ${deviceName}
+======= + ${deviceName}
+>>>>>>> 1a87c21 (Server configuration) ${poiTypName}
`);
@@ -991,8 +1005,11 @@ useEffect(() => {
setCurrentPoi(location);
console.log("POI-Daten currentPoi:", currentPoi);
//console.log("poiData in MapComponent.js:", poiData);
+<<<<<<< HEAD
>>>>>>> b983067 (Prepair: With Recoil atom pass current poi data from MapComponent to poiUpdateModal.js when mouse over)
+=======
+>>>>>>> 1a87c21 (Server configuration)
});
marker.on("mouseout", function () {
this.closePopup();
diff --git a/config/config.js b/config/config.js
index 7c20e7597..7116a6411 100644
--- a/config/config.js
+++ b/config/config.js
@@ -30,7 +30,11 @@ if (typeof window !== "undefined") {
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+<<<<<<< HEAD
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+=======
+ /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+>>>>>>> 1a87c21 (Server configuration)
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
+<<<<<<< HEAD ${deviceName}
+======= + ${deviceName}
+>>>>>>> 1a87c21 (Server configuration) ${poiTypName}