feature: Add group aggregations and length attribute helper. (origo-m…

…ap#1708)

* Added group aggregations and length attribute helper.

* Uses ol/sphere for measurements

* Automatic units for area en length and aligning result i infowindow

* Lint...

---------

Co-authored-by: Stefan Forsgren <stefan@forsgren@xlent.se>

scss/_infowindow.scss

@@ -311,3 +311,7 @@
     transform: none;
   }
 }
+
+.groupfootercontainer {
+    margin-left:36px;
+}

src/geom.js

@@ -1,8 +1,10 @@
 import getcenter from './geometry/getcenter';
 import getarea from './geometry/getarea';
+import getlength from './geometry/getlength';
 
 const geom = {};
 geom.center = getcenter;
 geom.area = getarea;
+geom.length = getlength;
 
 export default geom;

src/geometry/getarea.js

@@ -1,11 +1,12 @@
-import round from '../utils/round';
+import { getArea as olGetArea } from 'ol/sphere';
+import formatAreaString from '../utils/formatareastring';
 
-export default function getArea(geometryIn, decimals) {
-  let area = geometryIn.getArea ? geometryIn.getArea() : 0;
-  if (decimals) {
-    area = round(area, decimals);
-  } else {
-    area = round(area, '2');
+export default function getArea(geometryIn, decimals, map) {
+  let area = 0;
+  const geomType = geometryIn.getType();
+  if (geomType === 'Polygon' || geomType === 'MultiPolygon') {
+    area = olGetArea(geometryIn, { projection: map.getView().getProjection() });
   }
-  return area;
+
+  return formatAreaString(area, { decimals: decimals || 2 });
 }

src/geometry/getlength.js

@@ -0,0 +1,13 @@
+import { getLength as olGetLength } from 'ol/sphere';
+import formatLengthString from '../utils/formatlengthstring';
+
+export default function getLength(geometryIn, decimals, map) {
+  let length = 0;
+
+  const geomType = geometryIn.getType();
+  if (geomType === 'LineString' || geomType === 'LinearRing' || geomType === 'MultiLineString') {
+    length = olGetLength(geometryIn, { projection: map.getView().getProjection() });
+  }
+
+  return formatLengthString(length, { decimals: decimals || 2 });
+}