Add map clicked event

Author: Stefan Kuethe

examples/standalone/layers/gpx_vector_layer.py

@@ -13,4 +13,6 @@
 m = ol.Map()
 m.add_layer(gpx_layer)
 m.add_tooltip()
+# m.add_call("addClickInteraction")
+m.add_click_interaction()
 m.save("/tmp/ol-example.html")

marimo/getting-started.py

@@ -16,6 +16,7 @@ def _():
 @app.cell
 def _(ol):
     m = ol.MapWidget()
+    m.add_click_interaction()
     return (m,)
 
 
@@ -37,6 +38,12 @@ def _(widget):
     return
 
 
+@app.cell
+def _(widget):
+    widget.value["clicked"]
+    return
+
+
 @app.cell
 def _():
     return

src/openlayers/anywidget.py

@@ -25,7 +25,7 @@ class MapWidget(Map, AnyWidget):
     calls = traitlets.List().tag(sync=True)
     created = traitlets.Bool().tag(sync=True)
     options = traitlets.Dict().tag(sync=True)
-    # clicked = traitlets.Dict().tag(sync=True)
+    clicked = traitlets.Dict().tag(sync=True)
     view_state = traitlets.Dict().tag(sync=True)
     metadata = traitlets.Dict().tag(sync=True)
 

src/openlayers/js/openlayers.anywidget.js

@@ -167,6 +167,10 @@ def add_drag_and_drop_interaction(
 
         return self.add_call("addDragAndDropVectorLayers", formats, style)
 
+    def add_click_interaction(self) -> None:
+        """Add a click interaction to map"""
+        self.add_call("addClickInteraction")
+
     def add_modify_interaction(self, layer_id) -> None:
         """Add a modify interaction to the map
 

src/openlayers/js/openlayers.standalone.js

@@ -10,7 +10,7 @@ import Snap from "ol/interaction/Snap";
 import { JSONConverter } from "./json";
 import { TYPE_IDENTIFIER, GEOJSON_IDENTIFIER } from "./constants";
 import { defaultControls } from "./controls";
-
+import { parseClickEvent } from "./utils";
 // import { DrawControl } from "./custom-controls/draw";
 
 import { featureToGeoJSON } from "./utils";
@@ -258,6 +258,18 @@ export default class MapWidget {
     addSelectFeaturesToMap(this._map, this._model);
   }
 
+  addClickInteraction(): void {
+    const model = this._model;
+    this._map.on("click", (e) => {
+      const info = parseClickEvent(e);
+      console.log(info);
+      if (model) {
+        model.set("clicked", info);
+        model.save_changes();
+      }
+    });
+  }
+
   addDragAndDropVectorLayers(formatsDef?: JSONDef[], style?: FlatStyle): void {
     const formats = formatsDef?.map(item => jsonConverter.parse(item));
     console.log("drag and drop formats", formats);

src/openlayers/map.py

@@ -12,7 +12,8 @@ function parseClickEvent(e: MapBrowserEvent): any {
     const view = e.target.getView();
     const projectionCode = view.getProjection().getCode();
     const info = {
-        center: view.getCenter(),
+        // center: view.getCenter(),
+        coordinate: e.coordinate,
         projection: projectionCode,
         zoom: view.getZoom()
     };