Merge pull request #110 from majorimi/dev/google-map-restriction

Dev/google map restriction

Author: majorimi

.github/docs/Maps.md

@@ -34,6 +34,7 @@ Maps using `IGeolocationService` (see "Dependences") to center current position.
 It can be omitted and injected separately to your components as well to get or track device location. 
 To see how it works please check **Geo JS** [documentation](https://github.com/majorimi/blazor-components/blob/master/.github/docs/JsInterop.md#geolocation-js-see-demo-app) and [demo](https://blazorextensions.z6.web.core.windows.net/jsinterop#geo-js).
 
+
 ## `GoogleStaticMap` component (See: [demo app](https://blazorextensions.z6.web.core.windows.net/maps#google-static-maps))
 
 :warning: **To use Google Maps Platform, you must have a billing account. The billing account is used to track costs associated with your projects.**
@@ -98,7 +99,6 @@ Once operation has finished successfully `OnLocationDetected` event will be fire
 - **`DisposeAsync()`: `Task DisposeAsync()`** <br />
 Component implements `IAsyncDisposable` interface Blazor framework will call it when parent removed from render tree.
 
-
 ## `GoogleMap` component (See: [demo app](https://blazorextensions.z6.web.core.windows.net/maps#google-js-maps))
 
 :warning: **To use Google Maps Platform, you must have a billing account. The billing account is used to track costs associated with your projects.**

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}'.");
@@ -136,7 +137,7 @@
 				},
 				mapZoomChangedCallback: async (zoom) =>
 				{
-					WriteDiag($"Map Zoom level changed to: '{zoom}'.");
+					WriteDiag($"Map Zoom level callback changed to: '{zoom}'.");
 					if (_zoomLevel == zoom)
 						return;
 
@@ -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>
@@ -330,6 +336,8 @@
 			if (_mapInitialized && value != _zoomLevel)
 			{
 				_zoomLevel = value;
+
+				WriteDiag($"Map Zoom level property Set to: '{_zoomLevel}'.");
 				InvokeAsync(async () => await _mapService.SetZoomAsync(_zoomLevel));
 			}
 		}

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,20 @@
+namespace Majorsoft.Blazor.Components.Maps.Google
+{
+    /// <summary>
+    /// Restrictions coordinates for <see cref="GoogleMap"/>
+    /// NOTE: Google Maps restriction is basically a MAX Zoom level. So it does not allow users to zoom out (zoom level value forced). 
+    /// In order to notify Blazor about the maximum Zoom level two-way binding MUST be used: `@bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged"`
+    /// </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 }
 		});
 	}
 }