Leaflet: Programmatically add polygon which is then editable using draw controls

[amks1]

Question

The blue polygon is drawn using the draw controls. And the red one is programmatically added by the following code, but it's not editable.

m.generic_layer(name='polygon', args=[latlngs, {'color': 'red'}])

I want to add a polygon programmatically, and then let the user edit it.

I tried using addLayer like this:

polygon = f"L.polygon({latlngs}, {{color: 'red'}})"
m.run_map_method(':addLayer', polygon)

But the layer doesn't get added at all.

Any suggestions?

[falkoschindler]

Hi @amks1,

Support for editing Leaflet layers is still pretty limited (see PR #3586). To make layers editable, we need to somehow add them to the FeatureGroup of drawn items. Here is quite a hacky example how this could be done:

m = ui.leaflet(center=(51.505, -0.09), draw_control={}).classes('h-96')
ui.button('Add marker', on_click=lambda: ui.run_javascript(f'''
    const m = getElement('{m.id}');
    m.map.eachLayer(layer => {{
        if (layer instanceof L.FeatureGroup) {{
            layer.addLayer(L.marker([51.505, -0.09]));
        }}
    }});
'''))

[amks1]

@falkoschindler Thanks a lot, it works very well! :)