Area of Polygon

[brunosan]

Add a micro plugin to show the Area of a Polygon when drawing.

This would be useful for e.g. agriculture purposes. Draw a shape and know how many acres that is. (area of a field, lake, ...)

PS: This would need to be projection aware areas. (e.g. currently drawing a circle does not draw a circle on the "ground" -- it does not take into account the distortion due to projection--)

[tmcw]

See https://github.com/mapbox/leaflet-geodesy - would appreciate some tire-kicking of it

[gundersen]

@tmcw nice to flag this. @brunosan if you get this working I could see this being a hot little micro-site that lets us talk to agg folks.

[brunosan]

Thanks @tmcw .

Little time spent so far, but I´m going to jump to other things, so posting what I have:

• Best to piggyback on Leaflet.draw. Use draw:created to trigger the area and update the UI.
• This seems the easiest/most robust code to calculate area of polygon:

function polygonArea(X, Y, numPoints) 
{ 
  area = 0;         // Accumulates area in the loop
  j = numPoints-1;  // The last vertex is the 'previous' one to the first

  for (i=0; i<numPoints; i++)
    { area = area +  (X[j]+X[i]) * (Y[j]-Y[i]); 
      j = i;  //j is previous vertex to i
    }
  return area/2;
}

• This other option seems pretty much all the way:

map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;
            if (type === 'polygon') 
            {
                var area = L.GeometryUtil.geodesicArea(layer.getLatLngs())
                ...

But:

• This seems a planar area (might be ok for now since our first usage is for high res agriculture).
• Unsure if this covers circumferences. But in such case again restrict to planar, or learn here.
• Not sure about the units. If pixels, then is just to multiply using the "z-> resolution" chart

[tmcw]

The lower-level area implementation is in https://github.com/mapbox/geojson-area/blob/master/index.js#L1 - it is geodesic & should correctly handle polygons with holes

[brunosan]

Thanks @tmcw

Closing via https://www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/