From 275eeb7b78bf06c528fee0b1318a06e03a3468bf Mon Sep 17 00:00:00 2001 From: Major Date: Mon, 20 Dec 2021 17:33:40 +0100 Subject: [PATCH 1/2] Implemented GoogleMap restriction boundaries in Init --- .../Google/GoogleMap.razor | 6 +++ .../Google/GoogleMapLatLngBounds.cs | 18 +++++++++ .../Google/GoogleMapRestriction.cs | 18 +++++++++ .../Google/GoogleMapService.cs | 5 ++- .../Google/IGoogleMapService.cs | 3 +- .../Majorsoft.Blazor.Components.Maps.xml | 37 ++++++++++++++++++- .../wwwroot/googleMaps.js | 24 ++++++++++-- .../wwwroot/googleMaps.min.js | 2 +- .../Components/MapsGoogle.razor | 10 ++++- 9 files changed, 112 insertions(+), 11 deletions(-) create mode 100644 src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs diff --git a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor index 52576427..b4f75ebd 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}'."); @@ -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; /// 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..09a67545 --- /dev/null +++ b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs @@ -0,0 +1,18 @@ +namespace Majorsoft.Blazor.Components.Maps.Google +{ + /// + /// Restrictions coordinates for + /// + 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..f78d003f 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,21 @@ Default scale value is 1; accepted values are 1, 2, and 4. + + + Restrictions coordinates for + + + + + Latitude and Longitude SW/NE corners of the bound. + + + + + Is restriction strict. + + Default implementation of @@ -751,10 +778,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 +964,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..f3eeb50e 100644 --- a/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor +++ b/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor @@ -242,7 +242,8 @@

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

@@ -255,6 +256,7 @@ Height="@_jsMapHeight" Width="@_jsMapWidth" BackgroundColor="@_jsMapBackgroundColor" + Restriction="@(_jsRestrictMap ? _restriction : null)" ControlSize="@_jsMapControlSize" Center="@_jsMapCenter" AnimateCenterChange="@_jsMapAnimateCenterChange" @@ -501,6 +503,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 +533,7 @@ private bool _jsScaleControl = true; private bool _jsStreetViewControl = true; private bool _jsZoomControl = true; + private bool _jsRestrictMap = false; private List _jsCustomControls = new List(); private ObservableRangeCollection _jsMarkers = new ObservableRangeCollection(); From a75b7b01b0e904940978f0cb8a5afaf2bed4f5ba Mon Sep 17 00:00:00 2001 From: Major Date: Sat, 1 Jan 2022 18:00:22 +0100 Subject: [PATCH 2/2] Added comments for maps restrictions. --- .github/docs/Maps.md | 2 +- .../Google/GoogleMap.razor | 4 +++- .../Google/GoogleMapRestriction.cs | 2 ++ .../Majorsoft.Blazor.Components.Maps.xml | 2 ++ .../Components/MapsGoogle.razor | 23 +++++++------------ 5 files changed, 16 insertions(+), 17 deletions(-) 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 b4f75ebd..9321c715 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor +++ b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMap.razor @@ -137,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; @@ -336,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/GoogleMapRestriction.cs b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs index 09a67545..20e48380 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs +++ b/src/Majorsoft.Blazor.Components.Maps/Google/GoogleMapRestriction.cs @@ -2,6 +2,8 @@ { /// /// 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 { 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 f78d003f..125773b8 100644 --- a/src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml +++ b/src/Majorsoft.Blazor.Components.Maps/Majorsoft.Blazor.Components.Maps.xml @@ -611,6 +611,8 @@ 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"` diff --git a/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor b/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor index f3eeb50e..ae61e9ba 100644 --- a/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor +++ b/src/Majorsoft.Blazor.Components.TestApps.Common/Components/MapsGoogle.razor @@ -241,9 +241,12 @@

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

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

@@ -260,7 +263,7 @@ ControlSize="@_jsMapControlSize" Center="@_jsMapCenter" AnimateCenterChange="@_jsMapAnimateCenterChange" - Zoom="@_jsMapZoomLevel" + @bind-Zoom="_jsMapZoomLevel" @bind-Zoom:event="OnMapZoomLevelChanged" ZoomControl="@_jsZoomControl" ZoomControlOptionsPosition="GoogleMapControlPositions.RIGHT_BOTTOM" MaxZoom="null" @@ -298,7 +301,6 @@ OnMapMouseOver="@OnMapMouseOver" OnMapMouseOut="@OnMapMouseOut" OnMapCenterChanged="@OnMapCenterChanged" - OnMapZoomLevelChanged="@OnMapZoomLevelChanged" OnMapTypeChanged="@OnMapTypeChanged" OnMapHeadingChanged="@OnMapHeadingChanged" OnMapTiltChanged="@OnMapTiltChanged" @@ -533,7 +535,7 @@ private bool _jsScaleControl = true; private bool _jsStreetViewControl = true; private bool _jsZoomControl = true; - private bool _jsRestrictMap = false; + private bool _jsRestrictMap = false; //must be set before Init... private List _jsCustomControls = new List(); private ObservableRangeCollection _jsMarkers = new ObservableRangeCollection(); @@ -709,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"