feat: add on_click and hover_style to GeomanDrawControl

python/ipyleaflet/ipyleaflet/leaflet.py

@@ -2304,6 +2304,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'
@@ -2318,6 +2320,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)
 
@@ -2343,6 +2348,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.
@@ -2356,6 +2363,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

@@ -84,6 +84,24 @@ 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,
+      });
+    }); 
+    // Hover style
+    this.feature_group.on('mouseover', (e) => {
+      const layer = e.sourceTarget;
+      layer.setStyle(this.model.get('hover_style'));
+      layer.once('mouseout', () => {
+        this.feature_group.resetStyle(layer);
+      });
+    }); 
+
     this.data_to_layers();
     this.map_view.obj.addLayer(this.feature_group);