1

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?

2
  • You edited question and added additional question about deleting. GIS SE site policy requires focused questions, which amongst other things means one question per question. Please put question back as it was, or it might be closed as not compliant with the site policy.
    – TomazicM
    May 17, 2022 at 11:30
  • @TomazicM You are right. Sorry for that. I've made the changes. Also, thank you for your answer!
    – LAffair
    May 17, 2022 at 11:58

1 Answer 1

0

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/

2
  • I've added your code but for me it draws only the dashed line, without the red one bellow. When editing (inside draw:editvertex) I get the error "Cannot read properties of undefined (reading 'getLatLngs')" because event.poly is undefined. I have 2 simple polygons (green), and one that is combined (red with dashed black line on top) and I need edit and delete to work for both situations
    – LAffair
    May 17, 2022 at 10:48
  • Corrected code a bit. See working JSFiddle at jsfiddle.net/TomazicM/7o9g5a6v
    – TomazicM
    May 17, 2022 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.