diff --git a/components/MapComponent.js b/components/MapComponent.js index 60b4a44c2..01c0aa1f3 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -31,6 +31,25 @@ const plusRoundIcon = L.icon({ }); const MapComponent = ({ locations, onLocationUpdate }) => { + const zoomTrigger = useRecoilValue(zoomTriggerState); + const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; + const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; + //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; + // Create map layers + const TALAS = new L.layerGroup(); + const ECI = new L.layerGroup(); + const ULAF = new L.layerGroup(); + const GSMModem = new L.layerGroup(); + const CiscoRouter = new L.layerGroup(); + const WAGO = new L.layerGroup(); + const Siemens = new L.layerGroup(); + const OTDR = new L.layerGroup(); + const WDM = new L.layerGroup(); + const GMA = new L.layerGroup(); + const Sonstige = new L.layerGroup(); + const TALASICL = new L.layerGroup(); + + const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false); const baseUrl = "http://10.10.0.13/talas5/devices/"; const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false); const [poiTypMap, setPoiTypMap] = useState(new Map()); @@ -99,6 +118,339 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } }; + //---------------------------------------------------- + //-----Kontextmenu---------------- + function addContextMenuToMarker(marker) { + marker.bindContextMenu({ + contextmenu: true, + contextmenuWidth: 140, + contextmenuItems: [ + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: (e) => openInNewTab(e, marker), + }, + { + text: "Station öffnen", + icon: "/img/screen_same.png", + callback: (e) => openInSameWindow(e, marker), + }, + ], + }); + } + // Funktion zum Öffnen in einem neuen Tab + function openInNewTab(e, marker) { + console.log("Marker data:", baseUrl + marker.options.link); + window.open(baseUrl + marker.options.link, "_blank"); + } + + // Funktion zum Öffnen im gleichen Fenster + function openInSameWindow(e, marker) { + console.log("Marker data:", baseUrl + marker.options.link); + window.location.href = baseUrl + marker.options.link; + } + + const zoomIn = (e) => { + initMap.flyTo(e.latlng, 12); + //console.log("ZoomIn koordinaten in MapComponent", e.latlng); + }; + + const zoomOut = (e) => { + fly(); + }; + const centerHere = (e) => { + initMap.panTo(e.latlng); + }; + + // Funktion zum Anzeigen der Koordinaten + 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(); + }; + + // Kontextmenü Callback für "Station hinzufügen" + const addStationCallback = (event) => { + setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden + setShowPopup(true); // Popup öffnen + }; + //-----Kontextmenu----ende------------ + //------------------------------------------ */ + 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); + } + + function getIconPath(status, iconNumber, marker) { + let path = status + ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png` + : `TileMap/img/icons/marker-icon-${iconNumber}.png`; + + // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen + if ( + path.includes("critical") || // Priorität 1 + path.includes("major") || // Priorität 2 + path.includes("minor") || // Priorität 3 + path.includes("system") // Priorität 4 + ) { + // Setze Bouncing-Optionen + marker.setBouncingOptions({ + bounceHeight: 15, // Höhe des Bounces + contractHeight: 12, // Höhe des Einzugs beim Landen + bounceSpeed: 52, // Geschwindigkeit des Bounces + contractSpeed: 52, // Geschwindigkeit des Einzugs + shadowAngle: null, // Standard-Schattenwinkel + }); + // Check if the icon path includes 'critical' + if (path.includes("critical")) { + // marker.bounce(3); + } + } + + return path; + } + //------------------------------------------ + // Funktionen zur Überwachung der Internetverbindung + const checkInternet = () => { + fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" }) + .then((response) => setOnline(response.ok)) + .catch(() => setOnline(false)); + }; + let initMap = []; + //------------------------------------------ + //------------------------------------------ + function parsePoint(pointString) { + const match = pointString.match( + /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/ + ); + if (match) { + return { + longitude: parseFloat(match[1]), + latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)? + }; + } else { + // Handle the error or return a default/fallback value + console.error("Invalid POINT format:", pointString); + return null; // Oder eine sinnvolle Standardantwort + } + } + //---------------------------------- + //------------------------------------------ + + function parsePoint(position) { + const [longitude, latitude] = position.slice(6, -1).split(" "); + return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; + } + //----------------------------------------------------------------- + // TALAS Marker hinzufügen + //----------------------------------------------------------------- + // Reihenfolge nach API sortiert mit der Attribute "System" + 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([]); //----------------station.System === 1 + const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2 + const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5 + const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6 + const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7 + const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8 + const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9 + const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10 + const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 + const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13 + const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100 + const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110 + const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111 + const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200 + const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist + //-------------------------------------------------------------------------------- + function determinePriority(iconPath) { + if (iconPath.includes("critical")) return 1; // Highest priority + if (iconPath.includes("major")) return 2; + if (iconPath.includes("minor")) return 3; + if (iconPath.includes("system")) return 4; + return 5; // Default priority (lowest) + } + // Daten von einer externen Quelle laden + 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]) + ); + console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap); + + 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 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, + bounceOnAdd: !!statis, + }); + + marker.bindPopup(` +
+

${station.LD_Name}

+

Gerät: ${station.Device}

+

Zone: ${station.Area_Short} (${station.Area_Name})

+

Standort: ${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); + } + } + } + //--------------------------------------------------------- + //------------------------------------------ // API-Daten laden für GisStationsStaticDistrict //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485 useEffect(() => { @@ -207,8 +559,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen //------------------------------------------ - const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false); - //GisSystemStatic Daten laden useEffect(() => { const fetchData = async () => { @@ -236,36 +586,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, []); //------------------------------------------ - const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; - const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; - //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; - // Create map layers - const TALAS = new L.layerGroup(); - const ECI = new L.layerGroup(); - const ULAF = new L.layerGroup(); - const GSMModem = new L.layerGroup(); - const CiscoRouter = new L.layerGroup(); - const WAGO = new L.layerGroup(); - const Siemens = new L.layerGroup(); - const OTDR = new L.layerGroup(); - const WDM = new L.layerGroup(); - const GMA = new L.layerGroup(); - const Sonstige = new L.layerGroup(); - const TALASICL = new L.layerGroup(); - useEffect(() => { if (typeof window !== "undefined") { //console.log("Window height from config:", config.windowHeight); } }, []); - // Funktionen zur Überwachung der Internetverbindung - const checkInternet = () => { - fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" }) - .then((response) => setOnline(response.ok)) - .catch(() => setOnline(false)); - }; - let initMap = []; // Initialisierung der karte und hinzuügen der Layers useEffect(() => { if (mapRef.current && !map) { @@ -349,23 +675,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { console.log("trigger in MapComponent.js:", poiReadTrigger); }, [mapRef, map, poiReadTrigger]); // Prüfe die Abhängigkeiten sorgfältig - //------------------------------------------ - function parsePoint(pointString) { - const match = pointString.match( - /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/ - ); - if (match) { - return { - longitude: parseFloat(match[1]), - latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)? - }; - } else { - // Handle the error or return a default/fallback value - console.error("Invalid POINT format:", pointString); - return null; // Oder eine sinnvolle Standardantwort - } - } - //---------------------------------- // poiTyp Daten hinzufügen //------------------------------------------ // Funktion zum Abrufen der poiTyp Daten @@ -392,194 +701,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { console.log("poiTypData aktualisiert:", poiTypData); }, [poiTypData]); - //---------------------------------------------------- - //-----Kontextmenu---------------- - function addContextMenuToMarker(marker) { - marker.bindContextMenu({ - contextmenu: true, - contextmenuWidth: 140, - contextmenuItems: [ - { - text: "Station öffnen (Tab)", - icon: "/img/screen_new.png", - callback: (e) => openInNewTab(e, marker), - }, - { - text: "Station öffnen", - icon: "/img/screen_same.png", - callback: (e) => openInSameWindow(e, marker), - }, - ], - }); - } - // Funktion zum Öffnen in einem neuen Tab - function openInNewTab(e, marker) { - console.log("Marker data:", baseUrl + marker.options.link); - window.open(baseUrl + marker.options.link, "_blank"); - } - - // Funktion zum Öffnen im gleichen Fenster - function openInSameWindow(e, marker) { - console.log("Marker data:", baseUrl + marker.options.link); - window.location.href = baseUrl + marker.options.link; - } - - const zoomIn = (e) => { - initMap.flyTo(e.latlng, 12); - //console.log("ZoomIn koordinaten in MapComponent", e.latlng); - }; - - const zoomOut = (e) => { - fly(); - }; - const centerHere = (e) => { - initMap.panTo(e.latlng); - }; - - // Funktion zum Anzeigen der Koordinaten - 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(); - }; - - // Kontextmenü Callback für "Station hinzufügen" - const addStationCallback = (event) => { - setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden - setShowPopup(true); // Popup öffnen - }; - //-----Kontextmenu----ende------------ - // Ensure this function is only called when map is initialized and available - /* const showAddStationPopup = (e, map) => { - const container = L.DomUtil.create("div"); - - // Create a root container for the React component inside the popup - const root = ReactDOM.createRoot(container); - - root.render( - - - - ); - - // Create and configure the popup - L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap); - - // Cleanup when the popup is closed - initMap.on("popupclose", () => { - root.unmount(); // Use unmount method from the root - }); - }; */ - - // Inside your ShowAddStationPopup component - /* useEffect(() => { - // Cleanup function to unmount React component - return () => { - if (container._reactRoot) { - container._reactRoot.unmount(); - } - }; - }, []); */ - - //------------------------------------------ - - // Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi) - /* async function handleSubmit(event) { - event.preventDefault(); - const form = event.target; - - // Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist - if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) { - alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein."); - return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern - } - - const data = { - name: form.name.value, - type: form.type.value, - idPoi: form.idPoi.value, - idPoiTyp: form.idPoiTyp.value, - latitude: form.lat.value, - longitude: form.lng.value, - }; - - // Senden der Daten an den Server - const response = await fetch("/api/addLocation", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(data), - }); - - if (response.ok) { - console.log("Station erfolgreich hinzugefügt"); - // Weitere Aktionen nach erfolgreichem Hinzufügen - } else { - console.error("Fehler beim Hinzufügen der Station"); - // Fehlerbehandlung - } - } */ - //--------------------------------------- - function fly(stationValue) { - var x = 51.41321407879154; - var y = 7.739617925303934; - var zoom = 7; - - initMap.flyTo([x, y], zoom); - } - - function getIconPath(status, iconNumber, marker) { - let path = status - ? `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png` - : `TileMap/img/icons/marker-icon-${iconNumber}.png`; - - // Wenn der Pfad das Wort "critical" oder "major" enthält, dann den Marker bouncing options setzen - if ( - path.includes("critical") || // Priorität 1 - path.includes("major") || // Priorität 2 - path.includes("minor") || // Priorität 3 - path.includes("system") // Priorität 4 - ) { - // Setze Bouncing-Optionen - marker.setBouncingOptions({ - bounceHeight: 15, // Höhe des Bounces - contractHeight: 12, // Höhe des Einzugs beim Landen - bounceSpeed: 52, // Geschwindigkeit des Bounces - contractSpeed: 52, // Geschwindigkeit des Einzugs - shadowAngle: null, // Standard-Schattenwinkel - }); - // Check if the icon path includes 'critical' - if (path.includes("critical")) { - // marker.bounce(3); - } - } - - return path; - } - //------------------------------------------ // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern useEffect(() => { const fetchPoiTypData = async () => { @@ -704,115 +827,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]); - //------------------------------------------ - - function parsePoint(position) { - const [longitude, latitude] = position.slice(6, -1).split(" "); - return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) }; - } - //----------------------------------------------------------------- - // TALAS Marker hinzufügen - //----------------------------------------------------------------- - // Reihenfolge nach API sortiert mit der Attribute "System" - 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([]); //----------------station.System === 1 - const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2 - const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5 - const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6 - const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7 - const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8 - const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9 - const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10 - const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 - const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13 - const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100 - const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110 - const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111 - const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200 - const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist - //-------------------------------------------------------------------------------- - function determinePriority(iconPath) { - if (iconPath.includes("critical")) return 1; // Highest priority - if (iconPath.includes("major")) return 2; - if (iconPath.includes("minor")) return 3; - if (iconPath.includes("system")) return 4; - return 5; // Default priority (lowest) - } - // Daten von einer externen Quelle laden - 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]) - ); - console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap); - - 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 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, - bounceOnAdd: !!statis, - }); - - marker.bindPopup(` -
-

${station.LD_Name}

-

Gerät: ${station.Device}

-

Zone: ${station.Area_Short} (${station.Area_Name})

-

Standort: ${station.Location_Short} (${station.Location_Name})

-
- `); - return marker; - }); - - setMarkersFunction(markersData); - } - } catch (error) { - console.error("Error fetching data: ", error); - } - }; - useEffect(() => { if (gisSystemStaticLoaded && map) { createAndSetMarkers(1, setTalasMarkers); // TALAS-System @@ -1237,38 +1251,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //console.log("sonstige", sonstigeMarkers); //------------------------------------------- - //-------------------------------------------------------------------------------- - - const mapLayersVisibility = useRecoilValue(mapLayersState); - - /* 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]); */ // Depend on map, markers array, and visibility state - - 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, - }; - }); - }; - - //------------------------------------------ // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS @@ -1337,13 +1319,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]); //------------------------------------------ */ - const layerNames = { - "GSM Modem": "GSMMODEM", - "Cisco Router": "CiscoRouter", - "TALAS ICL": "TALASICL", - "SMS-Funkmodem": "GSMModem", - }; - //------------------------------------------ */ + // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter useEffect(() => { @@ -1538,31 +1514,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]); //------------------------------------------ */ - 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); - }; // Effect to handle navigation to selected area useEffect(() => { @@ -1574,15 +1525,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies - /* const findMyMarker = (areaName) => { - // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde. - return talasMarkers.find((marker) => marker.options.areaName === areaName); - }; */ - //------------------------------------------ - const zoomTrigger = useRecoilValue(zoomTriggerState); - useEffect(() => { if (map) { var x = 51.41321407879154; @@ -1605,37 +1549,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Beispiel: Daten neu laden oder aktualisieren }, [poiReadTrigger]); //--------------------------------------------------------- - // 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); - } - } - } //--------------------------------------------------------- useEffect(() => {