diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor index ce3761e..0cc9fb3 100644 --- a/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor +++ b/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor @@ -6,6 +6,10 @@
Demo with a loaded KML Layer on first map, custom WMS source on second map, synced center and a Graticule Layer on second map.
Center: @_map?.Center @@ -22,6 +26,10 @@ Zoom: @_map?.Zoom FormatOptions="@_kmlOptions"> ++ + + @@ -55,4 +63,14 @@ Zoom: @_map?.Zoom //private OpenStreetMap _map; private Map _map; private dynamic _kmlOptions = new { ShowPointNames = true, ExtractStyles = true }; + + private async Task SetVisibleExtent() + { + await _map.SetVisibleExtent(new Extent(7.2797221255061775, 46.325069369932436, 7.852244417871202, 46.59670324642207)); + } + + private async Task ZoomToMarkers() + { + await _map.SetZoomToExtent(ExtentType.Markers); + } } \ No newline at end of file diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor index b862284..2ad65ad 100644 --- a/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor +++ b/src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor @@ -11,6 +11,7 @@ +@@ -61,4 +62,9 @@ { _map.ShapesList.Remove(_map.ShapesList.Last()); } + + private async Task ZoomToShapes() + { + await _map.SetZoomToExtent(ExtentType.Geometries); + } } \ No newline at end of file diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs index f040bbf..69119c5 100644 --- a/src/OpenLayers.Blazor/Map.razor.cs +++ b/src/OpenLayers.Blazor/Map.razor.cs @@ -552,10 +552,11 @@ public async Task SetZoom(double zoom) /// Zooms to the given extent /// /// + /// Padding (in pixels) to be cleared inside the view. Values in the array are top, right, bottom and left padding. defaults to [0,0,0,0] ///
@_featureInfo
- public ValueTask SetZoomToExtent(ExtentType extent) + public ValueTask SetZoomToExtent(ExtentType extent, decimal[]? padding = null) { - return _module?.InvokeVoidAsync("MapOLZoomToExtent", _mapId, extent.ToString()) ?? ValueTask.CompletedTask; + return _module?.InvokeVoidAsync("MapOLZoomToExtent", _mapId, extent.ToString(), padding) ?? ValueTask.CompletedTask; } /// diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js index 73104f9..8132ee1 100644 --- a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js +++ b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js @@ -28,8 +28,8 @@ export function MapOLLoadGeoJson(mapId, json, dataProjection, raiseEvents) { _MapOL[mapId].loadGeoJson(json, dataProjection, raiseEvents); } -export function MapOLZoomToExtent(mapId, extent) { - _MapOL[mapId].setZoomToExtent(extent); +export function MapOLZoomToExtent(mapId, extentType, padding) { + _MapOL[mapId].setZoomToExtent(extentType, padding); } export function MapOLMarkers(mapId, markers) { @@ -498,18 +498,20 @@ MapOL.prototype.setZoom = function (zoom) { this.Map.getView().setZoom(zoom); }; -MapOL.prototype.setZoomToExtent = function (extent) { - switch (extent) { +MapOL.prototype.setZoomToExtent = function (extentType, padding) { + if (padding == null) + padding = undefined; + switch (extentType) { case "Markers": var extent = this.Markers.getSource().getExtent(); if (extent[0] === Infinity) return; - this.Map.getView().fit(extent, this.Map.getSize()); + this.Map.getView().fit(extent, { size: this.Map.getSize(), padding:padding }); break; case "Geometries": var extent = this.Geometries.getSource().getExtent(); if (extent[0] === Infinity) return; - this.Map.getView().fit(extent, this.Map.getSize()); + this.Map.getView().fit(extent, { size: this.Map.getSize(), padding:padding }); break; } }; @@ -678,7 +680,9 @@ MapOL.prototype.disableVisibleExtentChranged = false; MapOL.prototype.setVisibleExtent = function (extent) { this.disableVisibleExtentChanged = true; - this.Map.getView().fit(new Array(extent.x1, extent.y1, extent.x2, extent.y2), this.Map.getSize()); + var viewProjection = this.Map.getView().getProjection(); + const te = ol.proj.transformExtent(new Array(extent.x1, extent.y1, extent.x2, extent.y2), this.Options.coordinatesProjection, viewProjection); + this.Map.getView().fit(te, this.Map.getSize()); this.disableVisibleExtentChanged = false; };