Kontextmenü Reinzoomen zoomIn Funktion implementieren

components/MapComponent.js

@@ -1,60 +1,165 @@
 import React, { useEffect, useRef, useState } from "react";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
-
+import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
+import "leaflet-contextmenu";
 const MapComponent = () => {
   const mapRef = useRef(null);
   const [map, setMap] = useState(null);
 
-  function addMarker(map) {
-    const marker = L.marker([53.111111, 8.4625]).addTo(map);
-    marker.bindPopup("<b>Hallo Welt!</b><br>Ich bin ein Popup.").openPopup();
-  }
+  let initialMap = [];
 
   useEffect(() => {
     if (mapRef.current && !map) {
-      const initialMap = L.map(mapRef.current, {
+      // Initialisiere die Karte ohne die Standard-Zoomsteuerung
+      initialMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 10,
         zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
+        contextmenu: true,
+        contextmenuItems: [
+          { text: "Station hinzufügen", callback: showAddStationPopup },
+          {
+            text: "Station öffnen (Tab)",
+            icon: "img/screen_new.png",
+            callback: newLink,
+          },
+          {
+            text: "Station öffnen",
+            icon: "img/screen_same.png",
+            callback: sameLink,
+          },
+          {
+            text: "Koordinaten",
+            icon: "img/screen_same.png",
+            callback: lata,
+          },
+          "-", // Divider
+          { text: "Reinzoomen", callback: zoomIn },
+          { text: "Rauszoomen", callback: zoomOut },
+          { text: "Hier zentrieren", callback: centerHere },
+        ],
       });
 
-      initialMap.on("contextmenu", (event) => {
-        L.popup()
-          .setLatLng(event.latlng)
-          .setContent(
-            `
-            <p>
-              <button onclick="zoomIn()">Zoom in</button>
-              <button onclick="zoomOut()">Zoom out</button>
-              <button onclick="centerHere(${event.latlng.lat}, ${event.latlng.lng})">Hier zentrieren</button>
-            </p>`
-          )
-          .openOn(initialMap);
-      });
-
-      window.zoomIn = () => {
-        initialMap.zoomIn();
-      };
-
-      window.zoomOut = () => {
-        initialMap.zoomOut();
-      };
-
-      window.centerHere = (lat, lng) => {
-        initialMap.panTo(new L.LatLng(lat, lng));
-      };
-
+      initialMap.flyTo([53.34399291274182, 7.607860512806846], 12);
+      console.log(initialMap);
       L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
         attribution:
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       }).addTo(initialMap);
-      addMarker(initialMap);
 
       setMap(initialMap);
     }
   }, [mapRef, map]);
 
+  console.log(map);
+  if (map) {
+    map.flyTo([53.34399291274182, 7.607860512806846], 18);
+  }
+  //-----Kontextmenu----------------
+  const newLink = (e) => {
+    try {
+      if (!e.relatedTarget || !e.relatedTarget.options) {
+        throw new Error("relatedTarget or options not defined");
+      }
+      alert("Neues Fenster: " + e.relatedTarget.options.test);
+      window
+        .open(`../devices/${e.relatedTarget.options.test}`, "_blank")
+        .focus();
+    } catch (error) {
+      console.error("Failed in newLink function:", error);
+    }
+  };
+
+  const sameLink = (e) => {
+    alert(e.relatedTarget.options.test);
+    window
+      .open("../devices/" + e.relatedTarget.options.test, "_parent")
+      .focus();
+  };
+
+  const lata = (e) => {
+    alert("Breitengrad: " + e.latlng.lat);
+  };
+
+  const zoomIn = (e) => {
+    console.log(e);
+    console.log(initialMap);
+    console.log("zoomIn");
+    /* if (!map) {
+      console.error("Karte ist noch nicht initialisiert in zoomIn.");
+      return;
+    } */
+
+    initialMap.flyTo(
+      {
+        lat: 53.34399291274182,
+        lng: 7.607860512806846,
+      },
+      12
+    );
+  };
+
+  const zoomOut = (e) => {
+    if (!map) {
+      console.error("Karte ist noch nicht initialisiert in zoomOut.");
+      return;
+    }
+    // Annahme: Du willst beim Rauszoomen die aktuelle Position halten
+    // und nur den Zoom-Level ändern. Hier reduzieren wir den Zoom-Level um 1.
+    const currentZoom = map.getZoom();
+    map.flyTo(e.latlng, map.getZoom() - 1);
+  };
+
+  const showCoordinates = (e) => {
+    alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng);
+  };
+  const showData = (e) => {
+    console.log(e);
+  };
+  const showTalas = (e) => {
+    map.addLayer(TALAS);
+    loadData();
+  };
+  const hideTalas = (e) => {
+    map.removeLayer(TALAS);
+    loadData();
+  };
+  const showGSM = (e) => {
+    map.addLayer(GMA);
+    loadData();
+  };
+  const hideGSM = (e) => {
+    map.removeLayer(GMA);
+    loadData();
+  };
+  //-----Kontextmenu----ende------------
+
+  const showAddStationPopup = (e) => {
+    const popupContent = L.DomUtil.create("form");
+    popupContent.innerHTML = `
+      <div style="margin: 0; padding: 0; width: 200px;">
+        <label>Name:</label><input type="text" id="name" name="name" placeholder="Name der Station"><br>
+        <label>Typ:</label><input type="text" id="type" name="type" placeholder="Typ der Station"><br>
+        <label>Breitengrad:</label><input type="text" id="lat" name="lat" value="${e.latlng.lat.toFixed(
+          5
+        )}" readonly><br>
+        <label>Längengrad:</label><input type="text" id="lng" name="lng" value="${e.latlng.lng.toFixed(
+          5
+        )}" readonly><br>
+        <button type="submit">Station hinzufügen</button>
+      </div>
+    `;
+    L.popup()
+      .setLatLng(e.latlng)
+      .setContent(popupContent)
+      .openOn(e.relatedTarget);
+  };
+
+  const centerHere = (e) => {
+    map.panTo(e.latlng);
+  };
+
   return (
     <div
       id="map"