feat: add on_click to GeomanDrawControl (#1261)

* feat: add on_click to GeomanDrawControl

* Fix: sourceTarget (clicked feature) instead of target (all features)

* feat: add hover_style to GeomanDrawControl

* lint

* some workaround

* update example

---------

Co-authored-by: Oliver Lopez <[email protected]>

Author: arjxn-py

docs/controls/geoman_draw_control.rst

@@ -36,7 +36,7 @@ Example
 
     m = Map(center=(50, 354), zoom=5)
 
-    draw_control = GeomanDrawControl()
+    draw_control = GeomanDrawControl(hover_style={"fillColor": "red"})
     draw_control.polyline =  {
         "pathOptions": {
             "color": "#6bc2e5",
@@ -75,6 +75,14 @@ Example
     editable_circle = Circle(location=(50, 356), radius=100000, pm_ignore=False, color="red")
     m.add(editable_circle)
 
+    # Define click handler
+    def handle_click(control, **kwargs):
+        print("Click event detected!")
+        print("Event content:", kwargs)
+
+    # Register click handler
+    draw_control.on_click(handle_click)
+
     m
 
 Methods

python/ipyleaflet/ipyleaflet/leaflet.py

@@ -2307,6 +2307,8 @@ class GeomanDrawControl(DrawControlBase):
     _view_name = Unicode("LeafletGeomanDrawControlView").tag(sync=True)
     _model_name = Unicode("LeafletGeomanDrawControlModel").tag(sync=True)
 
+    _click_callbacks = Instance(CallbackDispatcher, ())
+
     # Current mode & shape
     # valid values are: 'draw', 'edit', 'drag', 'remove', 'cut', 'rotate'
     # for drawing, the tool can be added after ':' e.g. 'draw:marker'
@@ -2321,6 +2323,9 @@ class GeomanDrawControl(DrawControlBase):
     polygon = Dict({ 'pathOptions': {} }).tag(sync=True)
     circlemarker = Dict({ 'pathOptions': {} }).tag(sync=True)
 
+    # Hover style (applies for all drawing modes)
+    hover_style = Dict().tag(sync=True) 
+
     # Disabled by default
     text = Dict().tag(sync=True)
 
@@ -2346,6 +2351,8 @@ def _handle_leaflet_event(self, _, content, buffers):
             if not isinstance(geo_json, list):
                 geo_json = [geo_json]
             self._draw_callbacks(self, action=action, geo_json=geo_json)
+        elif content.get('event', '').startswith('click'):
+            self._click_callbacks(self, **content)
 
     def on_draw(self, callback, remove=False):
         """Add a draw event listener.
@@ -2359,6 +2366,19 @@ def on_draw(self, callback, remove=False):
         """
         self._draw_callbacks.register_callback(callback, remove=remove)
 
+    def on_click(self, callback, remove=False):
+        """Add a click event listener.
+
+        Parameters
+        ----------
+        callback : callable
+            Callback function that will be called on click event.
+        remove: boolean
+            Whether to remove this callback or not. Defaults to False.
+        """
+        self._click_callbacks.register_callback(callback, remove=remove)
+    
+
     def clear_text(self):
         """Clear all text."""
         self.send({'msg': 'clear_text'})

python/jupyter_leaflet/src/controls/GeomanDrawControl.ts

@@ -93,6 +93,46 @@ export class LeafletGeomanDrawControlView extends LeafletControlView {
         }
       },
     });
+
+    // Click event handler
+    this.feature_group.on('click', (e) => {
+      this.send({
+        event: 'click',
+        geo_json: this.layer_to_json(e.sourceTarget),
+        latlng: e.latlng,
+      });
+    });
+
+    // Apply hover styling to a single layer
+    const applyHoverStyle = (layer: any) => {
+      layer.on('mouseover', () => {
+        const style = this.model.get('hover_style');
+        if (style && typeof layer.setStyle === 'function') {
+          if (!layer._originalStyle) {
+            layer._originalStyle = { ...layer.options }; // clone to prevent mutation
+          }
+          layer.setStyle(style);
+        }
+      });
+
+      layer.on('mouseout', () => {
+        if (layer._originalStyle && typeof layer.setStyle === 'function') {
+          layer.setStyle(layer._originalStyle);
+        }
+      });
+    };
+
+    // Apply to existing layers
+    this.feature_group.eachLayer((layer: any) => {
+      applyHoverStyle(layer);
+    });
+
+    // Apply to new layers
+    this.feature_group.on('layeradd', (e) => {
+      const layer = e.layer;
+      applyHoverStyle(layer);
+    });
+
     this.data_to_layers();
     this.map_view.obj.addLayer(this.feature_group);