ConfigureJsMethod / OnDoubleClick (#86)

* New ConfigureJsMethod property to set a JS method to be called after map initialization. New OnDoubleClick Event * use ol.js/map * update min --------- Co-authored-by: lolochristen <[email protected]>
lolochristen · Oct 28, 2024 · 1ee0fca · 1ee0fca
1 parent 55eeb45
commit 1ee0fca
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 16 deletions.
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/EventsDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/EventsDemo.razor
@@ -30,6 +30,7 @@ Pointer: @_pointer
                EnableEditShapes
                CenterChanged="@((o) => AddMessage($"CenterChanged {o}"))"
                OnClick="@((o) => AddMessage($"OnClick {o}"))"
+               OnDoubleClick="@((o) => AddMessage($"OnDoubleClick {o}"))"
                VisibleExtentChanged="@((o) => AddMessage($"VisibleExtentChanged {o}"))"
                OnPointerMove="@((o) => _pointer = o)"
                ZoomChanged="@((o) => AddMessage($"ZoomChanged {o}"))"
@@ -39,7 +40,8 @@ Pointer: @_pointer
                OnShapeAdded="@((o) => AddMessage($"OnShapeAdded {o}"))"
                OnShapeHover="@((o) => AddMessage($"OnShapeHover {o}"))"
                OnLayerAdded="@((o) => AddMessage($"OnLayerAdded {o}"))"
-               OnLayerRemoved="@((o) => AddMessage($"OnLayerRemoved {o}"))">
+               OnLayerRemoved="@((o) => AddMessage($"OnLayerRemoved {o}"))"
+               ConfigureJsMethod="myComponent.configureMap">
     <Layers>
         <Layer @ref="_layer" LayerType="LayerType.Vector" SourceType="SourceType.Vector" SelectionEnabled SelectionChanged="@((o) => AddMessage($"SelectionChanged {o}"))">
             <Shapes>

diff --git a/src/OpenLayers.Blazor.Demo/wwwroot/index.html b/src/OpenLayers.Blazor.Demo/wwwroot/index.html
@@ -11,7 +11,7 @@
     <link href="OpenLayers.Blazor.Demo.styles.css" rel="stylesheet" />
     <link href="lib/openlayers/ol.css" rel="stylesheet" />
     <link href="_content/OpenLayers.Blazor/OpenLayers.Blazor.css" rel="stylesheet" />
-    <script src="lib/openlayers/dist/ol.min.js"></script>
+    <script src="lib/openlayers/dist/ol.js"></script>
     <script src="lib/ol-mapbox-style/dist/olms.min.js"></script>
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/gradient-dark.min.css" rel="stylesheet" />
@@ -32,13 +32,26 @@
     <a class="dismiss">🗙</a>
 </div>
 
+<script>
+    window.myComponent = {
+        configureMap: (map) => {
+            // remove double click zoom 
+            map.getInteractions().forEach(function (interaction) {
+                if (interaction instanceof ol.interaction.DoubleClickZoom) {
+                    interaction.setActive(false);
+                }
+            });
+        }
+    }
+</script>
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
 <script type="text/javascript" src="https://unpkg.com/highlightjs-cshtml-razor/dist/cshtml-razor.min.js"></script>
 <script src="_framework/blazor.webassembly.js"></script>
 <script>
-        window.highlightSnippet = function () {
-            hljs.highlightAll();
-        }
-    </script>
+    window.highlightSnippet = function () {
+        hljs.highlightAll();
+    }
+</script>
 </body>
 </html>
diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs
@@ -123,6 +123,12 @@ public ObservableCollection<Shape> ShapesList
     [Parameter]
     public EventCallback<Coordinate> OnClick { get; set; }
 
+    /// <summary>
+    ///     Event when a point in the map gets double clicked. Event returns current coordinates
+    /// </summary>
+    [Parameter]
+    public EventCallback<Coordinate> OnDoubleClick { get; set; }
+
     /// <summary>
     ///     Event when the pointer gets moved
     /// </summary>
@@ -418,6 +424,24 @@ public double MaxZoom
         set => Options.MaxZoom = value;
     }
 
+    /// <summary>
+    ///     Gets or sets a javascript which gets call after initialization of the map to do customizations. First argument is the map object.
+    /// </summary>
+    /// <example>
+    ///     _map.ConfigureJsMethod = "myComponent.configureMap";
+    /// 
+    ///     <script>
+    ///         window.myComponent = {
+    ///         configureMap: (map) => {
+    ///                 map.getInteractions().forEach(function (interaction) {
+    ///                     if (interaction instanceof ol.interaction.DoubleClickZoom) { interaction.setActive(false); }
+    ///                 });
+    ///         }}
+    ///     </script>
+    /// </example>
+    [Parameter]
+    public string? ConfigureJsMethod { get; set; }
+
     /// <summary>
     ///     Gets or set the default layer for shapes.
     /// </summary>
@@ -527,7 +551,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             if (_module != null)
                 await _module.InvokeVoidAsync("MapOLInit", _mapId, _popupId, Options, Center, Zoom, Rotation, InteractionsEnabled,
                     LayersList.Select(p => p.InternalLayer).ToArray(),
-                    Instance);
+                    Instance, ConfigureJsMethod);
 
             foreach (var layer in LayersList)
             {
@@ -609,6 +633,15 @@ public Task OnInternalClick(Coordinate coordinate)
         return OnClick.InvokeAsync(coordinate);
     }
 
+    [JSInvokable]
+    public Task OnInternalDoubleClick(Coordinate coordinate)
+    {
+#if DEBUG
+        Console.WriteLine($"OnInternalDoubleClick: {coordinate}");
+#endif
+        return OnDoubleClick.InvokeAsync(coordinate);
+    }
+
     [JSInvokable]
     public Task OnInternalPointerMove(Coordinate coordinate)
     {

diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
@@ -1,7 +1,7 @@
 var _MapOL = new Array();
 
-export function MapOLInit(mapId, popupId, options, center, zoom, rotation, interactions, layers, instance) {
-    _MapOL[mapId] = new MapOL(mapId, popupId, options, center, zoom, rotation, interactions, layers, instance);
+export function MapOLInit(mapId, popupId, options, center, zoom, rotation, interactions, layers, instance, configureJsMethod) {
+    _MapOL[mapId] = new MapOL(mapId, popupId, options, center, zoom, rotation, interactions, layers, instance, configureJsMethod);
 }
 
 export function MapOLDispose(mapId) {
@@ -111,7 +111,7 @@ export function MapOLApplyMapboxStyle(mapId, styleUrl, accessToken) {
     _MapOL[mapId].applyMapboxStyle(styleUrl, accessToken);
 }
 
-function MapOL(mapId, popupId, options, center, zoom, rotation, interactions, layers, instance) {
+function MapOL(mapId, popupId, options, center, zoom, rotation, interactions, layers, instance, configureJsMethod) {
     this.Instance = instance;
     this.Options = options;
 
@@ -222,17 +222,32 @@ function MapOL(mapId, popupId, options, center, zoom, rotation, interactions, la
 
     this.Map.addOverlay(this.OverlayPopup);
 
+    this.setInteractions(interactions);
+    this.setSelectionSettings(true);
+
+    if (configureJsMethod) {
+        try {
+            const namespaces = configureJsMethod.split(".");
+            const func = namespaces.pop();
+            var context = window;
+            for (let i = 0; i < namespaces.length; i++) {
+                context = context[namespaces[i]];
+            }
+            context[func].apply(context, [this.Map]);
+        //    configure(configureJsMethod, window, [options]);
+        } catch (err) {
+            console.error(err);
+        }
+    }
+
     this.Map.on("click", function(evt) { that.onMapClick(evt, that.OverlayPopup, popupElement) });
+    this.Map.on("dblclick", function(evt) { that.onMapDblClick(evt) });
     this.Map.on("pointermove", function(evt) { that.onMapPointerMove(evt) });
     this.Map.on("rendercomplete", function(evt) { that.Instance.invokeMethodAsync("OnInternalRenderComplete"); });
     this.Map.getView().on("change:resolution", function(evt) { that.onMapResolutionChanged(); });
     this.Map.getView().on("change:center", function(evt) { that.onMapCenterChanged(); });
     this.Map.getView().on("change:rotation", function(evt) { that.onMapRotationChanged(); });
 
-    this.setInteractions(interactions);
-
-    this.setSelectionSettings(true);
-
     this.onMapCenterChanged();
 }
 
@@ -627,6 +642,13 @@ MapOL.prototype.onMapClick = function(evt, popup, element) {
         });
 };
 
+MapOL.prototype.onMapDblClick = function(evt) {
+    const coordinate = ol.proj.transform(evt.coordinate,
+        this.Map.getView().getProjection(),
+        this.Options.coordinatesProjection);
+    this.Instance.invokeMethodAsync("OnInternalDoubleClick", coordinate);
+}
+
 MapOL.prototype.showPopup = function(coordinates) {
     this.OverlayPopup.setPosition(
         ol.proj.transform(coordinates,

diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.min.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.min.js
diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.min.js.map b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.min.js.map