Map controls (#50)

- New Parameters on Map component to show controls:
  - ZoomControl
  - AttributionControl
  - FullScreenControl
  - ZoomSliderControl
  - RotateControl
  - OverviewMap
  - ZoomToExtentControl

---------

Co-authored-by: lolochristen <lolochristen@users.noreply.github.com>

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

@@ -34,11 +34,11 @@
         <div class="d-flex">
             <div class="input-group w-25">
                 <label for="zoom" class="form-label small">Zoom @_zoom</label>
-                <input type="range" class="form-range" id="zoom" min="1" max="15" step=".1" @bind-value="_zoom">
+                <input type="range" class="form-range" id="zoom" min="1" max="15" step=".01" @bind="_zoom" @bind:event="oninput">
             </div>
             <div class="input-group w-25 m-lg-2">
                 <label for="rotation" class="form-label small">Rotation @_rotation</label>
-                <input type="range" class="form-range" id="rotation" step=".1" min="-6" max="6" @bind-value="_rotation">
+                <input type="range" class="form-range" id="rotation" step=".01" min="-6" max="6" @bind="_rotation" @bind:event="oninput">
             </div>
         </div>
         <p>
@@ -54,7 +54,7 @@ Visible Extent: @_map?.VisibleExtent
     </div>
 </div>
 
-<SwissMap @ref="_map" OnClick="OnMapClick" OnPointerMove="OnPointerMove" OnRenderComplete="@(() => { _info = "Render complete: " + DateTime.Now.ToString("h:mm:ss.ms"); })" @bind-Zoom="_zoom" Style="height:800px;" Class="card" InteractionsEnabled="@_enableInteractions" @bind-Rotation="_rotation">
+<SwissMap @ref="_map" OnClick="OnMapClick" OnPointerMove="OnPointerMove" OnRenderComplete="@(() => { _info = "Render complete: " + DateTime.Now.ToString("h:mm:ss.ms"); })" @bind-Zoom="_zoom" Style="height:800px;" Class="card" InteractionsEnabled="@_enableInteractions" @bind-Rotation="_rotation" ZoomSliderControl FullScreenControl>
     <Popup>
         <div id="popup" class="ol-box">
             @if (context is Marker marker)

src/OpenLayers.Blazor/Map.razor.cs

@@ -262,6 +262,42 @@ public bool AutoPopup
     [Parameter]
     public bool InteractionsEnabled { get; set; }
 
+
+    /// <summary>
+    /// Get or sets if the zoom control is visible
+    /// </summary>
+    [Parameter] public bool ZoomControl { get => Options.ZoomControl; set => Options.ZoomControl = value; }
+
+    /// <summary>
+    /// Gets or sets if the attribution control is visible
+    /// </summary>
+    [Parameter] public bool AttributionControl { get => Options.AttributionControl; set => Options.AttributionControl = value; }
+
+    /// <summary>
+    /// Gets or sets if full screen control is visible 
+    /// </summary>
+    [Parameter] public bool FullScreenControl { get => Options.FullScreenControl; set => Options.FullScreenControl = value; }
+
+    /// <summary>
+    /// Gets or sets boolean if zoom slider control is visible
+    /// </summary>
+    [Parameter] public bool ZoomSliderControl { get => Options.ZoomSliderControl; set => Options.ZoomSliderControl = value; }
+
+    /// <summary>
+    /// Gets or sets boolean if rotate to 0 control is visible
+    /// </summary>
+    [Parameter] public bool RotateControl { get => Options.RotateControl; set => Options.RotateControl = value; }
+
+    /// <summary>
+    /// Gets or sets boolean if a overview map using first layer is visible
+    /// </summary>
+    [Parameter] public bool OverviewMap { get => Options.OverviewMap; set => Options.OverviewMap = value; }
+
+    /// <summary>
+    /// Gets or sets boolean if zoom to extent control is visible
+    /// </summary>
+    [Parameter] public bool ZoomToExtentControl { get => Options.ZoomToExtentControl; set => Options.ZoomToExtentControl = value; }
+
     /// <summary>
     ///     Disposing resources.
     /// </summary>

src/OpenLayers.Blazor/Options.cs

@@ -49,4 +49,39 @@ public class Options
     /// Sets or gets the limit whenever the list of coordinates of a feature shall be included in events to improve response times.  
     /// </summary>
     public int SerializationCoordinatesLimit { get; set; } = 512;
+
+    /// <summary>
+    /// Get or sets if the zoom control is visible
+    /// </summary>
+    public bool ZoomControl { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets if the attribution control is visible
+    /// </summary>
+    public bool AttributionControl { get; set; } = true;
+
+    /// <summary>
+    /// Gets or sets if full screen control is visible 
+    /// </summary>
+    public bool FullScreenControl { get; set; }
+
+    /// <summary>
+    /// Gets or sets boolean if zoom slider control is visible
+    /// </summary>
+    public bool ZoomSliderControl { get; set; }
+
+    /// <summary>
+    /// Gets or sets boolean if rotate to 0 control is visible
+    /// </summary>
+    public bool RotateControl { get; set; }
+
+    /// <summary>
+    /// Gets or sets boolean if a overview map using first layer is visible
+    /// </summary>
+    public bool OverviewMap { get; set; }
+
+    /// <summary>
+    /// Gets or sets boolean if zoom to extent control is visible
+    /// </summary>
+    public bool ZoomToExtentControl { get; set; }
 }

src/OpenLayers.Blazor/wwwroot/openlayers_interop.js

@@ -182,23 +182,33 @@ function MapOL(mapId, popupId, options, center, zoom, rotation, interactions, ma
     this.Map = new ol.Map({
         layers: ollayers,
         target: mapId,
-        controls: this.Options.scaleLineUnit != "none"
-            ? ol.control.defaults.defaults().extend([
-                new ol.control.ScaleLine({
-                    units: this.Options.scaleLineUnit.toLowerCase()
-                })
-            ])
-            : null,
+        controls: [],
         view: new ol.View({
             projection: viewProjection,
             center: viewCenter,
             extent: viewExtent,
             zoom: zoom,
             rotation: rotation
-}),
+        }),
         interactions: ol.interaction.defaults.defaults().extend([new ol.interaction.DragRotateAndZoom()])
     });
 
+    if (this.Options.zoomControl) this.Map.addControl(new ol.control.Zoom())
+    if (this.Options.attributionControl) this.Map.addControl(new ol.control.Attribution())
+    if (this.Options.fullScreenControl) this.Map.addControl(new ol.control.FullScreen())
+    if (this.Options.zoomSliderControl) this.Map.addControl(new ol.control.ZoomSlider())
+    if (this.Options.rotateControl) this.Map.addControl(new ol.control.Rotate())
+    if (this.Options.scaleLineUnit != "none") {
+        this.Map.addControl(new ol.control.ScaleLine({
+            units: this.Options.scaleLineUnit.toLowerCase()}));
+    }
+    if (this.Options.overviewMap) {
+        this.Map.addControl(new ol.control.OverviewMap({
+            layers: [new ol.layer.Tile(layers[0])]
+        }))
+    }
+    if (this.Options.zoomToExtentControl) this.Map.addControl(new ol.control.ZoomToExtent())
+
     var that = this;
     var geoSource = new ol.source.Vector();
     geoSource.on("removefeature", function (evt) { that.onFeatureRemoved(evt.feature); });