iconurl von DB bekommen

components/MapComponent.js

@@ -1162,6 +1162,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   //          poiLayerRef(poiDbLayer)  POI   hinzufügen
   //--------------------------------------------
+  const [poiData, setPoiData] = useState([]);
+
+  useEffect(() => {
+    const fetchPoiData = async () => {
+      const response = await fetch("/api/poi-icons");
+      const data = await response.json();
+      setPoiData(data);
+      console.log("poiData icons:", data);
+    };
+
+    fetchPoiData();
+  }, []);
 
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded) {
@@ -1172,13 +1184,22 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         const { latitude, longitude } = parsePoint(location.position);
         const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
         const deviceName = await fetchDeviceNameById(location.idLD);
+        console.log("location.icon:", location);
 
         // Check if user has the right to drag the marker
         const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes
-
+        // Finde das passende Icon aus poiData
+        const matchingIcon = poiData.find(
+          (poi) => poi.idPoi === location.idPoi
+        );
+        const iconUrl = matchingIcon
+          ? `/img/icons/pois/${matchingIcon.path}`
+          : "/img/icons/pois/default-icon.png";
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
             iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
+            //iconUrl: `/img/icons/pois/poi-marker-icon-${location.icon}.png`, //die kommen nicht aus poi sonder aus poityp tabelle
+            iconUrl: iconUrl,
             iconSize: [25, 41],
             iconAnchor: [12, 41],
             popupAnchor: [1, -34],