Leaflet.draw icon indicating copy to clipboard operation
Leaflet.draw copied to clipboard

Edit mode allows intersection even when polygon: {allowIntersection: false}

Open stuporglue opened this issue 11 years ago • 12 comments

I have specified polygon: { allowIntersection: false } in my constructor.

For creating new features this is respected correctly.

When editing existing features intersections are allowed. It seems that edit mode should respect the allowIntersection parameter.

stuporglue avatar Apr 24 '13 17:04 stuporglue

Ah yes, currently edit doesn't support this functionality :( The code subsides in Draw.Polyline.js, Need to update Edit.Polyline to support allowIntersection as well.

jacobtoye avatar Apr 25 '13 21:04 jacobtoye

I would also like to see this fixed. It is currently limiting my ability to use turf.js (https://github.com/morganherlocker/turf/issues/92)

jduhls avatar Mar 08 '14 15:03 jduhls

I am trying to add this feature. I created an dragEnd event to check if it's intersected. If it is, then restoring the dragged marker back to previous position, also redrawing the polylines.

It's almost done. However, when I drag next or previous markers to trigger intersection, the restored polygon would lack of several points.

Anyone possibly to give me a hint?

    _onMarkerDragEnd: function (e) {

        // Allow intersection, stop here
        if (this.options.allowIntersection) {
            this._fireEdit();
            return;
        }

        var marker = e.target,
            intersects = false,
            polyLatLngs = this._poly.getLatLngs(),
            latlngs = [],
            polyLatLng,
            i;

        for (i in polyLatLngs) {
            if (polyLatLngs.hasOwnProperty(i)) {
                polyLatLng = polyLatLngs[i];
                if (this._poly.newLatLngIntersects(polyLatLng, true)) {
                    intersects = true;
                    polyLatLng = new L.LatLng(marker._srcLatLng.lat, marker._srcLatLng.lng);
                }
                latlngs.push(polyLatLng);
            }
        }

        // No intersection, stop here
        if (!intersects) {
            this._fireEdit();
            return;
        }

        // Reset this point in Polygon points array.
        this._poly.setLatLngs(latlngs);

        // Reset related markers
        marker.setLatLng(marker._srcLatLng);
        this.updateMarkers();
        this._poly.redraw();
    },

josephj avatar Sep 11 '14 23:09 josephj

I think it's all good now. The only thing left is I don't know how to make the allowIntersection:false option working when it instantiates. http://lab.josephj.com/2014/Leaflet.draw/examples/polygon.html

josephj avatar Sep 14 '14 06:09 josephj

Hi @josephj! Is your solution already working?

linyatis avatar Oct 14 '14 20:10 linyatis

@linyatis I still don't know how to make this option being configurable, but the feature works pretty good. You can check my commit. https://github.com/josephj/Leaflet.draw/commit/9425d3bafb13840b0e56242fccc606be4906826c

josephj avatar Oct 16 '14 04:10 josephj

Any news on this? I need this thingy configurable... don't know how to do it, either. ((

romansemko avatar Jun 27 '16 13:06 romansemko

+1

coorasse avatar Sep 19 '16 13:09 coorasse

I am using leaflet 1.0.3 version and leaflet draw 2.0.4 vrsion. the allowIntersection parameter is not working while creating a region. currentDrawingRegion = new L.Draw.Rectangle(mapInstance, { title: 'Draw a polygon!', allowIntersection: false, drawError: { color: '#b00b00', timeout: 2000 }, shapeOptions: { // color: '#64b900', color: '#fff', weight: 1.5, opacity: 0.2, fillOpacity: 0.1, fill: false }, showArea: true }); currentDrawingRegion.enable();

Please help me out .

kalyani-venna avatar Aug 31 '17 05:08 kalyani-venna

hello, I know that is very old issue but i'd like to use this code in my react app but when im running code it doesnt affect my polygon. I dont use toolbar - im only creating polygon by L.polygon adding it to proper layer and starting L.EditToolbar.Edit enable. I paste code from Edit.Poly.js to a export function, then im importing this in component and running function before/after the L.EditToolbar.Edit implement. Any ideas how to run this in react?

edit

FeldonDragon avatar May 13 '20 08:05 FeldonDragon

What's the current status of this? Initially, using leaflet 1.7.1 and draw 1.0.4, the allowIntersection option does not reflect in edition yet.

dsldiesel avatar Apr 04 '22 10:04 dsldiesel

@dsldiesel Try adding edit: { poly: { allowIntersection: false } } (note: poly, not polygon) to the L.Control.Draw options:

      draw: {
        polygon: {
          allowIntersection: false, // Restricts shapes to simple polygons
        },
      },
      edit: {
        poly: {
          allowIntersection: false,
        },
        edit: true,
        remove: true,
        ...
      },

image

CrazedProgrammer avatar Apr 25 '23 13:04 CrazedProgrammer