Editing a GeoJSON layer that I just added to the map

Question

I have created a Leaflet map and added a GeoJSON layer like this.

var map_rgb = L.map("map_rgb",{center: [userLat, userLon],crs: L.CRS.EPSG3857,zoom:'{{zoom}}',zoomControl: true,preferCanvas: false,});

var tile_layer_google_map = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {    maxZoom: 23, subdomains:['mt0','mt1','mt2','mt3'],"attribution": "Google Satellite"}).addTo(map_rgb);
var building_layer = L.geoJson(bldgs, {color: "#FF0000", weight: 3, fill: false});
   
var drawnItems = new L.FeatureGroup();
    building_layer.addTo(drawnItems);
    map_rgb.addLayer(drawnItems);
    //drawnItems.enableEdit();
        var drawControl = new L.Control.Draw({
            draw: {
                polygon: {
                    shapeOptions: {
                        color: 'red',
            fill: false,
                    },
                    allowIntersection: false,
                    drawError: {
                        color: 'orange',
                        timeout: 1000
                    },
                    showArea: true,
                    metric: false,
                    repeatMode: true,
          
                },
          edit: {
                featureGroup: drawnItems
            }
        });
        map_rgb.addControl(drawControl);

        map_rgb.on(L.Draw.Event.CREATED, function (e) {
            var type = e.layerType,
                layer = e.layer;
            drawnItems.addLayer(layer);
        });

I would like to edit the polygons in the geojson building_layer (modify vertices of existing polygons and also add new polygons). However, when I click the edit button, the polygons in the building_layer are not showing as editable. I am only able to add new polgyons. How can I make the building_layer editable?

Answer 1

It seems that for some reason Leaflet.draw plugin does not like when layer groups (which L.geoJSON layer is) are added to layer group with drawn/edited items.

I didn't go into details of why this happens, simple solution is to iterate through layers from building_layer layer and add them one by one to drawn items (tested):

var drawnItems = new L.featureGroup();

building_layer.eachLayer(function (layer) {
  drawnItems.addLayer(layer);
});