zoomIn, zoomOut, und centerHere implemen

components/MapComponent.js

@@ -22,7 +22,14 @@ const MapComponent = () => {
       initialMap.on("contextmenu", (event) => {
         L.popup()
           .setLatLng(event.latlng)
-          .setContent('<p><button onclick="zoomIn()">Zoom in</button></p>')
+          .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);
       });
 
@@ -30,6 +37,14 @@ const MapComponent = () => {
         initialMap.zoomIn();
       };
 
+      window.zoomOut = () => {
+        initialMap.zoomOut();
+      };
+
+      window.centerHere = (lat, lng) => {
+        initialMap.panTo(new L.LatLng(lat, lng));
+      };
+
       L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
         attribution:
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',