diff --git a/components/MapComponent2.js b/components/MapComponent2.js deleted file mode 100644 index 235f2e2cc..000000000 --- a/components/MapComponent2.js +++ /dev/null @@ -1,1035 +0,0 @@ -// components/MapComponent.js - -import React, { useEffect, useRef, useState, useCallback } from "react"; -import { MapContainer, TileLayer, LayerGroup } from "react-leaflet"; -import L from "leaflet"; -import "leaflet/dist/leaflet.css"; -import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; -import "leaflet-contextmenu"; -import dynamic from "next/dynamic"; -import "leaflet.smooth_marker_bouncing"; -import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { ToastContainer, toast } from "react-toastify"; -import "react-toastify/dist/ReactToastify.css"; -import { InformationCircleIcon } from "@heroicons/react/20/solid"; -import PoiUpdateModal from "./PoiUpdateModal"; -import ShowAddStationPopup from "./ShowAddStationPopup"; -import DataSheet from "./DataSheet"; -import { - fetchGisStatusStations, - fetchPriorityConfig, - fetchPoiData, - updateLocationInDatabase, - checkInternet, - fetchUserRights, - fetchDeviceNameById, -} from "../services/apiService"; -import { - selectedPoiState, - currentPoiState, - poiTypState, - poiReadFromDbTriggerAtom, - gisStationsStaticDistrictState, - gisSystemStaticState, - mapLayersState, - selectedAreaState, - zoomTriggerState, - mapIdState, - userIdState, - poiLayerVisibleState, -} from "../store/atoms"; -import { parsePoint, findClosestPoints } from "../utils/geometryUtils"; -import { - insertNewMarker, - removeMarker, -} from "../utils/markerUtils"; -import { - saveLineData, - redrawPolyline, - restoreMapSettings, - checkOverlappingMarkers, -} from "../utils/mapUtils"; -import { - addContextMenuToMarker, - openInNewTab, -} from "../utils/contextMenuUtils"; -import { MAP_VERSION } from "../config/settings"; -import * as layers from "../config/layers"; -import { urls, config } from "../config"; -import circleIcon from "./CircleIcon"; -import startIcon from "./StartIcon"; -import endIcon from "./EndIcon"; -import useMapContextMenu from "./useMapContextMenu"; -import { openInSameWindow } from "../utils/openInSameWindow"; -import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; -import plusRoundIcon from "./PlusRoundIcon"; - -const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { - const [loading, setLoading] = useState(true); // Ladezustand hinzufügen - const [currentZoom, setCurrentZoom] = useState(() => { - const storedZoom = localStorage.getItem("mapZoom"); - return storedZoom ? parseInt(storedZoom, 10) : 12; - }); - - const [currentCenter, setCurrentCenter] = useState(() => { - const storedCenter = localStorage.getItem("mapCenter"); - try { - return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625]; - } catch (e) { - console.error("Error parsing stored map center:", e); - return [53.111111, 8.4625]; - } - }); - - const [priorityConfig, setPriorityConfig] = useState([]); - - useEffect(() => { - fetchPriorityConfig(); - }, []); - - useEffect(() => { - console.log("Aktualisierte Prioritätskonfiguration:", priorityConfig); - }, [priorityConfig]); - - useEffect(() => { - fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484 - }, []); - - const [menuItemAdded, setMenuItemAdded] = useState(false); - - const poiLayerVisible = useRecoilValue(poiLayerVisibleState); - - const [contextMenuItems, setContextMenuItems] = useState([]); - const [isRightsLoaded, setIsRightsLoaded] = useState(false); - const [hasRights, setHasRights] = useState(false); - const [mapId, setMapId] = useRecoilState(mapIdState); - const [userId, setUserId] = useRecoilState(userIdState); - - const [showAddStationPopup, setShowAddStationPopup] = useState(false); - const [userRights, setUserRights] = useState(null); - const setSelectedPoi = useSetRecoilState(selectedPoiState); - const openPoiUpdateModal = () => setShowPoiUpdateModal(true); - const closePoiUpdateModal = () => setShowPoiUpdateModal(false); - const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false); - const [currentPoiData, setCurrentPoiData] = useState(null); - const setCurrentPoi = useSetRecoilState(currentPoiState); - const currentPoi = useRecoilValue(currentPoiState); - const handlePoiSelect = (poiData) => { - setSelectedPoi(poiData); // poiData should be the data of the selected POI - // Open the modal or any other logic - }; - - useEffect(() => { - const params = new URL(window.location.href).searchParams; - setMapId(params.get("m")); - setUserId(params.get("u")); - }, [setMapId, setUserId]); - - useEffect(() => { - fetchUserRights().then(() => { - setIsRightsLoaded(true); - console.log("Benutzerrechte in useEffect in MapComponent:", userRights); - }); - }, [urls.SERVER_URL]); // Lade die Berechtigungen beim Initialisieren der Komponente - - const [showVersionInfoModal, setShowVersionInfoModal] = useState(false); - const zoomTrigger = useRecoilValue(zoomTriggerState); - const offlineTileLayer = urls.OFFLINE_TILE_LAYER; - const onlineTileLayer = urls.ONLINE_TILE_LAYER; //Talas_v5 Server - - // Create map layers - const TALAS = layers.MAP_LAYERS.TALAS; - const ECI = layers.MAP_LAYERS.ECI; - const ULAF = layers.MAP_LAYERS.ULAF; - const GSMModem = layers.MAP_LAYERS.GSMModem; - const CiscoRouter = layers.MAP_LAYERS.CiscoRouter; - const WAGO = layers.MAP_LAYERS.WAGO; - const Siemens = layers.MAP_LAYERS.Siemens; - const OTDR = layers.MAP_LAYERS.OTDR; - const WDM = layers.MAP_LAYERS.WDM; - const GMA = layers.MAP_LAYERS.GMA; - const Sonstige = layers.MAP_LAYERS.Sonstige; - const TALASICL = layers.MAP_LAYERS.TALASICL; - const lineLayer = layers.MAP_LAYERS.lineLayer; - - const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false); - - const baseUrl = urls.BASE_URL; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame - - const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false); - const [poiTypMap, setPoiTypMap] = useState(new Map()); - const [showPopup, setShowPopup] = useState(false); - const [popupCoordinates, setPopupCoordinates] = useState({ - lat: 52.52, - lng: 13.405, - }); // Beispielkoordinaten - const openPopup = () => setShowPopup(true); - const closePopup = () => setShowPopup(false); - - const handleAddStation = (stationData) => { - setShowAddStationPopup(false); - closePopup(); // Schließt das Popup nach dem Hinzufügen - }; - - const openAddStationPopupWithCoordinates = (lat, lng) => { - setPopupCoordinates({ lat, lng }); - setShowPopup(true); - }; - - const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom); - const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden - const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker - const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte - const [map, setMap] = useState(null); // Zustand der Karteninstanz - const [oms, setOms] = useState(null); // State für OMS-Instanz - const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung - const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = - useRecoilState(gisStationsStaticDistrictState); - const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState( - [] - ); // Zustand für Statusdaten - const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten - const [GisSystemStatic, setGisSystemStatic] = - useRecoilState(gisSystemStaticState); // Zustand für Systemdaten - const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten - - const mapGisStationsStaticDistrictUrl = - config.mapGisStationsStaticDistrictUrl; - const mapGisStationsStatusDistrictUrl = - config.mapGisStationsStatusDistrictUrl; - const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl; - const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; - const mapDataIconUrl = config.mapDataIconUrl; - const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl; - - const openVersionInfoModal = () => { - setShowVersionInfoModal(true); - }; - - const closeVersionInfoModal = () => { - setShowVersionInfoModal(false); - }; - - const zoomInCallback = (e, map) => { - zoomIn(e, map); - }; - - const zoomOutCallback = (map) => { - zoomOut(map); - }; - - const centerHereCallback = (e, map) => { - centerHere(e, map); - }; - - const showCoordinates = (e) => { - alert( - "Breitengrad: " + - e.latlng.lat.toFixed(5) + - "\nLängengrad: " + - e.latlng.lng.toFixed(5) - ); - }; - - const showData = (e) => {}; - const showTalas = (e) => { - map.addLayer(TALAS); - loadData(); - }; - const hideTalas = (e) => { - map.removeLayer(TALAS); - loadData(); - }; - const showGSM = (e) => { - map.addLayer(GMA); - loadData(); - }; - const hideGSM = (e) => { - map.removeLayer(GMA); - loadData(); - }; - - const addStationCallback = useCallback( - (event) => { - console.log( - "Überprüfung der Berechtigung in addStationCallback: ", - hasRights - ); - if (hasRights) { - setPopupCoordinates(event.latlng); - setShowPopup(true); - } else { - toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - console.error("Benutzer hat keine Berechtigung zum Hinzufügen."); - } - }, - [hasRights] - ); - - const addItemsToMapContextMenu = () => { - if (!menuItemAdded) { - map.contextmenu.addItem({ - text: "Koordinaten anzeigen", - icon: "img/not_listed_location.png", - callback: showCoordinates, - }); - - map.contextmenu.addItem({ separator: true }); - - map.contextmenu.addItem({ - text: "Reinzoomen", - icon: "img/zoom_in.png", - callback: (e) => zoomInCallback(e, map), - }); - - map.contextmenu.addItem({ - text: "Rauszoomen", - icon: "img/zoom_out.png", - callback: () => zoomOutCallback(map), - }); - - map.contextmenu.addItem({ - text: "Hier zentrieren", - icon: "img/center_focus.png", - callback: (e) => centerHereCallback(e, map), - }); - - map.contextmenu.addItem({ separator: true }); - - map.contextmenu.addItem({ - text: "POI hinzufügen", - icon: "img/add_station.png", - className: "background-red", - callback: (event) => addStationCallback(event, hasRights), - }); - - setMenuItemAdded(true); - } - }; - - const layerNames = { - "GSM Modem": "GSMMODEM", - "Cisco Router": "CiscoRouter", - "TALAS ICL": "TALASICL", - "SMS-Funkmodem": "GSMModem", - }; - - function fly(stationValue) { - var x = 51.41321407879154; - var y = 7.739617925303934; - var zoom = 7; - - initMap.flyTo([x, y], zoom); - } - - let initMap = []; - - const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState); - const [eciVisible, setEciVisible] = useRecoilState(mapLayersState); - const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState); - const [ciscoRouterVisible, setCiscoRouterVisible] = - useRecoilState(mapLayersState); - const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState); - const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState); - const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState); - const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState); - const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState); - const [messstellenVisible, setMessstellenVisible] = - useRecoilState(mapLayersState); - const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState); - const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState); - const [smsfunkmodemVisible, setSmsfunkmodemVisible] = - useRecoilState(mapLayersState); - const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState); - const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState); - - const [talasMarkers, setTalasMarkers] = useState([]); - const [eciMarkers, setEciMarkers] = useState([]); - const [gsmModemMarkers, setGsmModemMarkers] = useState([]); - const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); - const [wagoMarkers, setWagoMarkers] = useState([]); - const [siemensMarkers, setSiemensMarkers] = useState([]); - const [otdrMarkers, setOtdrMarkers] = useState([]); - const [wdmMarkers, setWdmMarkers] = useState([]); - const [gmaMarkers, setGmaMarkers] = useState([]); - const [messstellenMarkers, setMessstellenMarkers] = useState([]); - const [talasiclMarkers, setTalasiclMarkers] = useState([]); - const [dauzMarkers, setDauzMarkers] = useState([]); - const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); - const [sonstigeMarkers, setSonstigeMarkers] = useState([]); - const [ulafMarkers, setUlafMarkers] = useState([]); - - const determinePriority = (iconPath) => { - for (let priority of priorityConfig) { - if (iconPath.includes(priority.name.toLowerCase())) { - return priority.level; - } - } - return 5; - }; - - const createAndSetMarkers = async (systemId, setMarkersFunction) => { - try { - const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); - const jsonResponse = await response1.json(); - const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); - const statusResponse = await response2.json(); - - const getIdSystemAndAllowValueMap = new Map( - GisSystemStatic.map((system) => [system.IdSystem, system.Allow]) - ); - - if (jsonResponse.Points && statusResponse.Statis) { - const statisMap = new Map( - statusResponse.Statis.map((s) => [s.IdLD, s]) - ); - let markersData = jsonResponse.Points.filter( - (station) => - station.System === systemId && - getIdSystemAndAllowValueMap.get(station.System) === 1 - ).map((station) => { - const statis = statisMap.get(station.IdLD); - const iconPath = statis - ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` - : `img/icons/marker-icon-${station.Icon}.png`; - - const priority = determinePriority(iconPath); - const zIndexOffset = 100 * (5 - priority); - - const marker = L.marker([station.X, station.Y], { - icon: L.icon({ - iconUrl: iconPath, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - }), - areaName: station.Area_Name, - link: station.Link, - zIndexOffset: zIndexOffset, - bounceOnAdd: !!statis, - }); - - if (statis) { - marker.on("add", () => marker.bounce(3)); - } - - const statusInfo = statusResponse.Statis.filter( - (status) => status.IdLD === station.IdLD - ) - .reverse() - .map( - (status) => ` -
-
- ${status.Me} (${status.Na}) -
- ` - ) - .join(""); - - marker.bindPopup(` -
- ${station.LD_Name} - ${station.Device}
- ${station.Area_Short} (${station.Area_Name})
- ${station.Location_Short} (${station.Location_Name}) -
${statusInfo}
-
- `); - - return marker; - }); - - setMarkersFunction(markersData); - } - } catch (error) { - console.error("Error fetching data: ", error); - } - }; - - const mapLayersVisibility = useRecoilValue(mapLayersState); - - const handleEditPoi = (marker) => { - if (!userRights || !userRights.includes(56)) { - toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", { - position: "top-center", - autoClose: 5000, - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - }); - console.log("Benutzer hat keine Berechtigung zum Bearbeiten."); - return; - } - - console.log("Selected Marker Description:", marker.options.description); - console.log("Selected Marker :", marker); - - setCurrentPoiData({ - idPoi: marker.options.id, - name: marker.options.name, - description: marker.options.description, - }); - - fetchPoiData(marker.options.id); - - setShowPoiUpdateModal(true); - }; - - const selectedArea = useRecoilValue(selectedAreaState); - - const allMarkers = [ - ...talasMarkers, - ...eciMarkers, - ...gsmModemMarkers, - ...ciscoRouterMarkers, - ...wagoMarkers, - ...siemensMarkers, - ...otdrMarkers, - ...wdmMarkers, - ...gmaMarkers, - ...messstellenMarkers, - ...talasiclMarkers, - ...dauzMarkers, - ...smsfunkmodemMarkers, - ...sonstigeMarkers, - ...ulafMarkers, - ]; - - const findMyMarker = (areaName) => { - return allMarkers.find((marker) => marker.options.areaName === areaName); - }; - - useEffect(() => { - const params = new URL(window.location.href).searchParams; - setMapId(params.get("m")); - setUserId(params.get("u")); - }, [setMapId, setUserId]); - - useEffect(() => { - fetchUserRights().then(() => { - setIsRightsLoaded(true); - console.log("Benutzerrechte in useEffect in MapComponent:", userRights); - }); - }, [urls.SERVER_URL]); - - const url = new URL(window.location.href); - const serverURL = urls.SERVER_URL; - - useEffect(() => { - if (userRights !== 56) { - setShowPoiUpdateModal(false); - setShowAddStationPopup(false); - } - }, [userRights]); - - useEffect(() => { - console.log("useEffect current Data:", currentPoiData); - }, [currentPoiData]); - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsStaticDistrictUrl); - const jsonResponse = await response.json(); - - if (jsonResponse && jsonResponse.Points) { - setGisStationsStaticDistrict(jsonResponse.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(); - }, []); - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsStaticDistrictUrl); - const jsonResponse = await response.json(); - - if (jsonResponse && jsonResponse.Points) { - setGisStationsStaticDistrict(jsonResponse.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(); - }, []); - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsStatusDistrictUrl); - const jsonResponse = await response.json(); - - if (jsonResponse && jsonResponse.Statis) { - setGisStationsStatusDistrict(jsonResponse.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(); - }, []); - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisStationsMeasurementsUrl); - const jsonResponse = await response.json(); - - if (jsonResponse && jsonResponse.Statis) { - setGisStationsMeasurements(jsonResponse.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(); - }, []); - - useEffect(() => { - const fetchData = async () => { - try { - const response = await fetch(mapGisSystemStaticUrl); - const jsonResponse = await response.json(); - - if (jsonResponse && jsonResponse.Systems) { - setGisSystemStatic(jsonResponse.Systems); - setGisSystemStaticLoaded(true); - } 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); - } - }, []); - - useEffect(() => { - if (mapRef.current && !map) { - initMap = L.map(mapRef.current, { - center: currentCenter, - zoom: currentZoom, - layers: [ - TALAS, - ECI, - ULAF, - GSMModem, - CiscoRouter, - WAGO, - Siemens, - OTDR, - WDM, - GMA, - Sonstige, - TALASICL, - ], - minZoom: 5, - maxZoom: 15, - zoomControl: false, - contextmenu: true, - contextmenuItems: [ - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: (e) => { - const clickedMarker = e.relatedTarget; - openInNewTab(e, clickedMarker); - }, - }, - ], - }); - - 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 () { - if (initMap.getZoom() > 15) { - initMap.setZoom(15); - } else if (initMap.getZoom() < 5) { - initMap.setZoom(5); - } - }); - - initMap.whenReady(() => { - console.log("Karte ist jetzt bereit und initialisiert."); - }); - } - console.log("trigger in MapComponent.js:", poiReadTrigger); - }, [mapRef, map, poiReadTrigger, contextMenuItems]); - - useEffect(() => { - const fetchPoiTypData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); - const data = await response.json(); - setPoiTypData(data); - } catch (error) { - console.error("Fehler beim Abrufen der poiTyp Daten:", error); - } - }; - console.log( - "trigger in MapComponent.js in fetchPoiTypData:", - poiReadTrigger - ); - fetchPoiTypData(); - }, []); - - useEffect(() => { - console.log("poiTypData aktualisiert:", poiTypData); - }, [poiTypData]); - - useEffect(() => { - const fetchPoiTypData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); - const data = await response.json(); - const map = new Map(); - data.forEach((item) => map.set(item.idPoiTyp, item.name)); - setPoiTypMap(map); - setIsPoiTypLoaded(true); - 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) { - dbLayer = new L.LayerGroup().addTo(map); - - return () => { - dbLayer.remove(); - }; - } - }, [map]); - - useEffect(() => { - if (map && !poiLayerRef.current) { - poiLayerRef.current = new L.LayerGroup().addTo(map); - } - - return () => { - if (map && poiLayerRef.current) { - map.removeLayer(poiLayerRef.current); - poiLayerRef.current = new L.LayerGroup().addTo(map); - } - locations.forEach((location) => {}); - }; - console.log("trigger in MapComponent.js:", poiReadTrigger); - }, [map, locations, poiReadTrigger]); - - function editPoi(marker) { - const markerId = marker.options.id; - console.log("Bearbeiten des POI mit ID:", markerId); - } - - useEffect(() => { - if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) { - addItemsToMapContextMenu(); - } - }, [ - map, - poiLayerRef, - isPoiTypLoaded, - menuItemAdded, - ]); - - const [poiData, setPoiData] = useState([]); - - useEffect(() => { - const fetchPoiData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/pois/poi-icons"); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - setPoiData(data); - console.log("poiData data:", data); - console.log("poiData icons:", poiData); - } catch (error) { - console.error("Fehler beim Abrufen der poiData:", error); - } - }; - - fetchPoiData(); - }, []); - - useEffect(() => { - if (poiData.length === 0) return; - - try { - if (map && poiLayerRef.current && isPoiTypLoaded) { - map.removeLayer(poiLayerRef.current); - poiLayerRef.current = new L.LayerGroup().addTo(map); - - locations.forEach(async (location) => { - try { - const { latitude, longitude } = parsePoint(location.position); - const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt"; - const deviceName = await fetchDeviceNameById(location.idLD); - console.log("deviceName:", deviceName); - - 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, - }).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 () { - this.openPopup(); - handlePoiSelect({ - id: location.idPoi, - deviceId: location.idLD, - typ: poiTypName, - description: location.description, - }); - setCurrentPoi(location); - }); - - 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(() => { - onLocationUpdate(markerId, newLat, newLng); - }); - } else { - console.error("Drag operation not allowed"); - } - }); - - if (poiLayerVisible) { - marker.addTo(poiLayerRef.current); - } - } catch (innerError) { - console.error("Error processing a location:", innerError); - } - }); - } - } catch (error) { - console.error("Error in useEffect:", error); - } - }, [ - map, - locations, - onLocationUpdate, - poiReadTrigger, - isPoiTypLoaded, - userRights, - poiLayerVisible, - poiData, - ]); - - useEffect(() => { - if (gisSystemStaticLoaded && map) { - createAndSetMarkers(1, setTalasMarkers); - createAndSetMarkers(2, setEciMarkers); - createAndSetMarkers(5, setGsmModemMarkers); - createAndSetMarkers(6, setCiscoRouterMarkers); - createAndSetMarkers(7, setWagoMarkers); - createAndSetMarkers(8, setSiemensMarkers); - createAndSetMarkers(9, setOtdrMarkers); - createAndSetMarkers(10, setWdmMarkers); - createAndSetMarkers(11, setGmaMarkers); - createAndSetMarkers(13, setMessstellenMarkers); - createAndSetMarkers(100, setTalasiclMarkers); - createAndSetMarkers(110, setDauzMarkers); - createAndSetMarkers(111, setSmsfunkmodemMarkers); - createAndSetMarkers(200, setSonstigeMarkers); - createAndSetMarkers(0, setUlafMarkers); - } - }, [gisSystemStaticLoaded, map]); - - useEffect(() => { - if (map && talasMarkers.length) { - talasMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - - addContextMenuToMarker(marker); - }); - map.addLayer(TALAS); - - map.options.contextmenu = false; - map.options.contextmenuItems = []; - - oms.map.options.contextmenu = false; - oms.map.options.contextmenuItems = []; - - checkOverlappingMarkers(oms, map, plusRoundIcon); - } - }, [map, talasMarkers]); - - useEffect(() => { - if (map && eciMarkers.length) { - eciMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - addContextMenuToMarker(marker); - }); - map.addLayer(ECI); - } - }, [map, eciMarkers]); - - useEffect(() => { - if (map && gsmModemMarkers.length) { - gsmModemMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - marker.on("mouseover", function () { - this.openPopup(); - }); - marker.on("mouseout", function () { - this.closePopup(); - }); - addContextMenuToMarker(marker); - }); - map.addLayer(GSMModem); - } - }, [map, gsmModemMarkers]); - - useEffect(() => { - if (map && ciscoRouterMarkers.length) { - ciscoRouterMarkers.forEach((marker) => { - marker.addTo(map); - oms.addMarker(marker); - - marker.on("mouseover", function () { - this.openPopup(); - }); - diff --git a/utils/zoomAndCenterUtils.js b/utils/zoomAndCenterUtils.js index 9bb773d7e..dcb01772c 100644 --- a/utils/zoomAndCenterUtils.js +++ b/utils/zoomAndCenterUtils.js @@ -1,5 +1,5 @@ // utils/zoomAndCenterUtils.js -export const zoomIn = (e, map) => { +/* export const zoomIn = (e, map) => { if (!map) { console.error("map is not defined in zoomIn"); return; @@ -7,6 +7,16 @@ export const zoomIn = (e, map) => { map.flyTo(e.latlng, map.getZoom() + 1); localStorage.setItem("mapZoom", map.getZoom()); localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); +}; */ + +export const zoomIn = (e, map) => { + if (!map) { + console.error("map is not defined in zoomIn"); + return; + } + map.flyTo(e.latlng, 12); + localStorage.setItem("mapZoom", map.getZoom()); + localStorage.setItem("mapCenter", JSON.stringify(map.getCenter())); }; export const zoomOut = (map) => {