Handling Leaflet Delete and Edit Event

[joseph-fidelis]

Description

    def handle_draw(e: events.GenericEventArguments):
        layer = e.args['layerType']
        
        match layer:
            case 'marker':
                map.marker(latlng=(e.args['layer']['_latlng']['lat'],e.args['layer']['_latlng']['lng']))
            case 'polygon':
                map.generic_layer(name='polygon', args=[e.args['layer']['_latlngs']])
            case 'circle':
                print(e.args)
                lat = e.args['layer']['_latlng']['lat']
                long = e.args['layer']['_latlng']['lng']
                radius = e.args['layer']['_mRadius']
                circle_color = "red"
                map.generic_layer(name='circle',args=[[lat, long], {'color': circle_color, 'radius': radius}])
            case 'rectangle':
                bounds = e.args['layer']['_bounds']
                print(bounds)
                rec_color = "red"
                map.generic_layer(name='rectangle', args=[bounds, {"color": rec_color, "weight": 1}])

            case 'circlemarker':
                print(e.args)
                lat = e.args['layer']['_latlng']['lat']
                long = e.args['layer']['_latlng']['lng']
                radius = e.args['layer']['_radius']
                map.generic_layer(name='circlemarker',args=[[lat, long], {'color': 'green', 'radius': radius}])
                # map.generic_layer(name='circlemarker', args=[e.args['layer']['_latlngs']])
            case 'polyline':
                poly_color = color.value
                map.generic_layer(name='polygon', args=[e.args['layer']['_latlngs'],{'color': poly_color}])
                
                
    def handle_delete(e: events.GenericEventArguments):
        layer = e.args['layerType']
        print(f'layer ---> {layer}')
        print(f'E ---> {e.args}')
        

    entry_latitude = 26.645736257721126
    entry_longitude = -81.86950045562617
    draw_control = {
        'draw': {
            'polygon': True,
            'marker': True,
            'circle': True,
            'rectangle': False, # TODO -> work on later 
            'polyline': True,
            'circlemarker': False, # TODO -> work on later 
        },
    }
    map = ui.leaflet(center=(entry_latitude, entry_longitude),draw_control=draw_control, zoom=19,options={
        "zoomControl": False,
 
    }).classes('h-full fixed')

    map.clear_layers()
    map.tile_layer(
        url_template=r'http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
        options={
            'maxZoom': 25,
            'zoomControl': False,
            'attribution':'© Google Maps',
            'subdomains': ['mt0', 'mt1', 'mt2', 'mt3']
        },
    )

I currently can not handle editing and deleting of draw control items. The Draw-Control edit and delete button shows, but I they are disabled by default. Maybe I am doing something wrong

[falkoschindler]

Hi @joseph-fidelis,

As far as I can tell, editing and deleting map objects is currently not supported. I just couldn't figure out how to add new layers so that the draw control knows they are editable.

Here is what we've got so far:

def handle_draw(e: events.GenericEventArguments):
    if e.args['layerType'] == 'marker':
        m.marker(latlng=(e.args['layer']['_latlng']['lat'],
                         e.args['layer']['_latlng']['lng']))
    if e.args['layerType'] == 'polygon':
        m.generic_layer(name='polygon', args=[e.args['layer']['_latlngs']])

draw_control = {
    'draw': {
        'polygon': True,
        'marker': True,
        'circle': False,
        'rectangle': False,
        'polyline': False,
        'circlemarker': False,
    },
    'edit': False,
}
m = ui.leaflet(center=(51.505, -0.09), zoom=13, draw_control=draw_control)
m.on('draw:created', handle_draw)

But in the official Leaflet example they work with a featureGroup "drawnItems":

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
        map = new L.Map('map', { center: new L.LatLng(51.505, -0.04), zoom: 13 }),
        drawnItems = L.featureGroup().addTo(map);
L.control.layers({
    'osm': osm.addTo(map),
    "google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
        attribution: 'google'
    })
}, { 'drawlayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true
        }
    }
}));

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;

    drawnItems.addLayer(layer);
});

Not sure how to do that in NiceGUI. But any ideas and suggestions are very welcome!

[joseph-fidelis]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Map with DrawOptions</title>
    <!-- Include Leaflet CSS and JavaScript -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Include Leaflet.draw CSS and JavaScript -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css" />
    <script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
</head>
<body>

<!-- Map container -->
<div id="map" style="height: 500px;"></div>

<script>
    // Initialize the map
    var map = L.map('map').setView([51.505, -0.09], 13);

    // Add a tile layer (you can use other tile providers)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

    // Initialize the Leaflet.draw control
    var drawControl = new L.Control.Draw({
        draw: {
            polygon: true,
            marker: true,
            circle: true,
            rectangle: true,
            polyline: true,
        },
        edit: {
            featureGroup: drawnItems, // Initialize an empty feature group for editing
            edit: true,
            remove: true
        }
    });
    

    // Add the Leaflet.draw control to the map
    map.addControl(drawControl);

    // Event handlers for drawn items
    map.on('draw:created', function (event) {
        var layer = event.layer;
        drawnItems.addLayer(layer);
    });

    map.on('draw:edited', function (event) {
        var layers = event.layers;
        layers.eachLayer(function (layer) {
            // Handle edited layers
        });
    });

    map.on('draw:deleted', function (event) {
        var layers = event.layers;
        layers.eachLayer(function (layer) {
            // Handle deleted layers
        });
    });
</script>

</body>
</html>

[joseph-fidelis]

@falkoschindler Here is a sample project with the edit and delete working.

   // Event handlers for drawn items
    map.on('draw:created', function (event) {
        var layer = event.layer;
        drawnItems.addLayer(layer);
    });

the main part is this adding the created layer to the drawn item

[joseph-fidelis]

Lastly can you expose the drawlayer position, would like to put at a different position. Hope this helps

[joseph-fidelis]

@falkoschindler
I added this piece of code and the edit/delete controls seems to be working. Fine

[falkoschindler]

Thanks, @joseph-fidelis, this is a great start. There're still some challenges though:

1. The "draw:edited" and "draw:deleted" events fail due to circular references. We should fix them so that the user code can handle modifications to drawn items.
2. We should probably sync drawnItems to the server so that new clients see them (on the shared auto-index page) and to allow pre-populating them, e.g., with objects from a database.
3. Since the drawn objects now remain visible, this feature breaks existing code and should be published in a major release.

[falkoschindler]

I just created PR #3586, addressing points 1 and 3.

[joseph-fidelis]

Nice @falkoschindler I will test it out and give you feedback