Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gerät in Popup anzeigen

Browse Source
This commit is contained in:
ISA
2024-05-27 11:05:48 +02:00
parent 93c8624d12
commit bf4d86406b
5 changed files with 32 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/MapComponent.js
View File

@@ -78,8 +78,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
const zoomTrigger = useRecoilValue(zoomTriggerState);
const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
@@ -888,6 +888,23 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Beispiel: openEditModal(markerId);
}
//------------------------------------------
const fetchDeviceNameById = async (idLD) => {
try {
const response = await fetch(`/api/locationDeviceNameById?idLD=${idLD}`);
const data = await response.json();
if (response.ok) {
return data.name;
} else {
throw new Error(data.error || "Gerät nicht gefunden");
}
} catch (error) {
console.error("Fehler beim Abrufen des Gerätenamens:", error);
return "Unbekannt";
}
};
//------------------------------------------
// poiLayerRef(poiDbLayer) POI hinzufügen
//--------------------------------------------
@@ -899,14 +916,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
poiLayerRef.current = new L.LayerGroup().addTo(map);
// Fügen Sie die aktualisierten Marker hinzu
locations.forEach((location) => {
locations.forEach(async (location) => {
const { latitude, longitude } = parsePoint(location.position);
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
console.log("poiTypName in poiLayer:", poiTypName);
//console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
console.log("location.idPoiTyp poiLayer:", location);
console.log("location.idPoiTyp:", location.idPoiTyp);
const deviceName = await fetchDeviceNameById(location.idLD);
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
@@ -923,7 +940,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
{
text: "POI Bearbeiten", //git stash save "POI Bearbeiten"
icon: "/img/edit_icon.png",
icon: "/img/poi-edit.png",
callback: () => handleEditPoi(marker),
},
],
@@ -934,7 +951,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${poiTypName}<br>
${deviceName}<br> <!-- Gerät:-->
${poiTypName}<br> <!-- Typ:-->
</div>
`);
@@ -954,7 +972,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
//Informationen an handlePoiSelect übergeben
handlePoiSelect(poiData);
console.log("poiData in MapComponent.js:", poiData);
});
marker.on("mouseout", function () {
this.closePopup();