iconurl von DB bekommen

.env.local

@@ -1,6 +1,7 @@
 
 DB_HOST=localhost
 #DB_HOST=192.168.10.58
+#DB_HOST=10.10.0.13
 DB_USER=root
 DB_PASSWORD="root#$"
 DB_NAME=talas_v5

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],

pages/api/poi-icons.js

@@ -0,0 +1,36 @@
+// pages/api/poi-icons.js
+import mysql from "mysql";
+
+const dbConfig = {
+  //host: "10.10.0.13",
+  //host: "localhost",
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+const connection = mysql.createConnection(dbConfig);
+connection.connect((err) => {
+  if (err) {
+    console.error("Fehler beim Verbinden:", err.stack);
+    return;
+  }
+});
+export default function handler(req, res) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ error: "Nur GET Methode erlaubt" });
+  }
+
+  const query = `SELECT p.idPoi, i.path
+  FROM poi p
+  JOIN poiTyp pt ON p.idPoiTyp = pt.idPoiTyp
+  JOIN poiicons i ON pt.icon = i.idpoiicons;`;
+  connection.query(query, (error, results) => {
+    if (error) {
+      console.error("Fehler beim Abrufen der icons:", error);
+      return res.status(500).json({ error: "Fehler beim Abrufen der icons" });
+    }
+    res.json(results);
+  });
+}