feature: Make measure layer queryable

src/controls/measure.js

@@ -22,6 +22,7 @@ const Measure = function Measure({
   useHectare = true,
   snap = false,
   snapIsActive = true,
+  queryable = false,
   snapLayers,
   snapRadius = 15,
   highlightColor,
@@ -106,23 +107,35 @@ const Measure = function Measure({
     }
     if (
       tip
-    && geomType === 'Point'
-    && !modify.getOverlay().getSource().getFeatures().length
+      && geomType === 'Point'
+      && !modify.getOverlay().getSource().getFeatures().length
     ) {
       tipPoint = geometry;
       tipStyle.getText().setText(tip);
       styles.push(tipStyle);
     }
     return styles;
   }
+  const locLength = localize('lengthTooltip');
+  const locArea = localize('areaTooltip');
+  const locTitle = localize('layerTitle');
 
   const vector = new VectorLayer({
     group: 'none',
     name: 'measure',
-    title: 'Measure',
+    title: locTitle,
     source,
+    queryable,
     zIndex: 8,
     styleName: 'origoStylefunction',
+    attributes: [
+      { html: `${locLength}: {{@length(1)}}`,
+        localization
+      },
+      { html: `${locArea}: {{@area(1)}}`,
+        localization
+      }
+    ],
     style(feature) {
       return styleFunction(feature, showSegmentLabels);
     }

src/geometry/getarea.js

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

src/geometry/getlength.js

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

src/getattributes.js

@@ -170,14 +170,17 @@ const getContent = {
   html(feature, attribute, attributes, map) {
     const val = replacer.replace(attribute.html, attributes, {
       helper: geom,
-      helperArg: feature.getGeometry()
+      helperArg: feature.getGeometry(),
+      localization: attribute.localization
     }, map);
-    const newElement = document.createElement('li');
-    if (typeof (attribute.cls) !== 'undefined') {
-      newElement.classList.add(attribute.cls);
-    }
-    newElement.innerHTML = val;
-    return newElement;
+    if (val) {
+      const newElement = document.createElement('li');
+      if (typeof (attribute.cls) !== 'undefined') {
+        newElement.classList.add(attribute.cls);
+      }
+      newElement.innerHTML = val;
+      return newElement;
+    } return null;
   }
 };
 

src/loc/en_US.json

@@ -4,6 +4,7 @@
     "menuTitle": "Language",
     "controls": {
         "measure": {
+            "layerTitle": "Measure result",
             "mainButtonTooltip": "Measure",
             "startMeasureTooltip": "Click to start measuring",
             "lengthTooltip": "Length",

src/loc/sv_SE.json

@@ -4,6 +4,7 @@
     "menuTitle": "Språk",
     "controls": {
         "measure": {
+            "layerTitle": "Mätresultat",
             "mainButtonTooltip": "Mäta",
             "startMeasureTooltip": "Klicka för att börja mäta",
             "lengthTooltip": "Längd",

src/utils/formatareastring.js

@@ -6,8 +6,11 @@
 function formatAreaString(area, opts = {}) {
   const {
     useHectare = true,
-    decimals
+    decimals,
+    localization
   } = opts;
+
+  const localeNumberFormat = new Intl.NumberFormat(localization.getCurrentLocaleId());
   let result = area;
   let unit = 'm<sup>2</sup>';
   if (result > 10000000) {
@@ -18,7 +21,7 @@ function formatAreaString(area, opts = {}) {
     unit = 'ha';
   }
   if (decimals !== undefined) {
-    result = result.toFixed(decimals);
+    result = localeNumberFormat.format(result.toFixed(decimals));
   }
   const retstr = `${result} ${unit}`;
   return retstr;

src/utils/replacer.js

@@ -4,6 +4,7 @@ const replacer = function replacer() {
   let helper;
   let helperNS;
   let helperArg;
+  let localization;
 
   function getArgs(str) {
     const args = str.match(/\((.*?)\)/);
@@ -24,8 +25,10 @@ const replacer = function replacer() {
         if (nsIndex) {
           const helperParts = getArgs(matches[1]);
           const helperName = helperParts[1].substring(nsIndex - 1);
-          const args = helperArg.concat(helperParts[0], map);
-          val = Object.prototype.hasOwnProperty.call(helper, helperName) ? helper[helperName].apply(null, args).toString() : '';
+          const args = helperArg.concat(helperParts[0], map, localization);
+          val = Object.prototype.hasOwnProperty.call(helper, helperName) ? helper[helperName].apply(null, args) : '';
+          if ((val === 0) && (helperName === 'length' || helperName === 'area')) return null;
+          val = val.toString();
         }
         if (matches[1].indexOf('.') > 0) {
           const splitMatch = matches[1].split('.');
@@ -60,6 +63,7 @@ const replacer = function replacer() {
     helper = options.helper || {};
     helperNS = options.helperNS || '@';
     helperArg = [options.helperArg] || [];
+    localization = options?.localization;
 
     const result = searchAndReplace(name, obj, map);
     return result;