How to detect if polygons overlap in leaflet

Question

I am using leaflet draw to create polygons. My requirement is when a user draws a polygon ,it should not intersect/overlap with existing polygons. I have used point in polygon leaflet to detect if point falls within the polygon and it is working, but the problem is i am not able to detect if a line crosses another polygons.In this case points lie outside the existing polygons but overlapping exists.

Below attached image can give a better picture!

Mooncalf

Answer 1

You can also probably use Turf.js. Turf is a new js GIS engine developed by the guys at Mapbox.

Here are few examples that may do the job:

• Turf Intersects
• Turf Overlaps

Crumpler

Answer 2

In leaflet.draw, you can pass options to individual draw handlers. One of them allowIntersection is a boolean type that "Determines if line segments can cross."

Your options would look something like this (excerpted from the leaflet.draw example config):

var options = {
    position: 'topright',
    draw: {
        polygon: {
            allowIntersection: false, // Restricts shapes to simple polygons
            drawError: {
                color: '#e1e100', // Color the shape will turn when intersects
                message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
            },
            shapeOptions: {
                color: '#bada55'
            }
        },
    },
    edit: {
        featureGroup: editableLayers, //REQUIRED!!
        remove: false
    }
};

var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);

Nahuatl

Unfortunately, it seems like allowIntersection doesn't work with Editable yet. – Psycho

allowIntersection is a boolean governing an intersection of a polygon with itself, not with other polygons. – Anissa

Answer 3

You can probably also use Terraformer Core, which is an open-source project done by the folks at ESRI. You would probably do something like this:

var polygon = new Terraformer.Primitive({ 
  "type": "Polygon", 
  "coordinates": [ [ [ -101.46972656250001, 34.125447565116126 ], 
                     [ -100.85449218750001, 33.760882000869195 ], 
                     [ -101.09619140625, 33.19273094190692 ], 
                     [ -102.12890625000001, 33.137551192346145], 
                     [ -102.19482421875, 33.63291573870479 ], 
                     [ -101.46972656250001, 34.125447565116126 ] ] ] }); 
var intersects = polygon.intersects({ 
  "type": "Polygon", 
  "coordinates": [ [ [ -103.32539, 30.58608 ], [ -102.32083, 29.87894 ], [ -103.32539, 30.58608 ] ] ] });
// intersects is a bool.

Rehearsal