feat: distance measurement for line strings

elements/drawtools/src/methods/draw/discard-drawing.js

@@ -14,6 +14,12 @@ const discardDrawingMethod = (EoxDrawTool) => {
     EoxDrawTool.drawLayer.getSource().clear();
     //@ts-expect-error TODO
     EoxDrawTool.geoJSON = null;
+
+    // Clear map overlays, if available
+    const map = EoxDrawTool.eoxMap.map;
+    if (map && map.getOverlays !== undefined) {
+      EoxDrawTool.eoxMap.map.getOverlays().clear();
+    }
   };
 
   // Function to trigger updates after discarding drawing

elements/drawtools/stories/distance-measurement.js

@@ -0,0 +1,24 @@
+import { html } from "lit";
+import { STORIES_MAP_STYLE, STORIES_LAYERS_ARRAY } from "../src/enums";
+
+/**
+ * Component demonstrating how EOxMap and the draw tools can be used to measure distances on a map.
+ */
+export const DistanceMeasurement = {
+  render: () => html`
+    <eox-map
+      id="line-measurement"
+      style=${STORIES_MAP_STYLE}
+      .layers=${STORIES_LAYERS_ARRAY}
+      measure
+    />
+    <eox-drawtools
+      for="eox-map#line-measurement"
+      multiple-features
+      allow-modify
+      type="LineString"
+    />
+  `,
+};
+
+export default DistanceMeasurement;

elements/drawtools/stories/drawtools.stories.js

@@ -13,6 +13,7 @@ import {
   ImportFeaturesWithEditorStory,
   SelectFeatureStory,
   MultiFeaturesSelectStory,
+  DistanceMeasurementStory,
 } from "./index";
 
 export default {
@@ -77,3 +78,9 @@ export const CSSVariableOverride = CSSVariableOverrideStory;
  * By setting the `unstyled` attribute or property, the element has no styling applied.
  */
 export const Unstyled = UnstyledStory;
+
+/**
+ * Setting the `measure` attribute on the map and drawing with `LineString`s will cause
+ * a tooltip to be displayed showing the distance of the line being drawn.
+ */
+export const DistanceMeasurement = DistanceMeasurementStory;

elements/drawtools/stories/index.js

@@ -11,3 +11,4 @@ export { default as UnstyledStory } from "./unstyled"; // Story demonstrating un
 export { default as CSSVariableOverrideStory } from "./css-variable-override"; // Story demonstrating css override
 export { default as SelectFeatureStory } from "./select-feature"; // Story demonstrating feature selection
 export { default as MultiFeaturesSelectStory } from "./multi-feature-select"; // Story demonstrating multi feature selection with list
+export { default as DistanceMeasurementStory } from "./distance-measurement"; // Story demonstrating distance measurements.

elements/map/src/helpers/draw.js

@@ -1,6 +1,10 @@
 import Modify from "ol/interaction/Modify";
 import Draw, { createBox } from "ol/interaction/Draw";
 import { addNewFeature } from "../helpers";
+import { getArea, getLength } from "ol/sphere";
+import Overlay from "ol/Overlay";
+import { LineString } from "ol/geom";
+import { unByKey } from "ol/Observable";
 
 /**
  * @typedef {import("../../types").DrawOptions} DrawOptions
@@ -49,10 +53,69 @@ export function addDraw(EOxMap, drawLayer, options) {
     drawInteraction.setActive(false);
   }
 
+  // Create measure tooltip
+  let measureTooltipElement = document.createElement("div");
+
+  const measureTooltip = new Overlay({
+    element: measureTooltipElement,
+    offset: [16, 0],
+    positioning: "center-left",
+    stopEvent: false,
+    insertFirst: false,
+  });
+
+  measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";
+  measureTooltipElement.style.padding = "3px 7px";
+  measureTooltipElement.style.borderRadius = "4px";
+  measureTooltipElement.style.backdropFilter = "blur(20px)";
+  measureTooltipElement.style.background = "#004180AA";
+  measureTooltipElement.style.fontFamily = "monospace, sans-serif";
+  measureTooltipElement.style.color = "#FFF";
+  measureTooltipElement.style.visibility = "hidden";
+  measureTooltipElement.style.pointerEvents = "none";
+
+  let sketch = null;
+  let listener;
+
+  // Initialize the measurement tooltip so that it displays the length of the line
+  // as a distance in kilometers while following the last point of the drawn line.
+  drawInteraction.on("drawstart", (evt) => {
+    if (EOxMap.measure) {
+      // Ensure the tooltip appears only in `measure` mode when drawing a line string.
+      if (options_.type === "LineString") {
+        measureTooltipElement.style.visibility = "visible";
+        measureTooltipElement.style.pointerEvents = "inherit";
+      }
+      sketch = evt.feature;
+      let tooltipCoord = evt.coordinate;
+
+      EOxMap.map.addOverlay(measureTooltip);
+
+      listener = sketch.getGeometry().on("change", function (evt) {
+        const geometry = evt.target;
+
+        if (geometry instanceof LineString) {
+          measureTooltipElement.innerHTML = formatLength(geometry);
+          tooltipCoord = geometry.getLastCoordinate();
+        }
+        tooltipCoord = geometry.getLastCoordinate();
+        measureTooltip.setPosition(tooltipCoord);
+      });
+    }
+  });
+
   // Listen for the 'drawend' event to handle the addition of new features to the layer
   drawInteraction.on("drawend", (e) => {
     if (!drawLayer.get("isDrawingEnabled")) return;
     addNewFeature(e, drawLayer, EOxMap, true);
+
+    // Tear down the measurement tooltip when the drawing is complete
+    if (EOxMap.measure) {
+      measureTooltipElement.className = "ol-tooltip ol-tooltip-static";
+      // unset sketch
+      sketch = null;
+      unByKey(listener);
+    }
   });
 
   // identifier to retrieve the interaction
@@ -77,3 +140,35 @@ export function addDraw(EOxMap, drawLayer, options) {
   // Subscribe to the 'change' event on the layer group to detect when layers are removed
   EOxMap.map.getLayerGroup().on("change", removeLayerListener);
 }
+
+/**
+ * Calculate real distance on the map and format the output.
+ * @param {Polygon} line The line string to calculate the distance for.
+ * @return {string} Formatted length.
+ */
+const formatLength = function (line) {
+  const length = getLength(line);
+  let output;
+  if (length > 100) {
+    output = Math.round((length / 1000) * 100) / 100 + " " + "km";
+  } else {
+    output = Math.round(length * 100) / 100 + " " + "m";
+  }
+  return output;
+};
+
+/**
+ * Format area output.
+ * @param {Polygon} polygon The polygon.
+ * @return {string} Formatted area.
+ */
+const _formatArea = function (polygon) {
+  const area = getArea(polygon);
+  let output;
+  if (area > 10000) {
+    output = Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";
+  } else {
+    output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";
+  }
+  return output;
+};

elements/map/src/main.js

@@ -95,6 +95,7 @@ export class EOxMap extends LitElement {
       intersections: { attribute: false, state: true, type: Object },
       selectInteractions: { attribute: false, state: true, type: Object },
       mapControls: { attribute: false, state: true, type: Object },
+      measure: { attribute: "measure", type: Boolean },
     };
   }