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) => {