Added: OnHover shape

lolochristen · Jun 12, 2024 · 631a68b · 631a68b
1 parent 9fb822a
commit 631a68b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor
@@ -49,12 +49,13 @@ Altitude @(_altitude)m
 Mouse Position: @_mousePosition
 Visible Extent: @_map?.VisibleExtent
 @_info
+@_hover_info
         </pre>
         </p>
     </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" ZoomSliderControl FullScreenControl>
+<SwissMap @ref="_map" OnHover="OnHover" 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)
@@ -73,13 +74,14 @@ Visible Extent: @_map?.VisibleExtent
 
  <CodeView Source="Index.razor" />
 
- @code {
+@code {
     private SwissMap _map = null!;
     private Coordinate? _mousePosition;
     private double _zoom = 3;
     private decimal _altitude;
     private Coordinate? _lastPosition;
     private string _info = "";
+    private string _hover_info = "";
     bool _enableInteractions = true;
     private double _rotation;
 
@@ -92,6 +94,12 @@ Visible Extent: @_map?.VisibleExtent
         await GetAltitude(coordinate);
     }
 
+    private async Task OnHover(Shape shape)
+    {
+        _hover_info = $"HOVERED: " + shape.Id;
+        await Task.CompletedTask;
+    }
+
     private void OnPointerMove(Coordinate coordinate)
     {
         _mousePosition = coordinate;

diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs
@@ -112,6 +112,12 @@ public Map()
     [Parameter]
     public EventCallback<Coordinate> OnPointerMove { get; set; }
 
+    /// <summary>
+    ///     Event when the pointer hovers over a shape
+    /// </summary>
+    [Parameter]
+    public EventCallback<Shape> OnHover { get; set; }
+
     /// <summary>
     ///     Event when the rendering is complete
     /// </summary>
@@ -440,6 +446,12 @@ public Task OnInternalPointerMove(Coordinate coordinate)
         return OnPointerMove.InvokeAsync(coordinate);
     }
 
+    [JSInvokable]
+    public Task OnInternalHover(Internal.Shape shape)
+    {
+        return OnHover.InvokeAsync(new Shape(shape));
+    }
+
     [JSInvokable]
     public async Task OnInternalCenterChanged(Coordinate coordinate)
     {

diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
@@ -608,6 +608,14 @@ MapOL.prototype.onMapPointerMove = function (evt, element) {
     if (evt.dragging || Number.isNaN(evt.coordinate[0])) {
         return;
     }
+
+    var that = this;
+    this.Map.forEachFeatureAtPixel(evt.pixel,
+        function (feature) {
+            const shape = that.mapFeatureToShape(feature);
+            that.Instance.invokeMethodAsync("OnInternalHover", shape);
+        });
+
     const coordinate = ol.proj.transform(evt.coordinate,
         this.Map.getView().getProjection(),
         this.Options.coordinatesProjection);