4

My requirement is to populate markers inside a user drawn area ,which can be either circle, rectangle ,polygon.

This is what I am trying currently :- 

map.on('draw:created', function(e) {
    var type = e.layerType, layer = e.layer;
    var bounds =  layer.getBounds();
});

Now I am using these bounds(southWest, northEast) latlongs to virtually create a row column spacing and then populate markers accordingly.

Problem :-

  • The above approach works fine for rectangle and all markers are populated inside rectangle.
  • Doesn't work for circle and polygon. Markers are populated outside (nearby) the circle and polygon also. I guess the getBounds() method is giving the bounds or calculating the area by creating a box that touches circle and all corner of polygon.

Any suggestions that how can I populate markers strictly inside or on boundary of circle and polygon?

Thanks in advance.

New Bee
  • 1,007
  • 4
  • 18
  • 34

2 Answers2

4

Resolved for point inside polygon by PIP as suggested by @kmandov and also resolved for circle by the below process :-

  • Get latitude and longitude of the point.
  • Get the latitude and longitude of circle center.
  • Run distanceTo() method on any of the above two latlongs and pass the second latlong as parameter.
  • Check if the distance is greater than the radius of circle.
  • If it's greater than the radius then the point is outside circle else inside circle.

Here is the condition that I used :

if (customMarker.getLatLng().distanceTo(myCircle.getLatLng()) <= myCircle.getRadius()) {
          console.log("Marker is inside circle");
}else{
         console.log("Marker is outside circle");
}
New Bee
  • 1,007
  • 4
  • 18
  • 34
2

You can probably use the PointInLayer leaflet plug-in to check if a point is inside your area.

You can then add markers only for grid points that are actually within the polygon.

Something like that:

// the user area:
var areaLayer = L.geoJson(userArea);

// iterate over your grid of points
for (var i = 0; i < gridPoints.length; i++) {

   // add marker only if the point is within the area
   var results = leafletPip.pointInLayer(gridPoints[i], areaLayer, true);
   if (results.length > 0) {
      L.marker(gridPoints[i]).addTo(map);
   }
}
kmandov
  • 3,130
  • 16
  • 15
  • Awsome. It worked. I was checking leaflet-pip yesterday too. Just implemented it and it worked. I also want the same functionality for circle also. Will it work ? I'll give it a try. Thanks alog again :) – New Bee Jul 31 '15 at 06:32
  • Great! You're welcome :) leaflet-pip won't work for circles, but you can probably use a formula to check if a point is within the circle. See here: http://stackoverflow.com/questions/481144/equation-for-testing-if-a-point-is-inside-a-circle – kmandov Jul 31 '15 at 07:16
  • You can also check out geojson-utils (leaflet-pip is a wrapper around it). Geojson-utils have Radius filtering: https://github.com/maxogden/geojson-js-utils – kmandov Jul 31 '15 at 07:20
  • Thanks. I'll try this. :) – New Bee Jul 31 '15 at 08:35