statusInfo für DE und etc.
This commit is contained in:
ISA
@@ -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 }) => {
|
||||
</form>
|
||||
`;
|
||||
|
||||
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(
|
||||
`<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, closeButton: true }
|
||||
);
|
||||
marker.bindTooltip(
|
||||
`<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ 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) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
// Ein Popup und Tooltip mit Informationen zur Station binden
|
||||
marker.bindPopup(
|
||||
`<b>Station: ${p.LD_Name}</b><br>Device: ${p.Device}`
|
||||
`<b>${station.LD_Name}</b><br>
|
||||
${station.Device}<br>
|
||||
${station.Area_Short} (${station.Area_Name})<br>
|
||||
${station.Location_Short} (${station.Location_Name})<br>${statusInfo}`
|
||||
);
|
||||
/* marker.bindTooltip(
|
||||
`<div class="tooltip-content">Station: ${p.LD_Name}</div>`,
|
||||
{
|
||||
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) => {
|
||||
|
||||
Reference in New Issue
Block a user