Added animate to method

SpatialFocus · Apr 17, 2024 · 3ea1573 · 3ea1573
1 parent 4229d21
commit 3ea1573
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs
@@ -525,6 +525,16 @@ public async Task SetCenter(Coordinate center)
         if (_module != null) await _module.InvokeVoidAsync("MapOLCenter", _mapId, center);
     }
 
+    /// <summary>
+    ///     Animated transition to the given center and zoom level
+    /// </summary>
+    /// <param name="center">Center Coordinates</param>
+    /// <param name="zoom">zoom level</param>
+    public async Task AnimateTo(Coordinate center, double zoom)
+    {
+        if (_module != null) await _module.InvokeVoidAsync("MapOLAnimateTo", _mapId, center, zoom);
+    }
+
     /// <summary>
     ///     Sets the rotation of the map.
     /// </summary>

diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
@@ -12,6 +12,10 @@ export function MapOLCenter(mapId, point) {
     _MapOL[mapId].setCenter(point);
 }
 
+export function MapOLAnimateTo(mapId, center, zoom) {
+    _MapOL[mapId].animateTo(center, zoom);
+}
+
 export function MapOLRotate(mapId, rotation) {
     _MapOL[mapId].setRotation(rotation);
 }
@@ -599,13 +603,20 @@ MapOL.prototype.setZoomToExtent = function (extent) {
 };
 
 MapOL.prototype.setCenter = function (point) {
-    this.Map.getView().animate({
-        center: ol.proj.transform(point,
-            this.Options.coordinatesProjection,
-            this.Map.getView().getProjection())
-        }, { duration: 1000 });
+    this.Map.getView().setCenter(ol.proj.transform(point,
+        this.Options.coordinatesProjection,
+        this.Map.getView().getProjection()));
 };
 
+MapOL.prototype.animateTo = function (point, zoom) {
+        this.Map.getView().animate({
+            center: ol.proj.transform(point,
+                this.Options.coordinatesProjection,
+                this.Map.getView().getProjection()),
+            zoom: zoom
+        }, { duration: 1000 });
+}
+
 MapOL.prototype.setRotation = function (rotation) {
     this.Map.getView().setRotation(rotation);
 };