Leaflet Draw – FeatureGroup Polygon and Polyline Cannot Be Edited with Leaflet-Draw

leafletleaflet-drawleaflet-plugins

I don't have much experience in Leaflet and I'm trying to learn from my mistakes. I have multiple polygons (just polygons) and some that have a polyline on top of it grouped as a featureGroup like:

var drawnItems = new L.FeatureGroup();
var mark = L.polygon(otherPoly, { title: 'testSimple', fillColor: 'blue', fillOpacity: 0.5, weight:20, color: 'green', opacity: 0.5, fill: true});
drawnItems.addLayer(mark);
var featureGroup = new L.featureGroup();
L.polygon(poly, { title: 'test', fillColor: '#F16E60', fillOpacity: 0.5, weight:20, color: '#F16E60', opacity: 0.5, fill: true}).addTo(featureGroup);
L.polyline(poly, { color: 'black', weight: '5', opacity: 0.7, dashArray: "10 10", clickable: false }).addTo(featureGroup);
drawnItems.addLayer(featureGroup);

poly = [
   [27.409550697482818, -82.4161570071192],
   [27.408793809505223, -82.41609048836837],
   [27.40876330512483, -82.41643166538779],
   [27.409230402899265, -82.41645312305991],
   [27.409567856048245, -82.41651105870916]]

I also have the drawControl:

var drawControl = new L.Control.Draw({
edit: {
    featureGroup: drawnItems,
    edit: {
        selectedPathOptions: {
            maintainColor: true,
            opacity: 0.3,
        }
    },
},
draw: {
    marker: false,
    polyline: false,
    rectangle: false,
    circle: false,
    circlemarker: false,
    polygon: {
        icon: new L.DivIcon({
            iconSize: new L.Point(10, 10),
            className: 'leaflet-div-icon leaflet-editing-icon'
        }),
        shapeOptions: { color: 'white', opacity: 0.3, fillOpacity: 0.5, weight: 20 },
        showArea: true,
    }
}
});

but the editing is not applying to the polygon from inside featureGroup.

enter image description here

Is there a way to edit the polygon from featureGroup? To remove the polyline when edit mode is on, and to allow the user to change polygon shape?

Best Answer

Leaflet-draw plugin can work only with basic vector layers, which means that members of drawnItems layer can only be basic vector layers like polylines and polygons, not layer groups.

If you want to edit your combined polygon that consists of two different styled polygons, you have to edit only one and then modify coordinates of the other when the first one changes. For this you can use draw:editvertex event processing function.

To access polygon which goes with the modified border, border polygon is defined with custom option polygon which contains the polygon layer.

Relevant part of the code could then look something like this (tested):

var drawnItems = new L.FeatureGroup().addTo(map);
var featureGroup = new L.FeatureGroup().addTo(map);

var polygon = L.polygon(polyCoords, {
  title: 'test',
  fillColor: '#F16E60',
  fillOpacity: 0.5,
  weight:20,
  color: '#F16E60',
  opacity: 0.5,
  fill: true
}).addTo(featureGroup);      
var polygonBorder = L.polygon(polyCoords, {
  color: 'black',
  weight: '3',
  opacity: 0.7,
  fill: false,
  dashArray: "10 10",
  polygon: polygon
}).addTo(featureGroup);

drawnItems.addLayer(polygonBorder);      

map.on('draw:editvertex', function (event) {
  var poly = event.poly;
  if (poly.options.polygon) {
    var coords = poly.getLatLngs();
    poly.options.polygon.setLatLngs(coords);
  }
});

Here is working JSFiddle: https://jsfiddle.net/TomazicM/7o9g5a6v/

Related Question