majorimi / blazor-components

Components collection and extensions for Blazor applications.
MIT License
327 stars 59 forks source link

Google Map Bounds Coordinates #105

Closed mxmissile closed 2 years ago

mxmissile commented 3 years ago

The google map api we can get the bounds via these methods:

const bounds = map.getBounds();
const ne = bounds.getNorthEast();
const sw = bounds.getSouthWest();

Does this library support anything like this?

Update: I'm trying to use jsinterop to call these methods:

private async Task OnMapBoundsChanged()
{
        var _mapsJs = await _js.InvokeAsync<IJSObjectReference>("import", "./_content/Majorsoft.Blazor.Components.Maps/googleMaps.min.js");
        await _mapsJs.InvokeVoidAsync("getBounds", _map.MapId);
}

But its not working, (I'm new to js interop), its throwing:

Error: Microsoft.JSInterop.JSException: Could not find 'getBounds' ('getBounds' was undefined).

majorimi commented 3 years ago

Hi @mxmissile,

Thanks for contacting me. Currently not all map functions are supported. I can look into this and try to add them. Let you know if it is possible... I think won't be hard and can include into the next release.

Grizzlly commented 2 years ago

Regarding this, the API also offers restrictions on the map bounds, so you can limit the map to a certain country for example. This is documented here.

I think this is might be quite easy to implement as it only requires changes in the window.initGoogleMaps function, specifically the map initializer.

It would be nice if the InnerElementReference would actually contain the map object so we can work with it....

majorimi commented 2 years ago

@mxmissile Implemented your request added some get methods. One of which is GetBoundsAsync() it is returning a GoogleMapLatLngBounds object. Since Blazor works very differently then Maps API so you cannot call simple methods on this object. Because it would require JsInterop calls. So all parameterless method calls was done during the JS getBounds request.

You can use the code like this:

var bounds = await _googleMap.GoogleMapService.GetBoundsAsync();

var neLat = bounds.NorthEast.Latitude;
var neLng = bounds.NorthEast.Longitude;
...
var swLat = bound.SouthWest.Latitude
... //etc

You can try it if you pull down branch Release/v1.6.0. Let me know if this is what you were needed.

mxmissile commented 2 years ago

Wow! Thank you so much, I will dive in today on this.

majorimi commented 2 years ago

Sure no problem once you confirm it is ok I will add it to the next Nuget package release. Since it Christmas etc. the release will be done next year....