add demos for editing drawn items and drawing with custom options

nicegui/elements/leaflet.js

@@ -107,8 +107,11 @@ export default {
       const drawnItems = new L.FeatureGroup();
       this.map.addLayer(drawnItems);
       const drawControl = new L.Control.Draw({
-        edit: { featureGroup: drawnItems },
-        ...this.draw_control,
+        draw: this.draw_control.draw,
+        edit: {
+          ...this.draw_control.edit,
+          featureGroup: drawnItems,
+        },
       });
       this.map.addControl(drawControl);
       if (!this.hide_drawn_items) {

website/documentation/content/leaflet_documentation.py

@@ -94,6 +94,7 @@ def disable_pan_zoom() -> None:
     You can enable a toolbar to draw on the map.
     The `draw_control` can be used to configure the toolbar.
     This demo adds markers and polygons by clicking on the map.
+    By setting "edit" and "remove" to `True` (the default), you can enable editing and deleting drawn shapes.
 ''')
 def draw_on_map() -> None:
     from nicegui import events
@@ -107,14 +108,49 @@ def handle_draw(e: events.GenericEventArguments):
         'draw': {
             'polygon': True,
             'marker': True,
+            'circle': True,
+            'rectangle': True,
+            'polyline': True,
+            'circlemarker': True,
+        },
+        'edit': {
+            'edit': True,
+            'remove': True,
+        },
+    }
+    m = ui.leaflet(center=(51.505, -0.09), draw_control=draw_control)
+    m.classes('h-96')
+    m.on('draw:created', handle_draw)
+    m.on('draw:edited', lambda: ui.notify('Edit completed'))
+    m.on('draw:deleted', lambda: ui.notify('Delete completed'))
+
+
+@doc.demo('Draw with Custom Options', '''
+    You can draw shapes with custom options like stroke color and weight.
+    To hide the default rendering of drawn items, set `hide_drawn_items` to `True`.
+''')
+def draw_custom_options():
+    from nicegui import events
+
+    def handle_draw(e: events.GenericEventArguments):
+        options = {'color': 'red', 'weight': 1}
+        m.generic_layer(name='polygon', args=[e.args['layer']['_latlngs'], options])
+
+    draw_control = {
+        'draw': {
+            'polygon': True,
+            'marker': False,
             'circle': False,
             'rectangle': False,
             'polyline': False,
             'circlemarker': False,
         },
-        'edit': False,
+        'edit': {
+            'edit': False,
+            'remove': False,
+        },
     }
-    m = ui.leaflet(center=(51.505, -0.09), zoom=13, draw_control=draw_control)
+    m = ui.leaflet(center=(51.5, 0), draw_control=draw_control, hide_drawn_items=True)
     m.on('draw:created', handle_draw)