Add transform for SetVisibleExtent & Add padding to SetZoomToExtent (…

src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor

@@ -6,6 +6,10 @@
         <h3 class="card-title">OpenStreetMap</h3>
     </div>
     <div class="card-body">
+        <div class="btn-toolbar gap-1" role="toolbar">
+            <button class="btn btn-secondary" @onclick="SetVisibleExtent">Adelboden</button>
+            <button class="btn btn-secondary" @onclick="ZoomToMarkers">Zoom to Markers</button>
+        </div>
     <p>Demo with a loaded KML Layer on first map, custom WMS source on second map, synced center and a Graticule Layer on second map.</p>
     <pre>
 Center: @_map?.Center
@@ -22,6 +26,10 @@ Zoom: @_map?.Zoom
                FormatOptions="@_kmlOptions">
         </Layer>
     </Layers>
+    <Features>
+        <Marker Type="MarkerType.MarkerPin" Coordinate="new Coordinate(x, y)"></Marker>
+        <Marker Type="MarkerType.MarkerPin" Coordinate="new Coordinate(x+2, y+2)"></Marker>
+    </Features>
 </OpenStreetMap>
 
 <OpenStreetMap Style="height:480px" Class="card" @bind-Center="_center" ScaleLineUnit="ScaleLineUnit.US">
@@ -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);
+    }
 }

src/OpenLayers.Blazor.Demo.Components/Pages/ShapesDemo.razor

@@ -11,6 +11,7 @@
     <div class="card-body">
         <button class="btn btn-primary" @onclick="AddShapes">Add some shapes</button>
         <button class="btn btn-primary" @onclick="RemoveShape">Remove the last</button>
+        <button class="btn btn-primary" @onclick="ZoomToShapes">Zoom to Shapes</button>
         <p>
             <code>@_featureInfo</code>
         </p>
@@ -61,4 +62,9 @@
     {
         _map.ShapesList.Remove(_map.ShapesList.Last());
     }
+
+    private async Task ZoomToShapes()
+    {
+        await _map.SetZoomToExtent(ExtentType.Geometries);
+    }
 }

src/OpenLayers.Blazor/Map.razor.cs

@@ -130,7 +130,7 @@
     /// <example>
     ///     <Layers>
     ///         <Layer SourceType="SourceType.TileWMS"
     ///             Url="https://sedac.ciesin.columbia.edu/geoserver/ows?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=gpw-v3%3Agpw-v3-population-density_2000&LANG=en"
     ///             Opacity=".3"
     ///             CrossOrigin="anonymous" />
     ///     </Layers>
@@ -552,10 +552,11 @@
     ///     Zooms to the given extent
     /// </summary>
     /// <param name="extent"></param>
+    /// <param name="padding">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]</param>
     /// <returns></returns>
-    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;
     }
 
     /// <summary>

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;
 };