show summary

core/i18n/resources/en/common.js

@@ -223,6 +223,12 @@ Do you want to proceed?`,
     pageNotFound: 'Page not found',
   },
 
+  geo: {
+    area: 'Area',
+    vertices: 'Vertices',
+    perimeter: 'Perimeter',
+  },
+
   files: {
     header: 'Files',
     missing: ' Missing files: {{count}}',
@@ -1427,6 +1433,7 @@ $t(surveyForm.formEntryActions.confirmPromote)`,
     nodeDefGeo: {
       geoJSON: 'GeoJSON',
       invalidGeoJsonFileUploaded: 'Invalid GeoJSON file uploaded',
+      summary: 'Summary',
     },
     nodeDefEntityForm: {
       addNewEntity: 'Add new {{name}}',

webapp/components/geo/GeoPolygonSummary.js

@@ -0,0 +1,28 @@
+import './GeoPolygonSummary.scss'
+
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { useI18n } from '@webapp/store/system'
+import { FormItem } from '../form/Input'
+import { GeoJsonUtils } from '@webapp/utils/geoJsonUtils'
+
+export const GeoPolygonSummary = (props) => {
+  const { geoJson } = props
+
+  const polygon = geoJson.geometry
+
+  const i18n = useI18n()
+
+  return (
+    <div className="geo-polygon-summary">
+      <FormItem label={i18n.t('geo.vertices')}>{GeoJsonUtils.countVertices(polygon)}</FormItem>
+      <FormItem label={i18n.t('geo.area')}>{GeoJsonUtils.area(polygon)} m²</FormItem>
+      <FormItem label={i18n.t('geo.perimeter')}>{GeoJsonUtils.perimeter(polygon)} m</FormItem>
+    </div>
+  )
+}
+
+GeoPolygonSummary.propTypes = {
+  geoJson: PropTypes.object.isRequired,
+}

webapp/components/geo/GeoPolygonSummary.scss

@@ -0,0 +1,4 @@
+.geo-polygon-summary {
+  display: flex;
+  flex-direction: column;
+}

webapp/components/survey/SurveyForm/nodeDefs/components/types/nodeDefGeo.js

@@ -19,6 +19,7 @@ import { FileUtils } from '@webapp/utils/fileUtils'
 import { GeoJsonUtils } from '@webapp/utils/geoJsonUtils'
 
 import * as NodeDefUiProps from '../../nodeDefUIProps'
+import { GeoPolygonSummary } from '@webapp/components/geo/GeoPolygonSummary'
 
 const maxFileSize = 1
 
@@ -104,9 +105,14 @@ const NodeDefGeo = (props) => {
   return (
     <div className={classNames('survey-form__node-def-geo', { 'with-map': canUseMap })}>
       {!edit && valueText && (
-        <ExpansionPanel buttonLabel="surveyForm.nodeDefGeo.geoJSON" startClosed>
-          <Input disabled inputType="textarea" value={valueText} />
-        </ExpansionPanel>
+        <>
+          <ExpansionPanel buttonLabel="surveyForm.nodeDefGeo.geoJSON" startClosed>
+            <Input disabled inputType="textarea" value={valueText} />
+          </ExpansionPanel>
+          <ExpansionPanel buttonLabel="surveyForm.nodeDefGeo.summary" startClosed>
+            <GeoPolygonSummary geoJson={value} />
+          </ExpansionPanel>
+        </>
       )}
       {!entryDisabled && (
         <UploadButton className="btn-s" showLabel={false} onChange={onFilesChange} maxSize={maxFileSize} />

webapp/utils/geoJsonUtils.js

@@ -1,16 +1,33 @@
 // algorithm taken from https://gist.github.com/seyuf/ab9c980776e4c2cb350a2d1e70976517
 
 const area = (polygon) => {
-  let s = 0.0
+  let result = 0.0
   const coordinates = polygon.coordinates[0]
-  for (let i = 0; i < coordinates.length - 1; i++) {
+  for (let i = 0; i < coordinates.length; i++) {
     const coordinate = coordinates[i]
-    const nextCoordinate = coordinates[i + 1]
+    const nextCoordinate = coordinates[i < coordinates.length - 1 ? i + 1 : 0]
+    const [x, y] = coordinate
+    const [nextX, nextY] = nextCoordinate
+    const xDiff = nextX - x
+    const yDiff = nextY - y
+    result += x * yDiff - y * xDiff
+  }
+  return 0.5 * result
+}
+
+const perimeter = (polygon) => {
+  let result = 0.0
+  const coordinates = polygon.coordinates[0]
+  for (let i = 0; i < coordinates.length; i++) {
+    const coordinate = coordinates[i]
+    const nextCoordinate = coordinates[i < coordinates.length - 1 ? i + 1 : 0]
     const [x, y] = coordinate
     const [nextX, nextY] = nextCoordinate
-    s += x * nextY - nextX * y
+    const xDiff = nextX - x
+    const yDiff = nextY - y
+    result = result + Math.pow(xDiff * xDiff + yDiff * yDiff, 0.5)
   }
-  return 0.5 * s
+  return result
 }
 
 const centroid = (polygon) => {
@@ -44,9 +61,13 @@ const parse = (geoJsonText) => {
   return validateFeature(geoJson) ? geoJson : null
 }
 
+const countVertices = (polygon) => polygon?.coordinates?.[0]?.length ?? 0
+
 export const GeoJsonUtils = {
   area,
   centroid,
   validateFeature,
   parse,
+  countVertices,
+  perimeter,
 }