fix: POI-Icons erscheinen nun korrekt je nach Typ
- Fehler behoben: Alle POIs zeigten immer dasselbe Icon (z. B. poi-marker-icon-4.png) - Ursache: In setupPOIs.js wurde iconPath fälschlich anhand von idPoiTyp gesucht, obwohl nur idPoi verfügbar war - Lösung: Icon-Zuordnung erfolgt jetzt über Mapping idPoi → path (Map) - Kein Backend-Änderung nötig - Standard-Icon wird verwendet, wenn kein Eintrag im Mapping vorhanden ist # Version: 1.1.166
This commit is contained in:
@@ -1,22 +1,13 @@
|
||||
// utils/setupPOIs.js
|
||||
import { findClosestPoints } from "./geometryUtils";
|
||||
import handlePoiSelect from "./handlePoiSelect";
|
||||
import { updateLocationInDatabaseService } from "../services/database/updateLocationInDatabaseService";
|
||||
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
|
||||
import { parsePoint } from "./geometryUtils";
|
||||
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
|
||||
import startIcon from "../components/gisPolylines/icons/StartIcon";
|
||||
import endIcon from "../components/gisPolylines/icons/EndIcon";
|
||||
import { redrawPolyline } from "./polylines/redrawPolyline";
|
||||
import { openInNewTab } from "../utils/openInNewTab";
|
||||
import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines"; // Importiere die Funktionen
|
||||
import { handleEditPoi } from "./poiUtils";
|
||||
import { updateLocationInDatabaseService } from "../services/database/updateLocationInDatabaseService";
|
||||
import { setSelectedPoi, clearSelectedPoi } from "../redux/slices/selectedPoiSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
|
||||
export const setupPOIs = async (
|
||||
map,
|
||||
pois,
|
||||
poiData,
|
||||
poiData, // enthält aktuell: idPoi + path
|
||||
poiTypMap,
|
||||
userRights,
|
||||
poiLayerRef,
|
||||
@@ -32,8 +23,16 @@ export const setupPOIs = async (
|
||||
deviceName,
|
||||
dispatch
|
||||
) => {
|
||||
const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
|
||||
userRights = editMode ? userRights : undefined; // Nur Berechtigungen anwenden, wenn editMode true ist
|
||||
const editMode = localStorage.getItem("editMode") === "true";
|
||||
userRights = editMode ? userRights : undefined;
|
||||
|
||||
// ✅ Mapping vorbereiten: idPoi → icon path
|
||||
const iconMap = new Map();
|
||||
poiData.forEach((item) => {
|
||||
if (item.idPoi && item.path) {
|
||||
iconMap.set(item.idPoi, item.path);
|
||||
}
|
||||
});
|
||||
|
||||
if (map && poiLayerRef.current) {
|
||||
map.removeLayer(poiLayerRef.current);
|
||||
@@ -45,8 +44,9 @@ export const setupPOIs = async (
|
||||
const poiTypName = poiTypMap.get(poi.idPoiTyp) || "Unbekannt";
|
||||
const canDrag = userRights ? userRights.some((r) => r.IdRight === 56) : false;
|
||||
|
||||
const matchingIcon = poiData.find((poi) => poi.idPoi === poi.idPoi);
|
||||
const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";
|
||||
// ✅ Icon korrekt über idPoi auflösen
|
||||
const iconPath = iconMap.get(poi.idPoi);
|
||||
const iconUrl = iconPath ? `/img/icons/pois/${iconPath}` : "/img/icons/pois/default-icon.png";
|
||||
|
||||
const marker = L.marker([latitude, longitude], {
|
||||
icon: L.icon({
|
||||
@@ -64,7 +64,6 @@ export const setupPOIs = async (
|
||||
link: poi.link,
|
||||
});
|
||||
|
||||
// Nur das Kontextmenü "POI Bearbeiten" hinzufügen, wenn editMode true ist
|
||||
if (editMode) {
|
||||
marker.bindContextMenu({
|
||||
contextmenu: true,
|
||||
@@ -88,41 +87,22 @@ export const setupPOIs = async (
|
||||
`);
|
||||
|
||||
marker.on("mouseover", function () {
|
||||
console.log("Device Name in setupPOIs.js :", marker); // Debugging
|
||||
dispatch(setSelectedPoi(poi)); // POI in Redux setzen
|
||||
|
||||
handlePoiSelect(
|
||||
{
|
||||
id: poi.idPoi,
|
||||
deviceId: poi.idLD,
|
||||
idPoiTyp: poi.idPoiTyp,
|
||||
typ: poiTypName,
|
||||
description: poi.description,
|
||||
idLD: poi.idLD,
|
||||
},
|
||||
setSelectedPoi,
|
||||
setLocationDeviceData,
|
||||
setDeviceName, // Stelle sicher, dass dies korrekt funktioniert
|
||||
poiLayerRef,
|
||||
poiTypMap
|
||||
);
|
||||
|
||||
dispatch(setSelectedPoi(poi));
|
||||
localStorage.setItem("lastElementType", "marker");
|
||||
localStorage.setItem("markerLink", this.options.link);
|
||||
});
|
||||
|
||||
marker.on("mouseout", function () {
|
||||
dispatch(clearSelectedPoi()); // POI aus Redux entfernen
|
||||
dispatch(clearSelectedPoi());
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
marker.on("dragend", (e) => {
|
||||
console.log("Marker wurde verschoben in setupPOIs");
|
||||
if (canDrag) {
|
||||
const newLat = e.target.getLatLng().lat;
|
||||
const newLng = e.target.getLatLng().lng;
|
||||
const markerId = e.target.options.id;
|
||||
updateLocationInDatabaseService(markerId, newLat, newLng).then(() => {});
|
||||
updateLocationInDatabaseService(markerId, newLat, newLng);
|
||||
} else {
|
||||
console.error("Drag operation not allowed");
|
||||
}
|
||||
@@ -132,7 +112,7 @@ export const setupPOIs = async (
|
||||
marker.addTo(poiLayerRef.current);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing a location:", error);
|
||||
console.error("❌ Fehler bei POI Marker:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user