7

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!Polygons overlap in this

Arnab Nandy
  • 6,472
  • 5
  • 44
  • 50
user1533947
  • 197
  • 1
  • 1
  • 7

3 Answers3

7

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:

NicoleMoore
  • 325
  • 2
  • 14
kmandov
  • 3,130
  • 16
  • 15
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);
0

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.