#30 Add bounds property to map

BlazorLeaflet/BlazorLeaflet.Samples/Pages/Index.razor

@@ -19,6 +19,7 @@
 <div style="height: 500px; width: 500px;">
     <LeafletMap Map="_map" />
 </div>
+<p>Map bounds: @_map.Bounds?.ToString()</p>
 
 @code
 {
@@ -66,7 +67,8 @@
                 Radius = 10f
             };
             _map.AddLayer(_circle);
-        };
+        };
+        _map.OnBoundsChanged += (s, e) => this.StateHasChanged();
     }
 
     private LatLng _startAt = new LatLng(47.5574007f, 16.3918687f);

BlazorLeaflet/BlazorLeaflet/LeafletInterops.cs

@@ -86,7 +86,22 @@ public static ValueTask<LatLng> GetCenter(IJSRuntime jsRuntime, string mapId) =>
             jsRuntime.InvokeAsync<LatLng>($"{_BaseObjectContainer}.getCenter", mapId);
 
         public static ValueTask<float> GetZoom(IJSRuntime jsRuntime, string mapId) =>
-            jsRuntime.InvokeAsync<float>($"{_BaseObjectContainer}.getZoom", mapId);
+            jsRuntime.InvokeAsync<float>($"{_BaseObjectContainer}.getZoom", mapId);
+
+        // Private class only for deserialization from JSON (since the JSON names on the bounds are "_southWest"
+        // with the _). Since deserialization in JSRuntime is non-customizable, this is a good solution for now.
+        private class _Bounds
+        {
+            public LatLng _southWest { get; set; }
+            public LatLng _northEast { get; set; }
+
+            public Bounds AsBounds() => new Bounds(_southWest, _northEast);
+        }
+
+        public static async Task<Bounds> GetBounds(IJSRuntime jsRuntime, string mapId)
+        {
+            return (await jsRuntime.InvokeAsync<_Bounds>($"{_BaseObjectContainer}.getBounds", mapId)).AsBounds();
+        }
 
         public static ValueTask ZoomIn(IJSRuntime jsRuntime, string mapId, MouseEventArgs e) =>
             jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.zoomIn", mapId, e);

BlazorLeaflet/BlazorLeaflet/Map.cs

@@ -26,6 +26,12 @@ public class Map
         /// </summary>
         public float Zoom { get; set; }
 
+
+        /// <summary>
+        /// Map bounds
+        /// </summary>
+        public Bounds Bounds { get; private set; }
+
         /// <summary>
         /// Minimum zoom level of the map. If not specified and at least one 
         /// GridLayer or TileLayer is in the map, the lowest of their minZoom
@@ -82,6 +88,19 @@ public void RaiseOnInitialized()
         {
             _isInitialized = true;
             OnInitialized?.Invoke();
+            RunTaskInBackground(UpdateBounds);
+        }
+
+        private async void RunTaskInBackground(Func<Task> task)
+        {
+            try
+            {
+                await task();
+            }
+            catch (Exception ex)
+            {
+                NotifyBackgroundExceptionOccurred(ex);
+            }
         }
 
         /// <summary>
@@ -178,8 +197,15 @@ public void PanTo(PointF position, bool animate = false, float duration = 0.25f,
         }
 
         public async Task<LatLng> GetCenter() => await LeafletInterops.GetCenter(_jsRuntime, Id);
-        public async Task<float> GetZoom() => 
-            await LeafletInterops.GetZoom(_jsRuntime, Id);
+        public async Task<float> GetZoom() => await LeafletInterops.GetZoom(_jsRuntime, Id);
+        public async Task<Bounds> GetBounds() => await LeafletInterops.GetBounds(_jsRuntime, Id);
+
+
+        private async Task UpdateBounds()
+        {
+            Bounds = await GetBounds();
+            OnBoundsChanged?.Invoke(this, new EventArgs());
+        }
 
         /// <summary>
         /// Increases the zoom level by one notch.
@@ -238,11 +264,41 @@ 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 UpdateBounds();
+            }
+            catch (Exception ex)
+            {
+                NotifyBackgroundExceptionOccurred(ex);
+            }
+            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 UpdateBounds();
+            }
+            catch (Exception ex)
+            {
+                NotifyBackgroundExceptionOccurred(ex);
+            }
+            finally
+            {
+                OnMoveEnd?.Invoke(this, e);
+            }
+        }
+
+        public event EventHandler OnBoundsChanged;
 
         public event MouseEventHandler OnMouseMove;
         [JSInvokable]
@@ -264,6 +320,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 = {
@@ -208,6 +208,9 @@ window.leafletBlazor = {
     getZoom: function (mapId) {
         return maps[mapId].getZoom();
     },
+    getBounds: function (mapId) {
+        return maps[mapId].getBounds();
+    },
     zoomIn: function (mapId, e) {
         const map = maps[mapId];