Add event listener to draw control

Author: stfnkth

examples/standalone/layers/geojson_vector_layer.py

@@ -19,5 +19,6 @@
 m.add_control(zoom_slider)
 m.add_layer(topojson_layer)
 m.add_tooltip()
+m.add_control(ol.DrawControl())
 # m.remove_control(zoom_slider.id)
 m.save("/tmp/ol-example.html")

src/openlayers/controls.py

@@ -10,7 +10,8 @@
     ScaleLineControl,
     ZoomSliderControl,
     ZoomControl,
-    RotateControl
+    RotateControl,
+    DrawControl
 )
 
 __all__ = [
@@ -20,4 +21,5 @@
     "ScaleLineControl",
     "ZoomSliderControl",
     "MousePositionControl",
+    "DrawControl"
 ]

src/openlayers/js/openlayers.standalone.js

@@ -59,6 +59,8 @@ class InfoBox(Control):
         "top: 65px; left: .5em; padding: 5px;", serialization_alias="cssText"
     )
 
+class DrawControl(Control): ...
+
 
 # --- Control type
 ControlT = Union[
@@ -70,4 +72,5 @@ class InfoBox(Control):
     ZoomControl,
     RotateControl,
     InfoBox,
+    DrawControl
 ]

src/openlayers/models/controls.py

@@ -8,6 +8,7 @@ import Rotate from 'ol/control/Rotate';
 import Attribution from 'ol/control/Attribution.js';
 
 import { InfoBox } from './custom-controls/info-box';
+import { DrawControl } from './custom-controls/draw';
 
 const zoom = new Zoom();
 zoom.setProperties({ id: "zoom", type: "ZoomControl" });
@@ -29,7 +30,8 @@ const controlCatalog: ControlCatalog = {
     ZoomControl: Zoom,
     RotateControl: Rotate,
     AttributionControl: Attribution,
-    InfoBox: InfoBox
+    InfoBox: InfoBox,
+    DrawControl: DrawControl
 };
 
 export { controlCatalog, defaultControls };

srcjs/ipywidget-ts/controls.ts

@@ -25,10 +25,12 @@ let draw: Draw;
 let snap: Snap;
 
 const source = new VectorSource({ wrapX: false });
+/*
 source.on("addfeature", (e) => {
     const features = source.getFeatures().map(f => featureToGeoJSON(f));
     console.log("draw features", features);
-})
+});
+*/
 const modify = new Modify({ source: source });
 const vectorLayer = new VectorLayer({
     source: source,

srcjs/ipywidget-ts/custom-controls/draw.ts

@@ -1,3 +1,5 @@
+import { DrawControl } from "./custom-controls/draw";
+
 import MapWidget from "./map";
 
 function filter(obj: any): any {
@@ -42,6 +44,20 @@ function addEventListernersToMapWidget(mapWidget: MapWidget): void {
     // --- Controls
     map.getControls().on("add", (e) => {
         const control = e.element;
+        // if (control.get("type") === "DrawControl")
+        if (control instanceof DrawControl) {
+            control.onAdd();
+            // TODO: `if (model)`!
+            if (true) {
+                for (const event of ["addfeature", "changefeature"]) {
+                    // @ts-expect-error
+                    control.getLayer().getSource()?.on(event, (e) => {
+                        console.log(control.getGeoJSONFeatures());
+                    });
+                }
+            }
+        }
+
         metadata.controls.push(control.getProperties());
         console.log("control", control.get("id"), "added", metadata);
         updateModel();