Polygon fill not apparent?

Question

If I create a Polygon layer with points: [{"lat":51.509,"lng":-0.08},{"lat":51.503,"lng":-0.06},{"lat":51.51,"lng":-0.047},{"lat":"51.500","lng":"-0.039"}], I get something that renders like so:

Which is not quite what I need. I'm also adding/removing points, and can't see a method to remove the intersecting lines from the Polygon, creating one filled shape, essentially. Anybody done this, yet? I also noticed Google Maps have the same problem. What's the point of a true "polygon" if it's really just the PolyLine with shading?!

The docs: http://leaflet.cloudmade.com/reference.html#polygon

Using a simple polygon, I still get this when, ideally, all of the outermost coordinates would be the edge of the fill.:

Answer 1

I was really puzzled by the polygon you were displaying since it didn't seem to match your coordinates, so I put them into leaflet and got this.

This seems as the correct behaviour to me. Lines in polygons are allowed to intersect. So this is not problem with Leaflet or Google Maps. It is just the way polygons are defined. In other words a polygon is not just defined by a set of points, but also by the order of the points.

Sounds to me like what you want is the smallest simple polygon (a non-intersecting polygon) containing all your points. You can reorder the points in order to get this. However I am not aware of any algorithm for this, but this answer seems to suggest the problem is NP-hard. I am no expert on the subject, so maybe someone else can help, or you can try asking in Maths or GIS stackexchange.

And yes, a Polygon is just a filled PolyLine where the first and last points are connected.

Looking at the second polygon you posted, it sounds like what you want is the convex hull of a finite set of points. If this is your problem, there are plenty of algorithms solving this problem, and they are fast too.