512 lines
15 KiB
JavaScript
512 lines
15 KiB
JavaScript
// ./components/MapComponent.js
|
|
import { useEffect, useRef, useState } from "react";
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
|
|
import "leaflet-contextmenu";
|
|
|
|
const MapComponent = ({
|
|
locations,
|
|
onAddLocation,
|
|
onLocationUpdate,
|
|
dataStatic,
|
|
mapData,
|
|
}) => {
|
|
const [map, setMap] = useState(null);
|
|
const [markers, setMarkers] = useState([]);
|
|
const mapRef = useRef(null);
|
|
const [mapLayers, setMapLayers] = useState({});
|
|
const [online, setOnline] = useState(navigator.onLine);
|
|
// Define tile layers
|
|
const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
|
|
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
|
|
|
// Ensure all usage of `map` checks that it is initialized
|
|
useEffect(() => {
|
|
if (map) {
|
|
const layerUrl = online ? onlineTileLayer : offlineTileLayer;
|
|
const newLayer = L.tileLayer(layerUrl, {
|
|
minZoom: 7,
|
|
maxZoom: online ? 19 : 14,
|
|
attribution:
|
|
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
});
|
|
|
|
map.eachLayer((layer) => {
|
|
if (layer instanceof L.TileLayer) {
|
|
map.removeLayer(layer);
|
|
}
|
|
});
|
|
|
|
newLayer.addTo(map);
|
|
}
|
|
}, [online, map]);
|
|
|
|
// Funktion zum Wechseln der Kartenlayer
|
|
const switchLayer = () => {
|
|
console.log("Attempting to switch layers...");
|
|
if (!map) {
|
|
console.log("Map is not initialized yet.");
|
|
return;
|
|
}
|
|
|
|
const layerUrl = online ? onlineTileLayer : offlineTileLayer;
|
|
console.log(`Switching layers: ${online ? "Online" : "Offline"}`);
|
|
const newLayer = L.tileLayer(layerUrl, {
|
|
minZoom: 7,
|
|
maxZoom: online ? 19 : 14,
|
|
attribution:
|
|
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
});
|
|
|
|
map.eachLayer((layer) => {
|
|
if (layer instanceof L.TileLayer) {
|
|
console.log("Removing layer:", layer);
|
|
map.removeLayer(layer);
|
|
}
|
|
});
|
|
newLayer.addTo(map);
|
|
console.log("Layer added to map.");
|
|
};
|
|
// Online-/Offline-Status überwachen
|
|
useEffect(() => {
|
|
// Funktion zur Überprüfung der Internetverbindung
|
|
const checkInternet = () => {
|
|
console.log("Checking internet connectivity...");
|
|
fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
|
|
.then((response) => {
|
|
const newOnlineStatus = response.ok;
|
|
console.log(
|
|
`Internet status checked: ${newOnlineStatus ? "Online" : "Offline"}`
|
|
);
|
|
setOnline(newOnlineStatus);
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error checking internet status:", error.message);
|
|
setOnline(false);
|
|
});
|
|
};
|
|
window.addEventListener("online", checkInternet);
|
|
window.addEventListener("offline", checkInternet);
|
|
return () => {
|
|
window.removeEventListener("online", checkInternet);
|
|
window.removeEventListener("offline", checkInternet);
|
|
};
|
|
}, []);
|
|
const centerMap = (e) => {
|
|
if (!map) {
|
|
console.error("Die Karte wurde noch nicht initialisiert.");
|
|
return;
|
|
}
|
|
if (!e || !e.latlng) {
|
|
console.error("Fehlerhafte Event-Daten: ", e);
|
|
return;
|
|
}
|
|
console.log("Zentrierung auf: ", e.latlng);
|
|
map.panTo(e.latlng);
|
|
};
|
|
// Karte nur einmal initialisieren
|
|
useEffect(() => {
|
|
if (mapRef.current && !map) {
|
|
console.log("Initializing map...");
|
|
const initializedMap = L.map(mapRef.current, {
|
|
center: [53.111111, 8.4625],
|
|
zoom: 10,
|
|
contextmenu: true,
|
|
contextmenuWidth: 140,
|
|
contextmenuItems: [
|
|
{
|
|
text: "Station hinzufügen",
|
|
callback: (e) => showAddStationPopup(e, initializedMap),
|
|
},
|
|
{
|
|
text: "Station öffnen (Tab)",
|
|
icon: "img/screen_new.png",
|
|
callback: newLink,
|
|
},
|
|
{
|
|
text: "Station öffnen",
|
|
icon: "img/screen_same.png",
|
|
callback: sameLink,
|
|
},
|
|
"-",
|
|
{
|
|
text: "Reinzoomen",
|
|
icon: "img/zoom_in.png",
|
|
callback: zoomIn,
|
|
},
|
|
{
|
|
text: "Rauszoomen",
|
|
icon: "img/zoom_out.png",
|
|
callback: zoomOut,
|
|
},
|
|
{
|
|
text: "Hier zentrieren",
|
|
icon: "img/center_focus.png",
|
|
callback: centerMap,
|
|
},
|
|
"-",
|
|
{
|
|
text: "Koordinaten",
|
|
icon: "img/not_listed_location.png",
|
|
callback: showCoordinates,
|
|
},
|
|
{
|
|
text: "Get Data to Console",
|
|
icon: "img/not_listed_location.png",
|
|
callback: showData,
|
|
},
|
|
{
|
|
text: "Show Talas",
|
|
icon: "img/not_listed_location.png",
|
|
callback: showTalas,
|
|
},
|
|
{
|
|
text: "Hide Talas",
|
|
icon: "img/not_listed_location.png",
|
|
callback: hideTalas,
|
|
},
|
|
{
|
|
text: "Show GMA",
|
|
icon: "img/not_listed_location.png",
|
|
callback: showGSM,
|
|
},
|
|
{
|
|
text: "Hide GMA",
|
|
icon: "img/not_listed_location.png",
|
|
callback: hideGSM,
|
|
},
|
|
],
|
|
});
|
|
const tileLayer = L.tileLayer(
|
|
online ? onlineTileLayer : offlineTileLayer,
|
|
{
|
|
attribution:
|
|
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
minZoom: 7,
|
|
maxZoom: 19,
|
|
}
|
|
);
|
|
|
|
tileLayer.addTo(initializedMap);
|
|
setMap(initializedMap);
|
|
|
|
return () => initializedMap.remove(); // Cleanup
|
|
}
|
|
}, [mapRef, online]); // Abhängigkeit von online hinzugefügt
|
|
|
|
// Layer wechseln, wenn Online-Status sich ändert
|
|
useEffect(() => {
|
|
switchLayer(online);
|
|
}, [online, map]);
|
|
|
|
// Erstellen von Refs für jede LayerGroup
|
|
const TALAS = useRef(null);
|
|
const ECI = useRef(null);
|
|
const ULAF = useRef(null);
|
|
const GSMModem = useRef(null);
|
|
const CiscoRouter = useRef(null);
|
|
const WAGO = useRef(null);
|
|
const Siemens = useRef(null);
|
|
const OTDR = useRef(null);
|
|
const WDM = useRef(null);
|
|
const GMA = useRef(null);
|
|
const Sonstige = useRef(null);
|
|
const TALASICL = useRef(null);
|
|
|
|
const flyToStation = (stationValue) => {
|
|
let x = 51.41321407879154;
|
|
let y = 7.739617925303934;
|
|
let zoom = 14;
|
|
|
|
const stationData = dataStatic.find(
|
|
(station) => station.Area_Name === stationValue
|
|
);
|
|
if (stationData) {
|
|
x = stationData.X;
|
|
y = stationData.Y;
|
|
} else {
|
|
zoom = 8; // default zoom if not found
|
|
}
|
|
|
|
map.flyTo([x, y], zoom);
|
|
|
|
mapData.forEach((datum) => {
|
|
const loc = new L.LatLng(datum.lat, datum.lon);
|
|
const marker = new L.Marker(loc, { title: datum.d });
|
|
marker.bindPopup(datum.d);
|
|
map.addLayer(marker);
|
|
});
|
|
};
|
|
//-----Kontextmenu----------------
|
|
const newLink = (e) => {
|
|
try {
|
|
if (!e.relatedTarget || !e.relatedTarget.options) {
|
|
throw new Error("relatedTarget or options not defined");
|
|
}
|
|
alert("Neues Fenster: " + e.relatedTarget.options.test);
|
|
window
|
|
.open(`../devices/${e.relatedTarget.options.test}`, "_blank")
|
|
.focus();
|
|
} catch (error) {
|
|
console.error("Failed in newLink function:", error);
|
|
}
|
|
};
|
|
|
|
const sameLink = (e) => {
|
|
alert(e.relatedTarget.options.test);
|
|
window
|
|
.open("../devices/" + e.relatedTarget.options.test, "_parent")
|
|
.focus();
|
|
};
|
|
const zoomIn = (e) => {
|
|
if (!map) {
|
|
console.error("Karte ist noch nicht initialisiert.");
|
|
return;
|
|
}
|
|
map.flyTo(e.latlng, 12);
|
|
};
|
|
|
|
const zoomOut = (e) => {
|
|
fly();
|
|
};
|
|
|
|
const showCoordinates = (e) => {
|
|
alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng);
|
|
};
|
|
const showData = (e) => {
|
|
console.log(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();
|
|
};
|
|
//-----Kontextmenu----ende------------
|
|
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
|
|
}
|
|
}
|
|
|
|
// Beispiel einer Funktion zum Aktualisieren der Position in der Datenbank
|
|
const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
|
|
const response = await fetch("/api/updateLocation", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
id,
|
|
latitude: newLatitude,
|
|
longitude: newLongitude,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
console.log("Position erfolgreich aktualisiert");
|
|
//schreib die neue Kooridnaten in die Console
|
|
console.log("Latitude: " + newLatitude);
|
|
console.log("Longitude: " + newLongitude);
|
|
console.log("ID: " + id);
|
|
console.log("Response: " + response);
|
|
//akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE
|
|
} else {
|
|
console.error("Fehler beim Aktualisieren der Position");
|
|
}
|
|
};
|
|
//-------------------------------------
|
|
|
|
//------------------- loadData ---------------//
|
|
/*
|
|
const loadData = () => {
|
|
if (!dataStatic || !map) return;
|
|
|
|
console.log("Initialisiere Marker");
|
|
dataStatic.forEach(gisStatic => {
|
|
|
|
if (filterSystems.includes(gisStatic.System)) {
|
|
const markerOptions = {
|
|
icon: getIcon(gisStatic.Icon),
|
|
test: gisStatic.Link,
|
|
device: gisStatic.Device,
|
|
system: gisStatic.System,
|
|
IdLD: gisStatic.IdLD,
|
|
IdLocation: gisStatic.IdLocation,
|
|
contextmenu: true,
|
|
};
|
|
const marker = L.marker([gisStatic.X, gisStatic.Y], markerOptions);
|
|
marker.addTo(map);
|
|
|
|
// Speichern der Markerreferenz in einem Ref-Objekt
|
|
markersRef.current[gisStatic.IdLD] = marker;
|
|
|
|
// Popup und Event-Listener hinzufügen
|
|
marker.bindPopup(createPopupContent(gisStatic));
|
|
marker.on('click', () => {
|
|
console.log('Marker clicked:', gisStatic.IdLD);
|
|
});
|
|
}
|
|
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, [dataStatic, filterSystems, map]); // Abhängigkeiten, die den Neuladevorgang auslösen
|
|
*/
|
|
|
|
//------------------- loadData end---------------//
|
|
useEffect(() => {
|
|
// Entferne alte Marker
|
|
markers.forEach((marker) => map.removeLayer(marker));
|
|
if (map) {
|
|
const newMarkers = locations.map((location) => {
|
|
const { latitude, longitude } = parsePoint(location.position);
|
|
const marker = L.marker([latitude, longitude], {
|
|
icon: L.icon({
|
|
iconUrl: "/location.svg",
|
|
iconSize: [34, 34],
|
|
iconAnchor: [17, 34],
|
|
popupAnchor: [0, -34],
|
|
}),
|
|
draggable: true,
|
|
id: location.idPoi,
|
|
});
|
|
|
|
// Erstellt einen Popup-Inhalt basierend auf den aktuellen Marker-Daten
|
|
const createPopupContent = () => {
|
|
return `<b>${location.description || "Unbekannt"}</b><br>Type: ${
|
|
location.idPoiTyp || "N/A"
|
|
}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`;
|
|
};
|
|
|
|
// Bindet das Popup mit dem initialen Inhalt
|
|
marker.bindPopup(createPopupContent());
|
|
|
|
marker.on("dragend", function (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);
|
|
});
|
|
});
|
|
|
|
// Fügt den Marker der Karte hinzu
|
|
marker.addTo(map);
|
|
return () => {
|
|
if (map) {
|
|
map.remove();
|
|
}
|
|
};
|
|
return marker;
|
|
});
|
|
// Aktualisiere die Marker-Liste im State
|
|
setMarkers(newMarkers);
|
|
}
|
|
}, [map, locations, onLocationUpdate]);
|
|
|
|
const showAddStationPopup = (e, map) => {
|
|
const popupContent = `
|
|
<form id="addStationForm" class="m-0 p-2 w-full">
|
|
<div class="flex items-center mb-4">
|
|
<label for="name" class="block mr-2 flex-none">Name:</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
placeholder="Name der Station"
|
|
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<label for="type" class="block mr-3 flex-none">Type:</label>
|
|
<input
|
|
type="text"
|
|
id="type"
|
|
name="type"
|
|
placeholder="Typ der Station"
|
|
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
|
|
<input
|
|
type="text"
|
|
id="lat"
|
|
name="lat"
|
|
value="${e.latlng.lat.toFixed(5)}"
|
|
readonly
|
|
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex items-center mb-4">
|
|
<label for="lng" class="block mr-2 flex-none">Längengrad:</label>
|
|
<input
|
|
type="text"
|
|
id="lng"
|
|
name="lng"
|
|
value="${e.latlng.lng.toFixed(5)}"
|
|
readonly
|
|
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
|
|
>
|
|
Station hinzufügen
|
|
</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(map);
|
|
|
|
// Verzögerung hinzufügen, um sicherzustellen, dass das Formular im DOM verfügbar ist
|
|
setTimeout(() => {
|
|
const form = document.getElementById("addStationForm");
|
|
if (form) {
|
|
form.addEventListener("submit", async (event) => {
|
|
event.preventDefault();
|
|
const name = event.target.name.value;
|
|
const type = event.target.type.value;
|
|
const lat = event.target.lat.value;
|
|
const lng = event.target.lng.value;
|
|
|
|
// Hier wird `onAddLocation` mit den Werten aufgerufen, die aus dem Formular gesammelt wurden
|
|
await onAddLocation(name, type, lat, lng);
|
|
map.closePopup();
|
|
});
|
|
}
|
|
}, 10);
|
|
};
|
|
|
|
return <div id="map" ref={mapRef} className="h-screen"></div>;
|
|
};
|
|
|
|
export default MapComponent;
|