feat: Animiertes Zoomen mit dynamischer Dauer hinzugefügt

- Leaflet `flyTo` für sanfte Zoom-Animationen implementiert.
- Zoom-Stufen auf max. 15 und min. 6 begrenzt.
- Dauer der Animation dynamisch auf 0.5s pro Zoomstufe gesetzt.
- Verbesserte Benutzererfahrung durch flüssige Zoom-Bewegungen.

components/useMapContextMenu.js

@@ -17,7 +17,15 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopu
       text: "Reinzoomen",
       icon: "img/zoom_in.png",
       callback: (e) => {
-        map.setZoom(map.getZoom() + 1);
+        const currentZoom = map.getZoom();
+        const newZoom = Math.min(15, currentZoom + 3); // Stellt sicher, dass max. 15 erreicht wird
+        const zoomDifference = Math.abs(newZoom - currentZoom); // Anzahl der Zoom-Stufen
+        const duration = zoomDifference * 0.5; // Pro Stufe 0.5 Sekunden
+
+        map.flyTo(map.getCenter(), newZoom, {
+          animate: true,
+          duration: duration,
+        });
       },
     });
 
@@ -25,7 +33,15 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopu
       text: "Rauszoomen",
       icon: "img/zoom_out.png",
       callback: () => {
-        map.setZoom(map.getZoom() - 1);
+        const currentZoom = map.getZoom();
+        const newZoom = Math.max(6, currentZoom - 3); // Stellt sicher, dass min. 6 erreicht wird
+        const zoomDifference = Math.abs(newZoom - currentZoom); // Anzahl der Zoom-Stufen
+        const duration = zoomDifference * 0.5; // Pro Stufe 0.5 Sekunden
+
+        map.flyTo(map.getCenter(), newZoom, {
+          animate: true,
+          duration: duration,
+        });
       },
     });