Implemented GoogleMap restriction boundaries in Init

Author: majorimi

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor

@@ -37,6 +37,7 @@
 				mapContainerId: _mapContainerId,
 				backgroundColor: BackgroundColor,
 				controlSize: ControlSize,
+				restriction: Restriction,
 				mapInitializedCallback: async (mapId) =>
 				{
 					WriteDiag($"Google JavaScript API Map initialzied with DIV Id: '{_mapContainerId}'.");
@@ -292,6 +293,11 @@
 	/// This option can only be set when the map is initialized. Use <see cref="OnInitialized"/> method to set it up.
 	/// </summary>
 	[Parameter] public IEnumerable<GoogleMapCustomControl>? CustomControls { get; set; }
+	/// <summary>
+	/// Restrictions for Maps by coordinates SW/NE.
+	/// This option can only be set when the map is initialized. Use <see cref="OnInitialized"/> method to set it up.
+	/// </summary>
+	[Parameter] public GoogleMapRestriction? Restriction { get; set; }
 
 	private ObservableRangeCollection<GoogleMapMarker>? _markers;
 	/// <summary>

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapLatLngBounds.cs

@@ -5,6 +5,24 @@
     /// </summary>
     public class GoogleMapLatLngBounds
     {
+        /// <summary>
+        /// Default constructor
+        /// </summary>
+        public GoogleMapLatLngBounds()
+        {
+        }
+
+        /// <summary>
+        /// Initialize object for Map restrictions
+        /// </summary>
+        /// <param name="southWest">The south-west corner of this bounds.</param>
+        /// <param name="northEast">The north-east corner of this bounds.</param>
+        public GoogleMapLatLngBounds(GoogleMapLatLng southWest, GoogleMapLatLng northEast)
+        {
+            SouthWest = southWest;
+            NorthEast = northEast;
+        }
+
         /// <summary>
         /// Computes the center of this LatLngBounds
         /// Equivalent with `getCenter()` method call but it would require JsInterop.

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs

@@ -0,0 +1,18 @@
+namespace Majorsoft.Blazor.Components.Maps.Google
+{
+    /// <summary>
+    /// Restrictions coordinates for <see cref="GoogleMap"/>
+    /// </summary>
+    public class GoogleMapRestriction
+    {
+        /// <summary>
+        /// Latitude and Longitude SW/NE corners of the bound.
+        /// </summary>
+        public GoogleMapLatLngBounds LatLngBounds { get; set; }
+
+        /// <summary>
+        /// Is restriction strict.
+        /// </summary>
+        public bool StrictBounds { get; set; }
+    }
+}

src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapService.cs

@@ -51,7 +51,8 @@ public async Task InitMapAsync(string apiKey,
 			Func<GeolocationCoordinate, Task>? mapDragStartCallback = null,
 			Func<Rect, Task>? mapResizedCallback = null,
 			Func<Task>? mapTilesLoadedCallback = null,
-			Func<Task>? mapIdleCallback = null)
+			Func<Task>? mapIdleCallback = null,
+			GoogleMapRestriction restriction = null)
 		{
 			if(MapContainerId == mapContainerId)
 			{
@@ -89,7 +90,7 @@ public async Task InitMapAsync(string apiKey,
 
 			_dotNetObjectReference = DotNetObjectReference.Create<GoogleMapEventInfo>(info);
 
-			await _mapsJs.InvokeVoidAsync("init", apiKey, mapContainerId, _dotNetObjectReference, backgroundColor, controlSize);
+			await _mapsJs.InvokeVoidAsync("init", apiKey, mapContainerId, _dotNetObjectReference, backgroundColor, controlSize, restriction);
 		}
 
 		public async Task SetCenterAsync(double latitude, double longitude)

src/Majorsoft.Blazor.Components.Maps/Google/IGoogleMapService.cs

@@ -76,7 +76,8 @@ Task InitMapAsync(string apiKey,
 			Func<GeolocationCoordinate, Task> mapDragStartCallback = null,
 			Func<Rect, Task> mapResizedCallback = null,
 			Func<Task> mapTilesLoadedCallback = null,
-			Func<Task> mapIdleCallback = null);
+			Func<Task> mapIdleCallback = null,
+			GoogleMapRestriction restriction = null);
 
 		/// <summary>
 		/// Sets the center point as coordinates of the Map.

src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml

@@ -1,9 +1,9 @@
-export function init(key, elementId, dotnetRef, backgroundColor, controlSize) {
+export function init(key, elementId, dotnetRef, backgroundColor, controlSize, restriction) {
 	if (!key || !elementId || !dotnetRef) {
 		return;
 	}
 
-	storeElementIdWithDotnetRef(_mapsElementDict, elementId, dotnetRef, backgroundColor, controlSize); //Store map info
+	storeElementIdWithDotnetRef(_mapsElementDict, elementId, dotnetRef, backgroundColor, controlSize, restriction); //Store map info
 
 	let src = "https://maps.googleapis.com/maps/api/js?key=";
 	let scriptsIncluded = false;
@@ -50,9 +50,25 @@ window.initGoogleMaps = () => {
 		}
 
 		//Create Map
+		let restrict = null;
+		if (mapInfo.restriction && mapInfo.restriction.latLngBounds
+			&& mapInfo.restriction.latLngBounds.northEast && mapInfo.restriction.latLngBounds.southWest) {
+			restrict =
+			{
+				latLngBounds: {
+					south: mapInfo.restriction.latLngBounds.southWest.latitude,
+					west: mapInfo.restriction.latLngBounds.southWest.longitude,
+					north: mapInfo.restriction.latLngBounds.northEast.latitude,
+					east: mapInfo.restriction.latLngBounds.northEast.longitude
+				},
+				strictBounds: mapInfo.restriction.strictBounds,
+			};
+		}
+
 		let map = new google.maps.Map(document.getElementById(elementId), {
 			backgroundColor: mapInfo.bgColor,
 			controlSize: mapInfo.ctrSize,
+			restriction: restrict,
 		});
 		map.elementId = elementId;
 		_mapsElementDict[i].value.map = map;
@@ -265,7 +281,7 @@ window.initGoogleMaps = () => {
 };
 
 //Store elementId with .NET Ref
-function storeElementIdWithDotnetRef(dict, elementId, dotnetRef, backgroundColor, controlSize) {
+function storeElementIdWithDotnetRef(dict, elementId, dotnetRef, backgroundColor, controlSize, restriction) {
 	let elementFound = false;
 	for (let i = 0; i < dict.length; i++) {
 		if (dict[i].key === elementId) {
@@ -276,7 +292,7 @@ function storeElementIdWithDotnetRef(dict, elementId, dotnetRef, backgroundColor
 	if (!elementFound) {
 		dict.push({
 			key: elementId,
-			value: { ref: dotnetRef, map: null, bgColor: backgroundColor, ctrSize: controlSize }
+			value: { ref: dotnetRef, map: null, bgColor: backgroundColor, ctrSize: controlSize, restriction: restriction }
 		});
 	}
 }