<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
Area of Map: <span id="plan-area">...</span>
</div>
<script>
function geodesicArea(latLngs) {
var pointsCount = latLngs.length,
area = 0.0,
d2r = Math.PI / 180,
p1, p2;
if (pointsCount > 2) {
for (var i = 0; i < pointsCount; i += 1) {
p1 = latLngs[i];
p2 = latLngs[(i + 1) % pointsCount];
area += ((p2.lng - p1.lng) * d2r) *
(2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r));
}
area = area * 6378137.0 * 6378137.0 / 2.0;
}
return Math.abs(area);
}
new DroneDeploy({version: 1}).then(function(dronedeploy){
dronedeploy.Plans.getCurrentlyViewed().then(function(plan){
document.querySelector('#plan-area').innerHTML = geodesicArea(plan.geometry)+' meters<sup>2</sup>';
});
});
</script>
</body>
</html>
