CODEWITHSUNDEEP
javascriptmapsleaflet
Garci García
Garci García

Reputation: 691

Leaflet Draw figure out if a polygon includes another one

I have one question involed with Leaflet Draw plugin. I am able to figure out if a polygon contains markers inside or if a marker is placed inside a polygon when I draw a polygon or a marker like:

polygon.getBounds().contains([latitude, longitude])

I'm looking for any example that does something similar, I want to know when I draw a polygon if it touches, or has another polygon inside, or intersects another one.

¿Is there any way to do this in a simple way?

Thanks you all for your time. Bests!

Upvotes: 2

Views: 2032

Answers (2)

Marko Letic
Marko Letic

Reputation: 2550

Although iH8 is right and Leaflet doesn't have a support to check if a polygon is contained inside another one, I could offer maybe a little better answer with an example that follows.

Yes, GeoScript offers methods that we could use to check if a polygon is contained inside another one but I find it complex and their documentation incomplete and not so intuitive.

That's why for these kinds of things I always use JTS (or it's JavaScript port JSTS). To use the methods you have there for leaflet or google map coordinates, you would first need to convert them to JSTS coordinates which is simple:

function _leafletLatLng2JTS (polygon) {
        var coordinates = [];
        var length = 0;
        if (polygon && polygon.length) {
            length = polygon.length;
        }
        for (var i = 0; i < length; i++) {
            if (polygon.length) {
                coordinates.push(new jsts.geom.Coordinate(polygon[i].lat, polygon[i].lng));
            }
        }
        return coordinates;
}

Now you just need to generate two JSTS polygons and check if one is contained inside the other:

function _isWithin (firstLayer, secondLayer) {

        var firstInput = _leafletLatLng2JTS(firstLayer.getLatLngs()[0]),
                secondInput = _leafletLatLng2JTS(secondLayer.getLatLngs()[0]),
                geometryFactory = new jsts.geom.GeometryFactory();
        //add last point to the end to create a closed polygon
        firstInput.push(firstInput[0]);
        secondInput.push(secondInput[0]);

        var firstPolygon = geometryFactory.createPolygon(firstInput),
                secondPolygon = geometryFactory.createPolygon(secondInput);

        var isWithin = firstPolygon.contains(secondPolygon);

        return isWithin;
}

How this works with Leaflet.Draw plugin you can see in this jsFiddle I have created. This example allows you to draw only two layers on the map (this works for rectangles and polygons) and then checks if the second one is contained inside the first one. If you delete one, all will be removed so you can draw from the beginning.

UPDATE 30.10.2017.:

Now you can use turf.js for these things (method booleanContains)

Upvotes: 2

iH8
iH8

Reputation: 28638

Leaflet doesn't have functionality for making such calculations. You could use a library like GeoScript. The geom.Geometry class has a contains method which can calculate if a geometry contains another geometry. It also has a within method which does exactly the opposite and a intersects method. Pretty much everything you need and then some like: covers, crosses, overlaps and touches.

Upvotes: 1

Related Questions