Daten abrufen von MySQL-DB-Tabelle poityp, um später in Dropdownmenü einzufügen für dieStation hinzufügen

components/MapComponent.js

@@ -197,9 +197,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
   //------------------------------------------
 
-  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
-  //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
+  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; // ich habe kein mapTiles lokal
+  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; // auf dem Server local
+  //const onlineTileLayer = "TileMap/mapTiles/{z}/{x}/{y}.png";
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -389,7 +390,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     const popupContent = L.DomUtil.create("div");
     popupContent.innerHTML = `
   <form id="addStationForm" class="m-0 p-2 w-full">
-      <!-- Kommantar von hier
+      
         <div class="flex items-center mb-4">
 
         <label for="idPoi" class="block mr-2 flex-none">ID Poi:</label>
@@ -411,7 +412,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
       />
       </div>
-      Kommantar bis hier-->
+     
   <div class="flex items-center mb-4">      
     <label for="name" class="block mr-2 flex-none">Name:</label>
     <input
@@ -1507,6 +1508,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, zoomTrigger]);
   //------------------------------------------
+  // Funktion zum Abrufen der poiTyp Daten
+  const fetchPoiTyp = async () => {
+    try {
+      const response = await fetch("/api/poiTyp");
+      const data = await response.json();
+      console.log("Fetched poiTyp:", data);
+    } catch (error) {
+      console.error("Error fetching poiTyp data:", error);
+    }
+  };
+
+  useEffect(() => {
+    fetchPoiTyp(); // Rufen Sie diese Funktion beim Laden der Komponente auf
+  }, []);
+
+  //----------------------------------------------------
 
   return (
     <>

pages/api/poiTyp.js

@@ -0,0 +1,37 @@
+// pages/api/poiTyp.js
+import mysql from "mysql";
+
+const dbConfig = {
+  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,
+};
+
+export default function handler(req, res) {
+  if (req.method === "GET") {
+    console.log("Empfangene Query-Parameter:", req.query); // Gibt alle empfangenen Query-Parameter aus
+
+    const connection = mysql.createConnection(dbConfig);
+    const query = "SELECT * FROM poiTyp"; // Vereinfachte Abfrage zum Testen
+
+    connection.query(query, (error, results) => {
+      connection.end();
+
+      if (error) {
+        console.error("Fehler beim Abfragen der Datenbank:", error);
+        return res.status(500).json({ error: "Ein Fehler ist aufgetreten" });
+      }
+
+      if (results.length === 0) {
+        return res.status(404).json({ message: "Keine Einträge gefunden" });
+      }
+
+      res.status(200).json(results);
+    });
+  } else {
+    res.setHeader("Allow", ["GET"]);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}