GeoInfo: for objects show length and area (if available)

lang/en.json

@@ -26,6 +26,8 @@
     "geoinfo:location": "Current location",
     "geoinfo:zoom": "Zoom level",
     "geoinfo:header": "Geometry",
+    "geoinfo:length": "Length",
+    "geoinfo:area": "Area",
     "header:attributes": "Attributes",
     "header:export": "Export",
     "header:osm_meta": "OSM Meta",

package.json

@@ -12,6 +12,8 @@
     "@babel/preset-env": "^7.7.7",
     "@fortawesome/fontawesome-free": "^5.12.0",
     "@mapbox/maki": "^5.0.0",
+    "@turf/area": "^6.0.1",
+    "@turf/length": "^6.0.2",
     "async": "^2.5.0",
     "async-foreach": "^0.1.3",
     "babelify": "^10.0.0",

src/GeoInfo.js

@@ -1,4 +1,10 @@
+const turf = {
+  area: require('@turf/area').default,
+  length: require('@turf/length').default
+}
 const tabs = require('modulekit-tabs')
+
+const formatUnits = require('./formatUnits')
 require('./GeoInfo.css')
 
 function formatCoord (coord) {
@@ -69,6 +75,17 @@ register_hook('show-details', (data, category, dom, callback) => {
   let ob = data.object
   let result = '<div class="geo-info"><h3>' + lang('geoinfo:header') + '</h3>'
 
+  let geojson = ob.GeoJSON()
+  let area = turf.area(geojson)
+  let length = turf.length(geojson) * 1000
+
+  if (area !== 0 || length !== 0) {
+    result += '<div><i class="fas fa-shapes icon"></i>' +
+      lang('geoinfo:length') + ': ' + formatUnits.distance(length) +
+      (area === 0 ? '' : ', ' + lang('geoinfo:area') + ': ' + formatUnits.area(area)) +
+      '</div>'
+  }
+
   if (ob.bounds.minlat !== ob.bounds.maxlat || ob.bounds.minlon !== ob.bounds.maxlon) {
     result += '<div title="' + lang('geoinfo:nw-corner') + '"><span class="icon">▛</span>' + formatCoord({ lat: ob.bounds.minlat, lng: ob.bounds.maxlon }) + '</div>'
   }

src/formatUnits.js

@@ -0,0 +1,9 @@
+module.exports = {
+  distance: value => {
+    return value.toFixed(0) + 'm'
+  },
+
+  area: value => {
+    return value.toFixed(0) + 'm²'
+  }
+}