Rein- und rauszoomen sowie Hier Zentrieren funktion implementieren in Kontxtmenü

components/MapComponent.js

@@ -40,8 +40,6 @@ const MapComponent = () => {
           { text: "Hier zentrieren", callback: centerHere },
         ],
       });
-
-      initialMap.flyTo([53.34399291274182, 7.607860512806846], 12);
       console.log(initialMap);
       L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
         attribution:
@@ -53,9 +51,6 @@ const MapComponent = () => {
   }, [mapRef, map]);
 
   console.log(map);
-  if (map) {
-    map.flyTo([53.34399291274182, 7.607860512806846], 18);
-  }
   //-----Kontextmenu----------------
   const newLink = (e) => {
     try {
@@ -83,32 +78,14 @@ const MapComponent = () => {
   };
 
   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
-    );
+    initialMap.flyTo(e.latlng, 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);
+    fly();
+  };
+  const centerHere = (e) => {
+    initialMap.panTo(e.latlng);
   };
 
   const showCoordinates = (e) => {
@@ -156,9 +133,40 @@ const MapComponent = () => {
       .openOn(e.relatedTarget);
   };
 
-  const centerHere = (e) => {
-    map.panTo(e.latlng);
-  };
+  function fly(stationValue) {
+    var x = 51.41321407879154;
+    var y = 7.739617925303934;
+    var zoom = 7;
+
+    /*  for (var i = 0; i < dataStaticlength; i++) {
+      var gisStatics = dataStatic[i];
+      if (stationValue === gisStatics.Area_Name) {
+        //console.log(gisStatics.X+","+gisStatics.Y);
+        x = gisStatics.X;
+        y = gisStatics.Y;
+      }
+    }
+    if (y === 7.739617925303934) {
+      zoom = 8;
+    } */
+    initialMap.flyTo([x, y], zoom);
+
+    /* var popup = new L.Popup();
+    oms.addListener("click", function (marker) {
+      popup.setContent(marker.desc);
+      popup.setLatLng(marker.getLatLng());
+      map.openPopup(popup);
+    });
+
+    for (var i = 0; i < window.mapData.length; i++) {
+      var datum = window.mapData[i];
+      var loc = new L.LatLng(datum.lat, datum.lon);
+      var marker = new L.Marker(loc);
+      marker.desc = datum.d;
+      map.addLayer(marker);
+      //oms.addMarker(marker);  // <-- here
+    } */
+  }
 
   return (
     <div