diff --git a/components/MapComponent.js b/components/MapComponent.js index e6caf18b2..618e8daae 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -365,7 +365,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //-----Kontextmenu----ende------------ // Ensure this function is only called when map is initialized and available const showAddStationPopup = (e) => { - if (!newMap) { + if (!initMap) { return; } @@ -427,7 +427,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { `; - L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(newMap); + L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initMap); // Attach event listener here L.DomEvent.on(popupContent, "submit", handleSubmit); @@ -541,6 +541,50 @@ const MapComponent = ({ locations, onLocationUpdate }) => { fetchData(); }, []); + // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs + useEffect(() => { + // Remove old markers + if (map) { + /* map.eachLayer((layer) => { + if (layer instanceof L.Marker) { + map.removeLayer(layer); + } + }); */ + // Add new markers + locations.forEach((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, + }); + marker.bindPopup( + `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, + { permanent: false, closeButton: true } + ); + marker.bindTooltip( + `
${location.description || "Unbekannt"}
Type: ${location.idPoiTyp || "N/A"}
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
`, + { permanent: false, direction: "top", offset: [0, -30] } + ); + 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); + }); + }); + marker.addTo(map); + }); + } + }, [map, locations, onLocationUpdate]); + + //------------------------------------------ //----------------------------------------------------------------- // TALAS Marker hinzufügen @@ -552,33 +596,31 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Daten von einer externen Quelle laden useEffect(() => { async function fetchData() { + if (!map) return; try { - const responses = await Promise.all([ - fetch(config.mapGisStationsStaticDistrictUrl), - fetch(config.mapGisStationsStatusDistrictUrl), - ]); - const [jsonResponse, statusResponse] = await Promise.all( - responses.map((res) => res.json()) - ); + // Erster Fetch-Aufruf + const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); + const jsonResponse = await response1.json(); - if ( - jsonResponse && - jsonResponse.Points && - statusResponse && - statusResponse.Statis - ) { + // Zweiter Fetch-Aufruf + const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); + const statusResponse = await response2.json(); + + if (jsonResponse.Points && statusResponse.Statis) { const statisMap = new Map( statusResponse.Statis.map((s) => [s.IdLD, s]) ); + console.log("statisMap", statisMap); + let markersData = jsonResponse.Points.filter( - (p) => p.System === 1 - ).map((p) => { - const statis = statisMap.get(p.IdLD); - const marker = L.marker([p.X, p.Y], { + (station) => station.System === 1 + ).map((station) => { + const statis = statisMap.get(station.IdLD); + const marker = L.marker([station.X, station.Y], { icon: L.icon({ iconUrl: statis - ? `img/icons/${statis.Na}-marker-icon-${p.Icon}.png` - : `img/icons/marker-icon-${p.Icon}.png`, + ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` + : `img/icons/marker-icon-${station.Icon}.png`, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], @@ -589,21 +631,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => { if (statis) { marker.on("add", () => marker.bounce(3)); } - + // String-Zusammenstellung für das Popup-Infofenster + const matchingStatuses = statusResponse.Statis.filter( + (status) => status.IdLD === station.IdLD + ); + let statusInfo = matchingStatuses + .reverse() + .map( + (status) => ` +
+
+ ${status.Me} (${status.Na}) +
+ ` + ) + .join(""); // Ein Popup und Tooltip mit Informationen zur Station binden marker.bindPopup( - `Station: ${p.LD_Name}
Device: ${p.Device}` + `${station.LD_Name}
+ ${station.Device}
+ ${station.Area_Short} (${station.Area_Name})
+ ${station.Location_Short} (${station.Location_Name})
${statusInfo}` ); - /* marker.bindTooltip( - `
Station: ${p.LD_Name}
`, - { - permanent: false, - direction: "top", - } - ); */ return marker; }); + setTalasMarkers(markersData); } } catch (error) { @@ -611,11 +664,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } } - if (!map) return; - fetchData(); }, [map]); // Abhängigkeit nur auf `map` setzen - + //-------------------------------------------------------------------------------- useEffect(() => { if (map && talasMarkers.length) { talasMarkers.forEach((marker) => {