#29 Allow Zoom and Center to be set with the property on Map.

Author: AlexKven

BlazorLeaflet/BlazorLeaflet.Samples/Pages/Index.razor

@@ -1,4 +1,4 @@
-@page "/"
+@page "/"
 @using System.Drawing
 @using BlazorLeaflet.Models
 @inject CityService cityService
@@ -14,6 +14,7 @@
     <button class="btn btn-primary mb-2" @onclick="FindCity">Search</button>
     <button class="btn btn-primary mb-2" @onclick="ZoomMap">Zoom</button>
     <button class="btn btn-primary mb-2" @onclick="PanToNY">Pan to New York</button>
+    <button class="btn btn-primary mb-2" @onclick="SetToNY">Set center at New York</button>
 </div>
 
 <div style="height: 500px; width: 500px;">
@@ -102,12 +103,18 @@
 
     private void ZoomMap()
     {
-        _map.FitBounds(new PointF(45.943f, 24.967f), new PointF(46.943f, 25.967f), maxZoom: 5f);
-    }
-
-    private void PanToNY()
-    {
-        _map.PanTo(new PointF(40.713185f, -74.0072333f), animate: true, duration: 10f);
+        _map.FitBounds(new PointF(45.943f, 24.967f), new PointF(46.943f, 25.967f), maxZoom: 5f);
+    }
+
+    private void PanToNY()
+    {
+        _map.PanTo(new PointF(40.713185f, -74.0072333f), animate: true, duration: 10f);
+    }
+
+    private void SetToNY()
+    {
+        _map.Center = new LatLng(new PointF(40.713185f, -74.0072333f));
+        _map.Zoom = 15;
     }
 
 }

BlazorLeaflet/BlazorLeaflet/LeafletInterops.cs

@@ -88,6 +88,11 @@ public static ValueTask<LatLng> GetCenter(IJSRuntime jsRuntime, string mapId) =>
         public static ValueTask<float> GetZoom(IJSRuntime jsRuntime, string mapId) =>
             jsRuntime.InvokeAsync<float>($"{_BaseObjectContainer}.getZoom", mapId);
 
+        public static async Task SetZoom(IJSRuntime jsRuntime, string mapId, float zoomLevel)
+        {
+            await jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.setZoom", mapId, zoomLevel);
+        }
+
         public static ValueTask ZoomIn(IJSRuntime jsRuntime, string mapId, MouseEventArgs e) =>
             jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.zoomIn", mapId, e);
 

BlazorLeaflet/BlazorLeaflet/Map.cs

@@ -16,15 +16,38 @@ namespace BlazorLeaflet
 {
     public class Map
     {
+        private LatLng _Center = new LatLng();
         /// <summary>
-        /// Initial geographic center of the map
+        /// Geographic center of the map
         /// </summary>
-        public LatLng Center { get; set; } = new LatLng();
+        /// 
+        public LatLng Center
+        {
+            get => _Center;
+            set
+            {
+                _Center = value;
+                if (_isInitialized)
+                    RunTaskInBackground(async () => await LeafletInterops.PanTo(
+                        _jsRuntime, Id, value.ToPointF(), false, 0, 0, false));
+            }
+        }
 
+        private float _Zoom;
         /// <summary>
-        /// Initial map zoom level
+        /// Map zoom level
         /// </summary>
-        public float Zoom { get; set; }
+        public float Zoom
+        {
+            get => _Zoom;
+            set
+            {
+                _Zoom = value;
+                if (_isInitialized)
+                    RunTaskInBackground(async () => await LeafletInterops.SetZoom(
+                        _jsRuntime, Id, value));
+            }
+        }
 
         /// <summary>
         /// Minimum zoom level of the map. If not specified and at least one 
@@ -84,6 +107,18 @@ public void RaiseOnInitialized()
             OnInitialized?.Invoke();
         }
 
+        private async void RunTaskInBackground(Func<Task> task)
+        {
+            try
+            {
+                await task();
+            }
+            catch (Exception ex)
+            {
+                NotifyBackgroundExceptionOccurred(ex);
+            }
+        }
+
         /// <summary>
         /// Add a layer to the map.
         /// </summary>
@@ -195,6 +230,17 @@ public async Task<float> GetZoom() =>
         /// </summary>
         public async Task ZoomOut(MouseEventArgs e) => await LeafletInterops.ZoomOut(_jsRuntime, Id, e);
 
+        private async Task UpdateZoom()
+        {
+            _Zoom = await GetZoom();
+        }
+
+        private async Task UpdateCenter()
+        {
+            
+            _Center = await GetCenter();
+        }
+
         #region events
 
         public delegate void MapEventHandler(object sender, Event e);
@@ -238,11 +284,31 @@ public async Task<float> GetZoom() =>
 
         public event MapEventHandler OnZoomEnd;
         [JSInvokable]
-        public void NotifyZoomEnd(Event e) => OnZoomEnd?.Invoke(this, e);
+        public async void NotifyZoomEnd(Event e)
+        {
+            try
+            {
+                await UpdateZoom();
+            }
+            finally
+            {
+                OnZoomEnd?.Invoke(this, e);
+            }
+        }
 
         public event MapEventHandler OnMoveEnd;
         [JSInvokable]
-        public void NotifyMoveEnd(Event e) => OnMoveEnd?.Invoke(this, e);
+        public async void NotifyMoveEnd(Event e)
+        {
+            try
+            {
+                await UpdateCenter();
+            }
+            finally
+            {
+                OnMoveEnd?.Invoke(this, e);
+            }
+        }
 
         public event MouseEventHandler OnMouseMove;
         [JSInvokable]
@@ -264,6 +330,10 @@ public async Task<float> GetZoom() =>
         [JSInvokable]
         public void NotifyPreClick(MouseEvent eventArgs) => OnPreClick?.Invoke(this, eventArgs);
 
+        public event EventHandler<Exception> BackgroundExceptionOccurred;
+        private void NotifyBackgroundExceptionOccurred(Exception exception) =>
+            BackgroundExceptionOccurred?.Invoke(this, exception);
+
         #endregion events
 
         #region InteractiveLayerEvents

BlazorLeaflet/BlazorLeaflet/Models/Bounds.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Runtime.Serialization;
+using System.Text;
+
+namespace BlazorLeaflet.Models
+{
+    public class Bounds
+    {
+        [DataMember(Name = "_northEast")]
+        public LatLng NorthEast { get; set; }
+
+        [DataMember(Name = "_southWest")]
+        public LatLng SouthWest { get; set; }
+
+        public Bounds() { }
+        public Bounds(LatLng southWest, LatLng northEast)
+        {
+            NorthEast = northEast;
+            SouthWest = southWest;
+        }
+
+        public override string ToString() =>
+            $"NE: {NorthEast.Lat} N, {NorthEast.Lng} E; SW: {SouthWest.Lat} N, {SouthWest.Lng} E";
+    }
+}

BlazorLeaflet/BlazorLeaflet/wwwroot/leafletBlazorInterops.js

@@ -1,4 +1,4 @@
-maps = {};
+maps = {};
 layers = {};
 
 window.leafletBlazor = {
@@ -221,6 +221,12 @@ window.leafletBlazor = {
         if (map.getZoom() > map.getMinZoom()) {
             map.zoomOut(map.options.zoomDelta * (e.shiftKey ? 3 : 1));
         }
+    },
+    getBounds: function (mapId) {
+        return maps[mapId].getBounds();
+    },
+    setZoom: function (mapId, zoomLevel) {
+        maps[mapId].setZoom(zoomLevel);
     }
 };