diff --git a/.github/docs/Maps.md b/.github/docs/Maps.md index 08877166..e6f50038 100644 --- a/.github/docs/Maps.md +++ b/.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()`**
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.** diff --git a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor index 52576427..9321c715 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor +++ b/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 method to set it up. /// [Parameter] public IEnumerable? CustomControls { get; set; } + /// + /// Restrictions for Maps by coordinates SW/NE. + /// This option can only be set when the map is initialized. Use method to set it up. + /// + [Parameter] public GoogleMapRestriction? Restriction { get; set; } private ObservableRangeCollection? _markers; /// @@ -330,6 +336,8 @@ if (_mapInitialized && value != _zoomLevel) { _zoomLevel = value; + + WriteDiag($"Map Zoom level property Set to: '{_zoomLevel}'."); InvokeAsync(async () => await _mapService.SetZoomAsync(_zoomLevel)); } } diff --git a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapLatLngBounds.cs b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapLatLngBounds.cs index 5a71af64..b814ee54 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapLatLngBounds.cs +++ b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapLatLngBounds.cs @@ -5,6 +5,24 @@ /// public class GoogleMapLatLngBounds { + /// + /// Default constructor + /// + public GoogleMapLatLngBounds() + { + } + + /// + /// Initialize object for Map restrictions + /// + /// The south-west corner of this bounds. + /// The north-east corner of this bounds. + public GoogleMapLatLngBounds(GoogleMapLatLng southWest, GoogleMapLatLng northEast) + { + SouthWest = southWest; + NorthEast = northEast; + } + /// /// Computes the center of this LatLngBounds /// Equivalent with `getCenter()` method call but it would require JsInterop. diff --git a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs new file mode 100644 index 00000000..20e48380 --- /dev/null +++ b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs @@ -0,0 +1,20 @@ +namespace Majorsoft.Blazor.Components.Maps.Google +{ + /// + /// Restrictions coordinates for + /// 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"` + /// + public class GoogleMapRestriction + { + /// + /// Latitude and Longitude SW/NE corners of the bound. + /// + public GoogleMapLatLngBounds LatLngBounds { get; set; } + + /// + /// Is restriction strict. + /// + public bool StrictBounds { get; set; } + } +} \ No newline at end of file diff --git a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapService.cs b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapService.cs index 579965ed..2f65b01d 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapService.cs +++ b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapService.cs @@ -51,7 +51,8 @@ public async Task InitMapAsync(string apiKey, Func? mapDragStartCallback = null, Func? mapResizedCallback = null, Func? mapTilesLoadedCallback = null, - Func? mapIdleCallback = null) + Func? mapIdleCallback = null, + GoogleMapRestriction restriction = null) { if(MapContainerId == mapContainerId) { @@ -89,7 +90,7 @@ public async Task InitMapAsync(string apiKey, _dotNetObjectReference = DotNetObjectReference.Create(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) diff --git a/src/Majorsoft.Blazor.Components.Maps/Google/IGoogleMapService.cs b/src/Majorsoft.Blazor.Components.Maps/Google/IGoogleMapService.cs index 1d69b226..dd58a954 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Google/IGoogleMapService.cs +++ b/src/Majorsoft.Blazor.Components.Maps/Google/IGoogleMapService.cs @@ -76,7 +76,8 @@ Task InitMapAsync(string apiKey, Func mapDragStartCallback = null, Func mapResizedCallback = null, Func mapTilesLoadedCallback = null, - Func mapIdleCallback = null); + Func mapIdleCallback = null, + GoogleMapRestriction restriction = null); /// /// Sets the center point as coordinates of the Map. diff --git a/src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml b/src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml index fc5e16c5..125773b8 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml +++ b/src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml @@ -255,6 +255,18 @@ A LatLngBounds instance represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian. + + + Default constructor + + + + + Initialize object for Map restrictions + + The south-west corner of this bounds. + The north-east corner of this bounds. + Computes the center of this LatLngBounds @@ -596,6 +608,23 @@ Default scale value is 1; accepted values are 1, 2, and 4. + + + Restrictions coordinates for + 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"` + + + + + Latitude and Longitude SW/NE corners of the bound. + + + + + Is restriction strict. + + Default implementation of @@ -751,10 +780,10 @@ - HTML Div Id which was set when Maps initialized with method. + HTML Div Id which was set when Maps initialized with method. - + This function must be called only once to initialize Google JavaScript Maps with ApiKey and event callbacks. @@ -937,6 +966,12 @@ This option can only be set when the map is initialized. Use method to set it up. + + + Restrictions for Maps by coordinates SW/NE. + This option can only be set when the map is initialized. Use method to set it up. + + MarkerOptions object used to define the properties that can be set on a Marker. diff --git a/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.js b/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.js index 76d88e56..afddecb1 100644 --- a/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.js +++ b/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.js @@ -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 } }); } } diff --git a/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.min.js b/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.min.js index c6203724..87e87a56 100644 --- a/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.min.js +++ b/src/Majorsoft.Blazor.Components.Maps/wwwroot/googleMaps.min.js @@ -1 +1 @@ -export function init(t,i,r,u,e){if(t&&i&&r){f(n,i,r,u,e);let o="https://maps.googleapis.com/maps/api/js?key=",h=!1,l=document.querySelectorAll("head > script");if(l.forEach(n=>{if(n){let t=n.getAttribute("src");if(t&&t.startsWith(o)){h=!0;return}}}),h){window.google&&window.initGoogleMaps();return}let c=document.createElement("script");c.src="https://polyfill.io/v3/polyfill.min.js?features=default";document.head.appendChild(c);o=o+t+"&callback=initGoogleMaps&libraries=&v=weekly";let s=document.createElement("script");s.src=o;s.defer=!0;document.head.appendChild(s)}}function f(n,t,i,r,u){for(let i=0;i{e.invokeMethodAsync("CustomControlClicked",i)})}}}export function createMarkers(i,u){if(i&&u&&u.length){let e=t(n,i);if(e&&e.map)for(var f=0;f{e.ref.invokeMethodAsync("MarkerClicked",n.id),i&&i.open(e.map,t)})}if(n.draggable){t.addListener("drag",()=>{i("MarkerDrag",n.id,t.getPosition().toJSON())});t.addListener("dragend",()=>{i("MarkerDragEnd",n.id,t.getPosition().toJSON())});t.addListener("dragstart",()=>{i("MarkerDragStart",n.id,t.getPosition().toJSON())});function i(n,t,i){let r={Latitude:i.lat,Longitude:i.lng};e.ref.invokeMethodAsync(n,t,r)}}}}}export function removeMarkers(i,u){if(i&&u&&u.length){let e=t(n,i);if(e&&e.map)for(var f=0;f{if(n.id==t.id){t.setMap(null);r.splice(i,1);return}})}}}function o(n,t){t&&n&&(t.setPosition({lat:n.position.latitude,lng:n.position.longitude}),t.anchorPoint=n.anchorPoint?{x:n.anchorPoint.x,y:n.anchorPoint.y}:null,t.setAnimation(n.animation),t.setClickable(n.clickable),t.crossOnDrag=n.crossOnDrag,t.setCursor(n.cursor),t.setDraggable(n.draggable),t.setIcon(n.icon),t.setLabel(n.label),t.setOpacity(n.opacity),t.optimized=n.optimized,t.setShape(n.shape),t.setTitle(n.title),t.setVisible(n.visible),t.setZIndex(n.zIndex))}export function getAddressCoordinates(i,r){u(r,function(r){if(r){let u=t(n,i);u&&u.map&&u.ref.invokeMethodAsync("AddressSearch",r)}})}function u(n,t){let i=new google.maps.Geocoder;i.geocode({address:n},function(n,i){i==google.maps.GeocoderStatus.OK&&t(n)})}export function dispose(i){if(i){let r=t(n,i);r.map=null;r.ref=null;e(n,i)}}window.initGoogleMaps=()=>{for(let i=0;i{u(n,"MapClicked")});r.addListener("dblclick",n=>{u(n,"MapDoubleClicked")});r.addListener("contextmenu",n=>{u(n,"MapContextMenu")});r.addListener("mouseup",n=>{u(n,"MapMouseUp")});r.addListener("mousedown",n=>{u(n,"MapMouseDown")});r.addListener("mousemove",n=>{u(n,"MapMouseMove")});r.addListener("mouseover",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapMouseOver")}});r.addListener("mouseout",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapMouseOut")}});r.addListener("center_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapCenterChanged",t)}}});r.addListener("zoom_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapZoomChanged",r.getZoom())}});r.addListener("maptypeid_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapTypeIdChanged",r.getMapTypeId())}});r.addListener("heading_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapHeadingChanged",r.getHeading())}});r.addListener("tilt_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapTiltChanged",r.getTilt())}});r.addListener("bounds_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapBoundsChanged")}});r.addListener("projection_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapProjectionChanged")}});r.addListener("draggable_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapDraggableChanged")}});r.addListener("streetview_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapStreetviewChanged")}});r.addListener("drag",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapDrag",t)}}});r.addListener("dragend",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapDragEnd",t)}}});r.addListener("dragstart",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapDragStart",t)}}});r.addListener("resize",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i){let n={Width:r.getDiv().offsetWidth,Height:r.getDiv().offsetHeight};i.ref.invokeMethodAsync("MapResized",n)}}});r.addListener("tilesloaded",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapTilesLoaded")}});r.addListener("idle",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapIdle")}});n[i].value.ref.invokeMethodAsync("MapInitialized",f)}}};let n=[],r=[]; \ No newline at end of file +export function init(t,i,r,u,e,o){if(t&&i&&r){f(n,i,r,u,e,o);let s="https://maps.googleapis.com/maps/api/js?key=",c=!1,a=document.querySelectorAll("head > script");if(a.forEach(n=>{if(n){let t=n.getAttribute("src");if(t&&t.startsWith(s)){c=!0;return}}}),c){window.google&&window.initGoogleMaps();return}let l=document.createElement("script");l.src="https://polyfill.io/v3/polyfill.min.js?features=default";document.head.appendChild(l);s=s+t+"&callback=initGoogleMaps&libraries=&v=weekly";let h=document.createElement("script");h.src=s;h.defer=!0;document.head.appendChild(h)}}function f(n,t,i,r,u,f){for(let i=0;i{e.invokeMethodAsync("CustomControlClicked",i)})}}}export function createMarkers(i,u){if(i&&u&&u.length){let e=t(n,i);if(e&&e.map)for(var f=0;f{e.ref.invokeMethodAsync("MarkerClicked",n.id),i&&i.open(e.map,t)})}if(n.draggable){t.addListener("drag",()=>{i("MarkerDrag",n.id,t.getPosition().toJSON())});t.addListener("dragend",()=>{i("MarkerDragEnd",n.id,t.getPosition().toJSON())});t.addListener("dragstart",()=>{i("MarkerDragStart",n.id,t.getPosition().toJSON())});function i(n,t,i){let r={Latitude:i.lat,Longitude:i.lng};e.ref.invokeMethodAsync(n,t,r)}}}}}export function removeMarkers(i,u){if(i&&u&&u.length){let e=t(n,i);if(e&&e.map)for(var f=0;f{if(n.id==t.id){t.setMap(null);r.splice(i,1);return}})}}}function o(n,t){t&&n&&(t.setPosition({lat:n.position.latitude,lng:n.position.longitude}),t.anchorPoint=n.anchorPoint?{x:n.anchorPoint.x,y:n.anchorPoint.y}:null,t.setAnimation(n.animation),t.setClickable(n.clickable),t.crossOnDrag=n.crossOnDrag,t.setCursor(n.cursor),t.setDraggable(n.draggable),t.setIcon(n.icon),t.setLabel(n.label),t.setOpacity(n.opacity),t.optimized=n.optimized,t.setShape(n.shape),t.setTitle(n.title),t.setVisible(n.visible),t.setZIndex(n.zIndex))}export function getAddressCoordinates(i,r){u(r,function(r){if(r){let u=t(n,i);u&&u.map&&u.ref.invokeMethodAsync("AddressSearch",r)}})}function u(n,t){let i=new google.maps.Geocoder;i.geocode({address:n},function(n,i){i==google.maps.GeocoderStatus.OK&&t(n)})}export function dispose(i){if(i){let r=t(n,i);r.map=null;r.ref=null;e(n,i)}}window.initGoogleMaps=()=>{for(let i=0;i{f(n,"MapClicked")});r.addListener("dblclick",n=>{f(n,"MapDoubleClicked")});r.addListener("contextmenu",n=>{f(n,"MapContextMenu")});r.addListener("mouseup",n=>{f(n,"MapMouseUp")});r.addListener("mousedown",n=>{f(n,"MapMouseDown")});r.addListener("mousemove",n=>{f(n,"MapMouseMove")});r.addListener("mouseover",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapMouseOver")}});r.addListener("mouseout",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapMouseOut")}});r.addListener("center_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapCenterChanged",t)}}});r.addListener("zoom_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapZoomChanged",r.getZoom())}});r.addListener("maptypeid_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapTypeIdChanged",r.getMapTypeId())}});r.addListener("heading_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapHeadingChanged",r.getHeading())}});r.addListener("tilt_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapTiltChanged",r.getTilt())}});r.addListener("bounds_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapBoundsChanged")}});r.addListener("projection_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapProjectionChanged")}});r.addListener("draggable_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapDraggableChanged")}});r.addListener("streetview_changed",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapStreetviewChanged")}});r.addListener("drag",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapDrag",t)}}});r.addListener("dragend",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapDragEnd",t)}}});r.addListener("dragstart",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i&&r.getCenter()){let n=r.getCenter().toJSON(),t={Latitude:n.lat,Longitude:n.lng};i.ref.invokeMethodAsync("MapDragStart",t)}}});r.addListener("resize",()=>{if(r&&r.elementId){let i=t(n,r.elementId);if(i){let n={Width:r.getDiv().offsetWidth,Height:r.getDiv().offsetHeight};i.ref.invokeMethodAsync("MapResized",n)}}});r.addListener("tilesloaded",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapTilesLoaded")}});r.addListener("idle",()=>{if(r&&r.elementId){let i=t(n,r.elementId);i&&i.ref.invokeMethodAsync("MapIdle")}});n[i].value.ref.invokeMethodAsync("MapInitialized",e)}}};let n=[],r=[]; \ No newline at end of file diff --git a/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor b/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor index 011256e3..ae61e9ba 100644 --- a/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor +++ b/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor @@ -241,8 +241,12 @@

- Maps Pre-render settings: Background color: @_jsMapBackgroundColor - Control size: @(_jsMapControlSize)px +

Maps Pre-render settings:
+
    +
  • Background color: @_jsMapBackgroundColor
    • +
  • Control size: @(_jsMapControlSize)px
    • +
  • Restrict map to New Zealand:
    • +

@@ -255,10 +259,11 @@ Height="@_jsMapHeight" Width="@_jsMapWidth" BackgroundColor="@_jsMapBackgroundColor" + Restriction="@(_jsRestrictMap ? _restriction : null)" ControlSize="@_jsMapControlSize" Center="@_jsMapCenter" AnimateCenterChange="@_jsMapAnimateCenterChange" - Zoom="@_jsMapZoomLevel" + @bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged" ZoomControl="@_jsZoomControl" ZoomControlOptionsPosition="GoogleMapControlPositions.RIGHT_BOTTOM" MaxZoom="null" @@ -296,7 +301,6 @@ OnMapMouseOver="@OnMapMouseOver" OnMapMouseOut="@OnMapMouseOut" OnMapCenterChanged="@OnMapCenterChanged" - OnMapZoomLevelChanged="@OnMapZoomLevelChanged" OnMapTypeChanged="@OnMapTypeChanged" OnMapHeadingChanged="@OnMapHeadingChanged" OnMapTiltChanged="@OnMapTiltChanged" @@ -501,6 +505,11 @@ private GoogleMap _googleMap; private GeolocationData _jsMapCenter = new GeolocationData("Times Square New York"); private string _jsMapBackgroundColor = "lightblue"; + private GoogleMapRestriction _restriction = new GoogleMapRestriction() + { + LatLngBounds = new GoogleMapLatLngBounds(new GoogleMapLatLng() { Latitude = -47.35, Longitude = 166.28 }, + new GoogleMapLatLng() { Latitude = -34.36, Longitude = -175.81 }) + }; private int _jsMapControlSize = 38; private byte _jsMapZoomLevel = 10; private int _jsMapWidth = 450; @@ -526,6 +535,7 @@ private bool _jsScaleControl = true; private bool _jsStreetViewControl = true; private bool _jsZoomControl = true; + private bool _jsRestrictMap = false; //must be set before Init... private List _jsCustomControls = new List(); private ObservableRangeCollection _jsMarkers = new ObservableRangeCollection(); @@ -701,15 +711,6 @@ //Center point can be accessed as well with method call var center = await _googleMap.GoogleMapService.GetCenterAsync(); } - private async Task OnMapZoomLevelChanged(byte zoom) - { - //Can be used with Binding and custom event: @bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged" - if (_logOtherEvents) - { - _mapsLog = await WriteLog(_mapsLog, $"Map Zoom level changed to: {zoom}"); - } - _jsMapZoomLevel = zoom; //Two-way binding with event value - } private async Task OnMapTypeChanged(GoogleMapTypes googleMapTypes) { //Can be used with Binding and custom event: @bind-MapType="_jsMapType" @bind-MapType:event="OnMapTypeChanged"