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.
This commit is contained in:
@@ -9,7 +9,7 @@ DB_PORT=3306
|
|||||||
# Public Settings (Client braucht IP/Domain)
|
# Public Settings (Client braucht IP/Domain)
|
||||||
NEXT_PUBLIC_SERVER_URL="http://192.168.10.33" # oder evtl. später https://nodemap.firma.de
|
NEXT_PUBLIC_SERVER_URL="http://192.168.10.33" # oder evtl. später https://nodemap.firma.de
|
||||||
NEXT_PUBLIC_ENABLE_GEOCODER=true
|
NEXT_PUBLIC_ENABLE_GEOCODER=true
|
||||||
NEXT_PUBLIC_USE_MOCK_API=true
|
NEXT_PUBLIC_USE_MOCK_API=false
|
||||||
NEXT_PUBLIC_DEBUG_LOG=true
|
NEXT_PUBLIC_DEBUG_LOG=true
|
||||||
|
|
||||||
# für Polylines/kabelstecken -> in Konextmenü "Station öffnen" "
|
# für Polylines/kabelstecken -> in Konextmenü "Station öffnen" "
|
||||||
|
|||||||
@@ -17,7 +17,15 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopu
|
|||||||
text: "Reinzoomen",
|
text: "Reinzoomen",
|
||||||
icon: "img/zoom_in.png",
|
icon: "img/zoom_in.png",
|
||||||
callback: (e) => {
|
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",
|
text: "Rauszoomen",
|
||||||
icon: "img/zoom_out.png",
|
icon: "img/zoom_out.png",
|
||||||
callback: () => {
|
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,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
// /config/appVersion
|
// /config/appVersion
|
||||||
export const APP_VERSION = "1.1.29";
|
export const APP_VERSION = "1.1.30";
|
||||||
|
|||||||
Reference in New Issue
Block a user