Merge pull request #108 from majorimi/dev/google-maps-methods

GoogleMaps get methods

Author: majorimi

.github/docs/Maps.md

@@ -19,11 +19,16 @@ It is available in the service provider (Google, Microsoft, etc.) developer site
 **NOTE: None of the Majorsoft Maps component tracking or exposing you _Token_ or _API Key_!
 Injecting and protecting this _Token_ or _API Key_ in your Blazor application is YOUR responsibility!**
 
-# Components
+# Components and Services
 
+
+#### Google:
 - **`GoogleStaticMap`**: component is wrapping **Google Static Maps services** into Blazor components.
 - **`GoogleMap`**: component is wrapping **Google JavaScript Maps services** into Blazor components.
-- **`BindMap`**: _Planned in release v1.4.0_
+- **`IGoogleMapService`**: Injectable service to handle Google JavaScript Maps functionalities. Available on the instance of `GoogleMap` object ref as well.
+
+#### Bing:
+- **`BindMap`**: _Planned in release v1.6.0_
 
 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. 
@@ -111,6 +116,8 @@ You can learn about Google JavaScript Maps features and usage [here](https://dev
 Exposes a Blazor `ElementReference` of the wrapped around HTML element. It can be used e.g. for JS interop, etc.
 - **`MapId`: `string { get; }`** <br />
 Map HTML container Id. It can be used when multiple Maps added to one page.
+- **`GoogleMapService`: `string { get; }`** <br />
+Exposes `IGeolocationService` which is handling JsInterop. This instance can be used for access more GoogleMap features.
 - **`Width`: `int { get; set; }` (default: 400)** <br />
 Maps image Width in px.
 - **`Height`: `int { get; set; }` (default: 300)** <br />

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

@@ -23,6 +23,11 @@
 	/// </summary>
 	public ElementReference InnerElementReference => _jsMap;
 
+	/// <summary>
+	/// Exposes <see cref="IGeolocationService"/> which is handling JsInterop. This instance can be used for access more GoogleMap features.
+	/// </summary>
+	public IGoogleMapService GoogleMapService => _mapService;
+
 	private bool _mapInitialized = false;
 	private bool _isDragging = false;
 	protected override async Task OnInitializedAsync()

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

@@ -0,0 +1,38 @@
+namespace Majorsoft.Blazor.Components.Maps.Google
+{
+    /// <summary>
+    /// A LatLngBounds instance represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian.
+    /// </summary>
+    public class GoogleMapLatLngBounds
+    {
+        /// <summary>
+        /// Computes the center of this LatLngBounds
+        /// Equivalent with `getCenter()` method call but it would require JsInterop.
+        /// </summary>
+        public GoogleMapLatLng Center { get; set; }
+
+        /// <summary>
+        /// Returns the north-east corner of this bounds.
+        /// Equivalent with `getNorthEast()` method call but it would require JsInterop.
+        /// </summary>
+        public GoogleMapLatLng NorthEast { get; set; }
+
+        /// <summary>
+        /// Returns the south-west corner of this bounds.
+        /// Equivalent with `getSouthWest()` method call but it would require JsInterop.
+        /// </summary>
+        public GoogleMapLatLng SouthWest { get; set; }
+
+        /// <summary>
+        /// Converts the given map bounds to a lat/lng span.
+        /// Equivalent with `toSpan()` method call but it would require JsInterop.
+        /// </summary>
+        public GoogleMapLatLng Span { get; set; }
+
+        /// <summary>
+        /// Returns if the bounds are empty.
+        /// Equivalent with `isEmpty()` method call but it would require JsInterop.
+        /// </summary>
+        public bool IsEmpty { get; set; }
+    }
+}

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

@@ -236,6 +236,25 @@ await _mapsJs.InvokeVoidAsync("removeMarkers", MapContainerId,
 			}
 		}
 
+		public async ValueTask<GoogleMapLatLngBounds> GetBoundsAsync()
+		{
+			await CheckJsObjectAsync();
+			return await _mapsJs.InvokeAsync<GoogleMapLatLngBounds>("getBounds", MapContainerId);
+		}
+
+		public async ValueTask<GoogleMapLatLng> GetCenterAsync()
+		{
+			await CheckJsObjectAsync();
+			return await _mapsJs.InvokeAsync<GoogleMapLatLng>("getCenter", MapContainerId);
+		}
+
+		public async ValueTask<IJSObjectReference> GetDivAsync()
+		{
+			await CheckJsObjectAsync();
+			return await _mapsJs.InvokeAsync<IJSObjectReference>("getDiv", MapContainerId);
+		}
+
+
 		private async Task CheckJsObjectAsync()
 		{
 			if (_mapsJs is null)

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

@@ -1,13 +1,14 @@
-
-using System;
+using System;
 using System.Collections.Generic;
 using System.Dynamic;
 using System.Threading.Tasks;
 
+using Microsoft.JSInterop;
+
 namespace Majorsoft.Blazor.Components.Maps.Google
 {
 	/// <summary>
-	/// Injectable service to handle Google JavaScript Maps functionalities.
+	/// Injectable service to handle Google JavaScript Maps functionalities. Available on the instance of <see cref="GoogleMap"/> object ref as well.
 	/// </summary>
 	public interface IGoogleMapService : IAsyncDisposable
 	{
@@ -169,7 +170,29 @@ Task InitMapAsync(string apiKey,
 		/// </summary>
 		/// <param name="newMarkers">Enumerable new markers to add</param>
 		/// <param name="markers">Enumerable markers removed or replaced</param>
-		/// <returns></returns>
+		/// <returns>Async task</returns>
 		Task CreateMarkersAsync(IEnumerable<GoogleMapMarker>? newMarkers, IEnumerable<GoogleMapMarker>? markers);
+
+		/// <summary>
+		/// Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, 
+		/// the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized or 
+		/// center and zoom have not been set then the result is undefined. For vector maps with non-zero tilt or heading, 
+		/// the returned lat/lng bounds represents the smallest bounding box that includes the visible region of the map's viewport.
+		/// </summary>
+		/// <returns>Async task</returns>
+		ValueTask<GoogleMapLatLngBounds> GetBoundsAsync();
+
+		/// <summary>
+		/// Returns the position displayed at the center of the map. Note that this LatLng object is not wrapped. See LatLng for more information. 
+		/// If the center or bounds have not been set then the result is undefined.
+		/// </summary>
+		/// <returns>Async task</returns>
+		ValueTask<GoogleMapLatLng> GetCenterAsync();
+
+		/// <summary>
+		/// Returns HTMLElement The mapDiv of the map.
+		/// </summary>
+		/// <returns>Async task</returns>
+		ValueTask<IJSObjectReference> GetDivAsync();
 	}
 }

src/Majorsoft.Blazor.Components.Maps/GoogleMapLatLng.cs

@@ -0,0 +1,20 @@
+namespace Majorsoft.Blazor.Components.Maps
+{
+    /// <summary>
+    /// A LatLng is a point in geographical coordinates: latitude and longitude.
+    /// </summary>
+    public class GoogleMapLatLng
+    {
+        /// <summary>
+        /// Latitude ranges between -90 and 90 degrees, inclusive. Values above or below this range will be clamped to the range [-90, 90]. 
+        /// This means that if the value specified is less than -90, it will be set to -90. And if the value is greater than 90, it will be set to 90.
+        /// </summary>
+        public double Latitude { get; set; }
+
+        /// <summary>
+        /// Longitude ranges between -180 and 180 degrees, inclusive. Values above or below this range will be wrapped so that they fall within the range.
+        /// For example, a value of -190 will be converted to 170. A value of 190 will be converted to -170. This reflects the fact that longitudes wrap around the globe.
+        /// </summary>
+        public double Longitude { get; set; }
+    }
+}

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

@@ -342,6 +342,49 @@ export function panToAddress(elementId, address) {
 		}
 	}
 }
+//get methods
+export function getBounds(elementId) {
+	if (elementId) {
+		let mapWithDotnetRef = getElementIdWithDotnetRef(_mapsElementDict, elementId);
+		if (mapWithDotnetRef && mapWithDotnetRef.map) {
+			let bounds = mapWithDotnetRef.map.getBounds();
+
+			let ret = {
+				Center: convertToLatLng(bounds.getCenter()),
+				NorthEast: convertToLatLng(bounds.getNorthEast()),
+				SouthWest: convertToLatLng(bounds.getSouthWest()),
+				Span: convertToLatLng(bounds.toSpan()),
+				IsEmpty: bounds.isEmpty(),
+			};
+			return ret;
+		}
+	}
+}
+export function getCenter(elementId) {
+	if (elementId) {
+		let mapWithDotnetRef = getElementIdWithDotnetRef(_mapsElementDict, elementId);
+		if (mapWithDotnetRef && mapWithDotnetRef.map) {
+			let center = mapWithDotnetRef.map.getCenter();
+
+			let ret = convertToLatLng(center);
+			return ret;
+		}
+	}
+}
+export function getDiv(elementId) {
+	if (elementId) {
+		let mapWithDotnetRef = getElementIdWithDotnetRef(_mapsElementDict, elementId);
+		if (mapWithDotnetRef && mapWithDotnetRef.map) {
+			var ret = mapWithDotnetRef.map.getDiv();
+			return ret;
+		}
+	}
+}
+function convertToLatLng(latLngObject) {
+	let ret = { Latitude: latLngObject.lat(), Longitude: latLngObject.lng() };
+	return ret;
+}
+
 //set methods
 export function setZoom(elementId, zoom) {
 	if (elementId) {