From f26070b9361e90a8a2a3f5c1fcd7e4c9934428fa Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Mon, 7 Oct 2024 15:05:39 +0200
Subject: [PATCH 1/8] refactor(draw): remove unused inputs

---
 src/components/draw/feature-item.vue        | 2 --
 src/components/draw/feature-sub-content.vue | 5 +----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
index 82936326..ccd9004b 100644
--- a/src/components/draw/feature-item.vue
+++ b/src/components/draw/feature-item.vue
@@ -84,7 +84,6 @@ function onSubmitEditInfo() {
   <!-- Drawing details -->
   <FeatureSubWrapper
     v-if="isOpen"
-    :feature="feature"
     :isDocked="isDocked"
     @closePopup="() => emit('toggleDock')"
   >
@@ -95,7 +94,6 @@ function onSubmitEditInfo() {
       <FeatureSubContent
         :isDocked="isDocked"
         :isEditingFeature="isEditing"
-        :feature="feature"
         @toggleEditFeature="onToggleEditFeature"
         @toggleDock="() => emit('toggleDock')"
         @clickDelete="onClickDelete"
diff --git a/src/components/draw/feature-sub-content.vue b/src/components/draw/feature-sub-content.vue
index ebdce1e8..bec30ae4 100644
--- a/src/components/draw/feature-sub-content.vue
+++ b/src/components/draw/feature-sub-content.vue
@@ -72,10 +72,7 @@ function onClickValidate() {
     <!-- Spacer -->
     <div class="min-h-3"></div>
 
-    <FeatureMeasurements
-      :feature="feature"
-      :isEditingFeature="isEditingFeature"
-    />
+    <FeatureMeasurements :isEditingFeature="isEditingFeature" />
 
     <!-- Default display feature options -->
     <div class="flex justify-between items-center mt-1 gap-2">

From c03036345a7ba549ba2aed561ce9d256ca6954f0 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Mon, 7 Oct 2024 15:07:56 +0200
Subject: [PATCH 2/8] feat(draw): implement length, area measurments for line
 and polygon

circle will likely still be adapted once it's not managed as a polygon anymore
---
 src/components/draw/feature-measurements.vue | 35 ++++++++++++++------
 src/composables/draw/draw-tooltip.ts         |  2 +-
 src/services/common/measurement.utils.ts     | 34 +++++++++++++++----
 3 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue
index 6d84ea0f..44508c50 100644
--- a/src/components/draw/feature-measurements.vue
+++ b/src/components/draw/feature-measurements.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { computed, inject } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import FeatureMeasurementsProfile from './feature-measurements-profile.vue'
+import {
+  getFormattedArea,
+  getFormattedLength,
+} from '@/services/common/measurement.utils'
+import { Polygon } from 'ol/geom'
+import { Projection } from 'ol/proj'
 
 defineProps<{
   isEditingFeature?: boolean
@@ -13,8 +19,21 @@ const { t } = useTranslation()
 
 const feature: DrawnFeature | undefined = inject('feature')
 const featureType = feature?.featureType || ''
-const featLength = feature?.id + ' [TODO featLenght]' // TODO update condition
-const featArea = feature?.id + ' [TODO featArea]' // TODO
+const featureGeometry = feature?.getGeometry()
+
+const featLength = computed(() =>
+  featureGeometry &&
+  ['drawnLine', 'drawnCircle', 'drawnPolygon'].includes(featureType)
+    ? getFormattedLength(featureGeometry, new Projection({ code: 'EPSG:3857' }))
+    : undefined
+)
+const featArea = computed(() =>
+  featureGeometry && ['drawnPolygon', 'drawnCircle'].includes(featureType)
+    ? getFormattedArea(featureGeometry as Polygon)
+    : undefined
+)
+// TODO: implement once circle is kept as a circle geometry,
+// also adapt length and area calculation for circle then
 const featRadius = feature?.id + ' [TODO featRayon]' // TODO
 const featElevation = feature?.id // TODO
 
@@ -26,18 +45,12 @@ function onClickValidateRadius() {
 <template>
   <div class="lux-drawing-item-measurements">
     <!-- Feature length, for LineString, Circle, Polygon -->
-    <div
-      data-cy="featItemLength"
-      v-if="['drawnLine', 'drawnCircle', 'drawnPolygon'].includes(featureType)"
-    >
+    <div data-cy="featItemLength" v-if="featLength">
       <span>{{ t('Length:') }}</span> <span>{{ featLength }}</span>
     </div>
 
     <!-- Feature area, for Circle, Polygon -->
-    <div
-      data-cy="featItemArea"
-      v-if="['drawnPolygon', 'drawnCircle'].includes(featureType)"
-    >
+    <div data-cy="featItemArea" v-if="featArea">
       <span>{{ t('Area:') }}</span> <span>{{ featArea }}</span>
     </div>
 
diff --git a/src/composables/draw/draw-tooltip.ts b/src/composables/draw/draw-tooltip.ts
index 11c9baa0..335316a5 100644
--- a/src/composables/draw/draw-tooltip.ts
+++ b/src/composables/draw/draw-tooltip.ts
@@ -89,7 +89,7 @@ class DrawTooltip {
       }
     }
     if (this.measureTooltipElement) {
-      this.measureTooltipElement.innerHTML = output
+      this.measureTooltipElement.innerText = output
       this.measureTooltipOverlay?.setPosition(coord)
     }
   }
diff --git a/src/services/common/measurement.utils.ts b/src/services/common/measurement.utils.ts
index fc72e45a..82dac332 100644
--- a/src/services/common/measurement.utils.ts
+++ b/src/services/common/measurement.utils.ts
@@ -1,14 +1,22 @@
-import { LineString, Polygon, Point } from 'ol/geom'
+import { Coordinate } from 'ol/coordinate'
+import { LineString, Polygon, Point, Geometry } from 'ol/geom'
 import { Projection, transform } from 'ol/proj'
 import { getDistance as haversineDistance, getArea } from 'ol/sphere'
 
 const getFormattedLength = function (
-  lineString: LineString,
+  geom: Geometry,
   projection: Projection,
   precision?: number
 ): string {
   let length = 0
-  const coordinates = lineString.getCoordinates()
+  let coordinates
+  if (geom.getType() === 'Polygon') {
+    coordinates = (geom as Polygon).getCoordinates()[0] as Coordinate[]
+  } else if (geom.getType() === 'LineString') {
+    coordinates = (geom as LineString).getCoordinates() as Coordinate[]
+  } else {
+    return ''
+  }
   for (let i = 0, ii = coordinates.length - 1; i < ii; ++i) {
     const c1 = transform(coordinates[i], projection, 'EPSG:4326')
     const c2 = transform(coordinates[i + 1], projection, 'EPSG:4326')
@@ -28,14 +36,28 @@ const getFormattedArea = function (polygon: Polygon): string {
   const area = Math.abs(getArea(polygon))
   let output = ''
   if (area > 1000000) {
-    output =
-      parseFloat((area / 1000000).toPrecision(3)) + ' ' + 'km<sup>2</sup>'
+    output = parseFloat((area / 1000000).toPrecision(3)) + ' ' + 'km²'
   } else {
-    output = parseFloat(area.toPrecision(3)) + ' ' + 'm<sup>2</sup>'
+    output = parseFloat(area.toPrecision(3)) + ' ' + 'm²'
   }
   return output
 }
 
+// TODO: migrate and use once circle is kept as a circle geometry
+// const getFormattedCircleArea = function (circle, precision, format) {
+//   const area = Math.PI * Math.pow(circle.getRadius(), 2)
+//   return format(area, 'm²', 'square', precision)
+// }
+
+// TODO: migrate and use once circle is kept as a circle geometry
+// const getCircleRadius = function (circle: Circle, proj: Projection): string {
+//   const coord = circle.getLastCoordinate()
+//   const center = circle.getCenter()
+//   return center !== null && coord !== null
+//     ? getFormattedLength(new LineString([center, coord]), proj)
+//     : ''
+// }
+
 const getFormattedAzimutRadius = function (
   line: LineString,
   projection: Projection,

From 1077b7b052b209f19084ba017988d309f51c18ac Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Mon, 7 Oct 2024 15:10:03 +0200
Subject: [PATCH 3/8] test(draw): add e2e tests

adds real events plugin for tests on ol map
adds es lint plugin to check for 'only' in e2e tests
---
 .eslintrc.cjs                            |  2 ++
 cypress/e2e/draw/draw-feat-line.cy.ts    |  6 ++++++
 cypress/e2e/draw/draw-feat-polygon.cy.ts |  8 ++++++++
 cypress/support/commands.ts              | 11 +++++++++++
 package-lock.json                        | 20 ++++++++++++++++++++
 package.json                             |  2 ++
 6 files changed, 49 insertions(+)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 3e43c577..d91cadeb 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -16,6 +16,7 @@ module.exports = {
       extends: ['plugin:cypress/recommended'],
     },
   ],
+  plugins: ['no-only-tests'],
   rules: {
     'no-prototype-builtins': 'off',
     '@typescript-eslint/ban-types': 'off',
@@ -28,6 +29,7 @@ module.exports = {
     '@typescript-eslint/no-unused-vars': ['error'],
     'import/no-unresolved': 'off',
     'no-console': 'error',
+    'no-only-tests/no-only-tests': 'error',
   },
   parserOptions: {
     ecmaVersion: 'latest',
diff --git a/cypress/e2e/draw/draw-feat-line.cy.ts b/cypress/e2e/draw/draw-feat-line.cy.ts
index 00558d4d..14434710 100644
--- a/cypress/e2e/draw/draw-feat-line.cy.ts
+++ b/cypress/e2e/draw/draw-feat-line.cy.ts
@@ -27,6 +27,12 @@ describe('Draw "Line"', () => {
       testFeatItemMeasurements()
     })
 
+    it('updates length measurement when editing geometry', () => {
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '55.4 km')
+      cy.dragVertexOnMap(200, 200, 300, 300)
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '111 km')
+    })
+
     it('displays the possible actions for the feature', () => {
       testFeatItem()
     })
diff --git a/cypress/e2e/draw/draw-feat-polygon.cy.ts b/cypress/e2e/draw/draw-feat-polygon.cy.ts
index 24194748..ee8ae345 100644
--- a/cypress/e2e/draw/draw-feat-polygon.cy.ts
+++ b/cypress/e2e/draw/draw-feat-polygon.cy.ts
@@ -27,6 +27,14 @@ describe('Draw "Polygon"', () => {
       testFeatItemMeasurements()
     })
 
+    it('updates length and area measurements when editing geometry', () => {
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '134 km')
+      cy.get('*[data-cy="featItemArea"]').should('contain.text', '766 km²')
+      cy.dragVertexOnMap(200, 200, 300, 300)
+      cy.get('*[data-cy="featItemLength"]').should('contain.text', '238 km')
+      cy.get('*[data-cy="featItemArea"]').should('contain.text', '1530 km²')
+    })
+
     it('displays the possible actions for the feature', () => {
       testFeatItem()
     })
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 8cfa2d1d..8723a30a 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -1,6 +1,7 @@
 /// <reference types="cypress" />
 
 import type { Interaction } from 'ol/interaction'
+import 'cypress-real-events/support'
 
 // ***********************************************
 // This example commands.ts shows you how to
@@ -61,11 +62,21 @@ Cypress.Commands.add('getModifyInteraction', () => {
   })
 })
 
+Cypress.Commands.add('dragVertexOnMap', (originX, originY, x, y) => {
+  cy.get('div.ol-viewport').realMouseDown({
+    x: originX,
+    y: originY,
+  })
+  cy.get('div.ol-viewport').realMouseMove(x, y)
+  cy.get('div.ol-viewport').realMouseUp()
+})
+
 declare global {
   namespace Cypress {
     interface Chainable {
       getDrawInteractions(): Chainable<Array<Interaction>>
       getModifyInteraction(): Chainable<Interaction>
+      dragVertexOnMap(): Chainable<void>
       // login(email: string, password: string): Chainable<void>
       // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
       // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
diff --git a/package-lock.json b/package-lock.json
index c107b648..e4eeef61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,8 +55,10 @@
         "@vue/tsconfig": "^0.1.3",
         "core-js": "^3.37.1",
         "cypress": "^13.7.2",
+        "cypress-real-events": "^1.13.0",
         "eslint": "^8.22.0",
         "eslint-plugin-cypress": "^2.12.1",
+        "eslint-plugin-no-only-tests": "^3.3.0",
         "eslint-plugin-vue": "^9.3.0",
         "husky": "^8.0.2",
         "i18next": "^22.0.6",
@@ -5665,6 +5667,15 @@
         "node": "^16.0.0 || ^18.0.0 || >=20.0.0"
       }
     },
+    "node_modules/cypress-real-events": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/cypress-real-events/-/cypress-real-events-1.13.0.tgz",
+      "integrity": "sha512-LoejtK+dyZ1jaT8wGT5oASTPfsNV8/ClRp99ruN60oPj8cBJYod80iJDyNwfPAu4GCxTXOhhAv9FO65Hpwt6Hg==",
+      "dev": true,
+      "peerDependencies": {
+        "cypress": "^4.x || ^5.x || ^6.x || ^7.x || ^8.x || ^9.x || ^10.x || ^11.x || ^12.x || ^13.x"
+      }
+    },
     "node_modules/cypress/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -7115,6 +7126,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint-plugin-no-only-tests": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-no-only-tests/-/eslint-plugin-no-only-tests-3.3.0.tgz",
+      "integrity": "sha512-brcKcxGnISN2CcVhXJ/kEQlNa0MEfGRtwKtWA16SkqXHKitaKIMrfemJKLKX1YqDU5C/5JY3PvZXd5jEW04e0Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=5.0.0"
+      }
+    },
     "node_modules/eslint-plugin-prettier": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
diff --git a/package.json b/package.json
index 8b7f13de..bbce56f0 100644
--- a/package.json
+++ b/package.json
@@ -78,8 +78,10 @@
     "@vue/tsconfig": "^0.1.3",
     "core-js": "^3.37.1",
     "cypress": "^13.7.2",
+    "cypress-real-events": "^1.13.0",
     "eslint": "^8.22.0",
     "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-no-only-tests": "^3.3.0",
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.2",
     "i18next": "^22.0.6",

From 386bd1558677a5a43bbd68bd67d4d4a3b7296743 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Mon, 7 Oct 2024 15:37:42 +0200
Subject: [PATCH 4/8] refactor(draw): get projection from map

---
 src/components/draw/feature-measurements.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue
index 44508c50..ce18d5eb 100644
--- a/src/components/draw/feature-measurements.vue
+++ b/src/components/draw/feature-measurements.vue
@@ -10,12 +10,14 @@ import {
 } from '@/services/common/measurement.utils'
 import { Polygon } from 'ol/geom'
 import { Projection } from 'ol/proj'
+import useMap from '@/composables/map/map.composable'
 
 defineProps<{
   isEditingFeature?: boolean
 }>()
 
 const { t } = useTranslation()
+const mapProjection: Projection = useMap().getOlMap().getView().getProjection()
 
 const feature: DrawnFeature | undefined = inject('feature')
 const featureType = feature?.featureType || ''
@@ -24,7 +26,7 @@ const featureGeometry = feature?.getGeometry()
 const featLength = computed(() =>
   featureGeometry &&
   ['drawnLine', 'drawnCircle', 'drawnPolygon'].includes(featureType)
-    ? getFormattedLength(featureGeometry, new Projection({ code: 'EPSG:3857' }))
+    ? getFormattedLength(featureGeometry, mapProjection)
     : undefined
 )
 const featArea = computed(() =>

From 3b0b8988ca4ccbebedf4ded408ac2fa1bbb9a842 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Tue, 8 Oct 2024 17:19:15 +0200
Subject: [PATCH 5/8] feat(draw): get elevation for point

---
 .env                                          |  1 +
 .env.development                              |  3 +-
 .env.e2e                                      |  1 +
 .env.staging                                  |  3 +-
 cypress/e2e/draw/draw-feat-point.cy.ts        | 39 ++++++++++++++++
 .../draw/feature-measurements-helper.ts       | 30 ++++++++++++
 src/components/draw/feature-measurements.vue  | 46 +++++++++++++------
 src/services/utils.ts                         | 22 +++++++++
 8 files changed, 130 insertions(+), 15 deletions(-)

diff --git a/.env b/.env
index f365aa35..11a74762 100644
--- a/.env
+++ b/.env
@@ -30,3 +30,4 @@ VITE_MODE_LIB=true
 # MyMaps / Draw
 VITE_MYMAPS_URL="/mymaps"
 VITE_ARROW_MODEL_URL="/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="/raster"
diff --git a/.env.development b/.env.development
index 2ed22507..971c571d 100644
--- a/.env.development
+++ b/.env.development
@@ -29,4 +29,5 @@ VITE_MODE_LIB=false
 
 # MyMaps / Draw
 VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
-VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
\ No newline at end of file
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="https://migration.geoportail.lu/raster"
\ No newline at end of file
diff --git a/.env.e2e b/.env.e2e
index 86f146b3..8bf8d817 100644
--- a/.env.e2e
+++ b/.env.e2e
@@ -30,3 +30,4 @@ VITE_MODE_LIB=false
 # MyMaps / Draw
 VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
 VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="https://migration.geoportail.lu/raster"
diff --git a/.env.staging b/.env.staging
index 2d56c218..26568784 100644
--- a/.env.staging
+++ b/.env.staging
@@ -29,4 +29,5 @@ VITE_MODE_LIB=true
 
 # MyMaps / Draw
 VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
-VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
\ No newline at end of file
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"
+VITE_ELEVATION_URL="/raster"
\ No newline at end of file
diff --git a/cypress/e2e/draw/draw-feat-point.cy.ts b/cypress/e2e/draw/draw-feat-point.cy.ts
index ec6dac22..729245c5 100644
--- a/cypress/e2e/draw/draw-feat-point.cy.ts
+++ b/cypress/e2e/draw/draw-feat-point.cy.ts
@@ -21,6 +21,32 @@ function testFeatStyleEditionTabContent() {
 
 describe('Draw "Point"', () => {
   beforeEach(() => {
+    // mocks for 100x100, 200x200, 300x300 clicks
+    cy.intercept(
+      'GET',
+      '/raster?lon=-25877.619036593664&lat=154433.4715351454',
+      {
+        statusCode: 200,
+        body: {
+          dhm: null,
+        },
+      }
+    )
+    cy.intercept('GET', '/raster?lon=51966.98676810359&lat=74839.09999860045', {
+      statusCode: 200,
+      body: {
+        dhm: 333.13,
+      },
+    }).as('getElevation200x200')
+    cy.intercept(
+      'GET',
+      '/raster?lon=12756.103097272688&lat=114635.74032468312',
+      {
+        statusCode: 500,
+        body: {},
+      }
+    ).as('getElevation300x300')
+
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
     cy.get('button[data-cy="drawPointButton"]').click()
@@ -36,6 +62,19 @@ describe('Draw "Point"', () => {
       testFeatItemMeasurements()
     })
 
+    it('displays and updates elevation for Point (handling null values and error codes as well)', () => {
+      cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
+      cy.dragVertexOnMap(100, 100, 300, 300)
+      cy.wait('@getElevation200x200')
+      cy.get('*[data-cy="featItemElevation"]').should(
+        'contain.text',
+        '333.13 m'
+      )
+      cy.dragVertexOnMap(300, 300, 200, 200)
+      cy.wait('@getElevation300x300')
+      cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
+    })
+
     it('displays the possible actions for the feature', () => {
       testFeatItem()
     })
diff --git a/src/components/draw/feature-measurements-helper.ts b/src/components/draw/feature-measurements-helper.ts
index 68536d6d..dbafcd56 100644
--- a/src/components/draw/feature-measurements-helper.ts
+++ b/src/components/draw/feature-measurements-helper.ts
@@ -1,5 +1,12 @@
 import { PointData } from '@/components/common/graph/d3-graph-elevation.d'
+import { Coordinate } from 'ol/coordinate'
+import { transform } from 'ol/proj'
+import i18next from 'i18next'
+import { debounceAsync } from '@/services/utils'
 
+const ELEVATION_URL = import.meta.env.VITE_ELEVATION_URL
+const MAP_CRS = 'EPSG:3857'
+const ELEVATION_CRS = 'EPSG:2169'
 /**
  * Request the csv profile with the current profile data.
  * @param profileData The current profile data
@@ -9,3 +16,26 @@ export function downloadCsv(profileData: PointData[]) {
     return
   }
 }
+
+export function getElevation(coordinate: Coordinate) {
+  const lonlat = transform(coordinate, MAP_CRS, ELEVATION_CRS)
+  return fetch(`${ELEVATION_URL}?lon=${lonlat[0]}&lat=${lonlat[1]}`).then(
+    async response => {
+      const resp = (await response.json()).dhm
+      let text = i18next.t('N/A', { ns: 'client' })
+      if (resp) {
+        text = `${Number(resp).toFixed(2)} m`
+      }
+      return { formattedElevation: text, rawElevation: resp }
+    }
+  )
+}
+
+export const getFormattedElevation = async (coordinates: number[]) => {
+  return (await getElevation(coordinates)).formattedElevation
+}
+
+export const getDebouncedFormattedElevation = debounceAsync(
+  getFormattedElevation,
+  300
+)
diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue
index ce18d5eb..8701afbf 100644
--- a/src/components/draw/feature-measurements.vue
+++ b/src/components/draw/feature-measurements.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject, ref, watchEffect } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
 import { DrawnFeature } from '@/services/draw/drawn-feature'
@@ -8,9 +8,13 @@ import {
   getFormattedArea,
   getFormattedLength,
 } from '@/services/common/measurement.utils'
-import { Polygon } from 'ol/geom'
+import { Geometry, Point, Polygon } from 'ol/geom'
 import { Projection } from 'ol/proj'
 import useMap from '@/composables/map/map.composable'
+import {
+  getDebouncedFormattedElevation,
+  getFormattedElevation,
+} from './feature-measurements-helper'
 
 defineProps<{
   isEditingFeature?: boolean
@@ -19,25 +23,40 @@ defineProps<{
 const { t } = useTranslation()
 const mapProjection: Projection = useMap().getOlMap().getView().getProjection()
 
-const feature: DrawnFeature | undefined = inject('feature')
-const featureType = feature?.featureType || ''
-const featureGeometry = feature?.getGeometry()
+const feature = ref<DrawnFeature | undefined>(inject('feature'))
+const featureType = ref<string>(feature.value?.featureType || '')
+const featureGeometry = ref<Geometry | undefined>(feature.value?.getGeometry())
 
 const featLength = computed(() =>
-  featureGeometry &&
-  ['drawnLine', 'drawnCircle', 'drawnPolygon'].includes(featureType)
-    ? getFormattedLength(featureGeometry, mapProjection)
+  featureGeometry.value &&
+  ['drawnLine', 'drawnCircle', 'drawnPolygon'].includes(featureType.value)
+    ? getFormattedLength(featureGeometry.value as Geometry, mapProjection)
     : undefined
 )
 const featArea = computed(() =>
-  featureGeometry && ['drawnPolygon', 'drawnCircle'].includes(featureType)
-    ? getFormattedArea(featureGeometry as Polygon)
+  featureGeometry.value &&
+  ['drawnPolygon', 'drawnCircle'].includes(featureType.value)
+    ? getFormattedArea(featureGeometry.value as Polygon)
     : undefined
 )
 // TODO: implement once circle is kept as a circle geometry,
 // also adapt length and area calculation for circle then
-const featRadius = feature?.id + ' [TODO featRayon]' // TODO
-const featElevation = feature?.id // TODO
+const featRadius = feature.value?.id + ' [TODO featRayon]' // TODO
+
+const featElevation = ref<string | undefined>()
+
+watchEffect(async () => {
+  const coordinates = (featureGeometry.value as Point).getCoordinates()
+  if (featureGeometry.value && featureType.value === 'drawnPoint') {
+    if (!featElevation.value) {
+      featElevation.value = await getFormattedElevation(coordinates)
+    } else {
+      featElevation.value = await getDebouncedFormattedElevation(coordinates)
+    }
+  } else {
+    featElevation.value = undefined
+  }
+})
 
 function onClickValidateRadius() {
   alert('TODO: validate /save radius')
@@ -74,10 +93,11 @@ function onClickValidateRadius() {
     </div>
 
     <!-- Feature elevation, for Point -->
-    <div data-cy="featItemElevation" v-if="featureType === 'drawnPoint'">
+    <div data-cy="featItemElevation" v-if="featElevation">
       <span>{{
         t('Elevation: \{\{ ctrl.featureElevation \}\}', {
           'ctrl.featureElevation': featElevation,
+          interpolation: { escapeValue: false },
         })
       }}</span>
     </div>
diff --git a/src/services/utils.ts b/src/services/utils.ts
index 5803d3cb..e086474b 100644
--- a/src/services/utils.ts
+++ b/src/services/utils.ts
@@ -12,6 +12,28 @@ export function debounce<T extends (...args: any[]) => any>(
   }
 }
 
+export const debounceAsync = <T extends (...args: any[]) => Promise<any>>(
+  fn: T,
+  delay: number
+) => {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+  return (...args: Parameters<T>): Promise<ReturnType<T>> => {
+    return new Promise((resolve, reject) => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+      timeout = setTimeout(async () => {
+        try {
+          const result = await fn(...args)
+          resolve(result)
+        } catch (error) {
+          reject(error)
+        }
+      }, delay)
+    })
+  }
+}
+
 export function stringToNumber(text: string | null): number | undefined {
   return text?.trim() && !isNaN(Number(text)) ? Number(text) : undefined
 }

From 42a2aaa05dfa0d4ee511d1af94e1f176d8316f9f Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Tue, 8 Oct 2024 17:42:53 +0200
Subject: [PATCH 6/8] test(draw): fix e2e tests

---
 cypress/e2e/draw/draw-feat-point.cy.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/cypress/e2e/draw/draw-feat-point.cy.ts b/cypress/e2e/draw/draw-feat-point.cy.ts
index 729245c5..bec5bf27 100644
--- a/cypress/e2e/draw/draw-feat-point.cy.ts
+++ b/cypress/e2e/draw/draw-feat-point.cy.ts
@@ -32,20 +32,20 @@ describe('Draw "Point"', () => {
         },
       }
     )
-    cy.intercept('GET', '/raster?lon=51966.98676810359&lat=74839.09999860045', {
-      statusCode: 200,
-      body: {
-        dhm: 333.13,
-      },
-    }).as('getElevation200x200')
     cy.intercept(
       'GET',
       '/raster?lon=12756.103097272688&lat=114635.74032468312',
       {
-        statusCode: 500,
-        body: {},
+        statusCode: 200,
+        body: {
+          dhm: 333.13,
+        },
       }
-    ).as('getElevation300x300')
+    ).as('getElevation200x200')
+    cy.intercept('GET', '/raster?lon=51966.98676810359&lat=74839.09999860045', {
+      statusCode: 500,
+      body: {},
+    }).as('getElevation300x300')
 
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
@@ -64,13 +64,13 @@ describe('Draw "Point"', () => {
 
     it('displays and updates elevation for Point (handling null values and error codes as well)', () => {
       cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
-      cy.dragVertexOnMap(100, 100, 300, 300)
+      cy.dragVertexOnMap(100, 100, 200, 200)
       cy.wait('@getElevation200x200')
       cy.get('*[data-cy="featItemElevation"]').should(
         'contain.text',
         '333.13 m'
       )
-      cy.dragVertexOnMap(300, 300, 200, 200)
+      cy.dragVertexOnMap(200, 200, 300, 300)
       cy.wait('@getElevation300x300')
       cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
     })

From 454cc1dc162dab3b24d1c85fc06f576ed79d377c Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Wed, 9 Oct 2024 16:38:45 +0200
Subject: [PATCH 7/8] test(draw): simplify e2e tests for CI mode to pass

---
 README.md                              |  2 +-
 cypress/e2e/draw/draw-feat-point.cy.ts | 22 +++++++++++++++-------
 package.json                           |  6 +++---
 vite.config.ts                         |  2 +-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index e0b2642a..9045d200 100644
--- a/README.md
+++ b/README.md
@@ -45,7 +45,7 @@ A `.prettierignore` file is used by prettier and lint to exclude some files (suc
 
 ### End to end testing with Cypress
 
-For e2e tests, the code is instrumented with the Istanbul library to obtain resulting code coverage. The dev test server is launched with the env var `INSRUMENT_COVERAGE=true`
+For e2e tests, the code is instrumented with the Istanbul library to obtain resulting code coverage. The dev test server is launched with the env var `INSTRUMENT_COVERAGE=true`
 
 - `test:e2e` will launch e2e tests and opens Cypress UI. You need to build the app before using this command with `npm run build-only -- --mode=e2e`. This will test the app built for production (with css minification, images src optimization using base64, ...)
 - `test:e2e:ci` This will run tests in command line only on a dev build (no need to build the app). Used by ci workflow.
diff --git a/cypress/e2e/draw/draw-feat-point.cy.ts b/cypress/e2e/draw/draw-feat-point.cy.ts
index bec5bf27..92525e23 100644
--- a/cypress/e2e/draw/draw-feat-point.cy.ts
+++ b/cypress/e2e/draw/draw-feat-point.cy.ts
@@ -41,11 +41,11 @@ describe('Draw "Point"', () => {
           dhm: 333.13,
         },
       }
-    ).as('getElevation200x200')
+    )
     cy.intercept('GET', '/raster?lon=51966.98676810359&lat=74839.09999860045', {
       statusCode: 500,
       body: {},
-    }).as('getElevation300x300')
+    })
 
     cy.visit('/')
     cy.get('button[data-cy="drawButton"]').click()
@@ -62,16 +62,24 @@ describe('Draw "Point"', () => {
       testFeatItemMeasurements()
     })
 
-    it('displays and updates elevation for Point (handling null values and error codes as well)', () => {
+    it('displays N/A elevation for Point if data is null', () => {
       cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
-      cy.dragVertexOnMap(100, 100, 200, 200)
-      cy.wait('@getElevation200x200')
+    })
+
+    it('displays elevation for new Point', () => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('div.ol-viewport').click(200, 200)
       cy.get('*[data-cy="featItemElevation"]').should(
         'contain.text',
         '333.13 m'
       )
-      cy.dragVertexOnMap(200, 200, 300, 300)
-      cy.wait('@getElevation300x300')
+    })
+
+    it('displays N/A elevation for new Point if response has error', () => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('div.ol-viewport').click(300, 300)
       cy.get('*[data-cy="featItemElevation"]').should('contain.text', 'N/A')
     })
 
diff --git a/package.json b/package.json
index bbce56f0..2fd96403 100644
--- a/package.json
+++ b/package.json
@@ -14,9 +14,9 @@
     "test": "npm run test:unit",
     "test:unit": "vitest --environment jsdom --root .",
     "test:unit:ci": "vitest run --environment jsdom --coverage",
-    "test:e2e": "INSRUMENT_COVERAGE=true start-server-and-test preview :4173 'cypress open --e2e'",
-    "test:e2e:ci": "INSRUMENT_COVERAGE=true start-server-and-test 'VITE_USE_PROXYURL=false vite dev --port 4173' :4173 'cypress run --e2e'",
-    "test:e2e:dev": "INSRUMENT_COVERAGE=true start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "test:e2e": "INSTRUMENT_COVERAGE=true start-server-and-test preview :4173 'cypress open --e2e'",
+    "test:e2e:ci": "INSTRUMENT_COVERAGE=true start-server-and-test 'VITE_USE_PROXYURL=false vite dev --port 4173' :4173 'cypress run --e2e'",
+    "test:e2e:dev": "INSTRUMENT_COVERAGE=true start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
     "coverage-report": "nyc report",
     "type-check:dev": "npm run type-check -- --watch",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
diff --git a/vite.config.ts b/vite.config.ts
index 0eb8ca3c..f163dd0b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -48,7 +48,7 @@ export default defineConfig(({ command, mode }) => {
   }
 
   const env = loadEnv(mode, process.cwd(), '')
-  if (env.INSRUMENT_COVERAGE) {
+  if (env.INSTRUMENT_COVERAGE) {
     base.server = { hmr: false } // disable hot reload of files modified by coverage tests
     base.build = { sourcemap: 'hidden' } // disable warning which says coverage enabled by Istanbul
     base.plugins = [...(base.plugins || []), IstanbulPlugin()] // add Istanbul plugin for code instrumentation

From 973249b8f7a5a505f2141f93a5b2f1e3d6df54b2 Mon Sep 17 00:00:00 2001
From: Tobias Kohr <tobias.kohr@camptocamp.com>
Date: Mon, 14 Oct 2024 16:00:09 +0200
Subject: [PATCH 8/8] refactor(review): extract formatting logic from helper
 into directive

---
 src/bundle/lib.ts                             |  2 ++
 .../draw/feature-measurements-helper.ts       | 32 ++++++++-----------
 src/components/draw/feature-measurements.vue  | 23 +++++++------
 src/directives/format-distance.directive.ts   | 27 ++++++++++++++++
 src/main.ts                                   |  2 ++
 5 files changed, 55 insertions(+), 31 deletions(-)
 create mode 100644 src/directives/format-distance.directive.ts

diff --git a/src/bundle/lib.ts b/src/bundle/lib.ts
index eb6479a4..3f9819f4 100644
--- a/src/bundle/lib.ts
+++ b/src/bundle/lib.ts
@@ -49,6 +49,7 @@ import { clearLayersCache } from '@/stores/layers.cache'
 import i18next, { InitOptions } from 'i18next'
 import backend from 'i18next-http-backend'
 import I18NextVue from 'i18next-vue'
+import formatDistanceDirective from './directives/format-distance.directive'
 
 import App from '../App.vue'
 
@@ -78,6 +79,7 @@ export default function useLuxLib(options: LuxLibOptions) {
   app.use(createPinia())
   app.use(I18NextVue, { i18next })
   app.use(VueDOMPurifyHTML)
+  app.use(formatDistanceDirective)
 
   const createElementInstance = (component = {}, app = null) => {
     return defineCustomElement(
diff --git a/src/components/draw/feature-measurements-helper.ts b/src/components/draw/feature-measurements-helper.ts
index dbafcd56..044f3d01 100644
--- a/src/components/draw/feature-measurements-helper.ts
+++ b/src/components/draw/feature-measurements-helper.ts
@@ -1,7 +1,6 @@
 import { PointData } from '@/components/common/graph/d3-graph-elevation.d'
 import { Coordinate } from 'ol/coordinate'
 import { transform } from 'ol/proj'
-import i18next from 'i18next'
 import { debounceAsync } from '@/services/utils'
 
 const ELEVATION_URL = import.meta.env.VITE_ELEVATION_URL
@@ -17,25 +16,20 @@ export function downloadCsv(profileData: PointData[]) {
   }
 }
 
-export function getElevation(coordinate: Coordinate) {
+export const getElevation = async (coordinate: Coordinate) => {
   const lonlat = transform(coordinate, MAP_CRS, ELEVATION_CRS)
-  return fetch(`${ELEVATION_URL}?lon=${lonlat[0]}&lat=${lonlat[1]}`).then(
-    async response => {
-      const resp = (await response.json()).dhm
-      let text = i18next.t('N/A', { ns: 'client' })
-      if (resp) {
-        text = `${Number(resp).toFixed(2)} m`
-      }
-      return { formattedElevation: text, rawElevation: resp }
+  try {
+    const response = await fetch(
+      `${ELEVATION_URL}?lon=${lonlat[0]}&lat=${lonlat[1]}`
+    )
+    if (!response.ok) {
+      throw new Error('Network response was not ok')
     }
-  )
-}
-
-export const getFormattedElevation = async (coordinates: number[]) => {
-  return (await getElevation(coordinates)).formattedElevation
+    const data = await response.json()
+    return data.dhm
+  } catch (error) {
+    return null //return null on error, like API when no data
+  }
 }
 
-export const getDebouncedFormattedElevation = debounceAsync(
-  getFormattedElevation,
-  300
-)
+export const getDebouncedElevation = debounceAsync(getElevation, 300)
diff --git a/src/components/draw/feature-measurements.vue b/src/components/draw/feature-measurements.vue
index 8701afbf..d01b7999 100644
--- a/src/components/draw/feature-measurements.vue
+++ b/src/components/draw/feature-measurements.vue
@@ -12,8 +12,8 @@ import { Geometry, Point, Polygon } from 'ol/geom'
 import { Projection } from 'ol/proj'
 import useMap from '@/composables/map/map.composable'
 import {
-  getDebouncedFormattedElevation,
-  getFormattedElevation,
+  getDebouncedElevation,
+  getElevation,
 } from './feature-measurements-helper'
 
 defineProps<{
@@ -43,15 +43,15 @@ const featArea = computed(() =>
 // also adapt length and area calculation for circle then
 const featRadius = feature.value?.id + ' [TODO featRayon]' // TODO
 
-const featElevation = ref<string | undefined>()
+const featElevation = ref<number | undefined>()
 
 watchEffect(async () => {
   const coordinates = (featureGeometry.value as Point).getCoordinates()
   if (featureGeometry.value && featureType.value === 'drawnPoint') {
     if (!featElevation.value) {
-      featElevation.value = await getFormattedElevation(coordinates)
+      featElevation.value = await getElevation(coordinates)
     } else {
-      featElevation.value = await getDebouncedFormattedElevation(coordinates)
+      featElevation.value = await getDebouncedElevation(coordinates)
     }
   } else {
     featElevation.value = undefined
@@ -93,13 +93,12 @@ function onClickValidateRadius() {
     </div>
 
     <!-- Feature elevation, for Point -->
-    <div data-cy="featItemElevation" v-if="featElevation">
-      <span>{{
-        t('Elevation: \{\{ ctrl.featureElevation \}\}', {
-          'ctrl.featureElevation': featElevation,
-          interpolation: { escapeValue: false },
-        })
-      }}</span>
+    <div v-if="featureType === 'drawnPoint'">
+      <span>{{ t('Elevation') }}: </span>
+      <span
+        data-cy="featItemElevation"
+        v-format-distance="featElevation"
+      ></span>
     </div>
 
     <!-- Feature elevation profile LineString -->
diff --git a/src/directives/format-distance.directive.ts b/src/directives/format-distance.directive.ts
new file mode 100644
index 00000000..111899fd
--- /dev/null
+++ b/src/directives/format-distance.directive.ts
@@ -0,0 +1,27 @@
+import i18next from 'i18next'
+import { App } from 'vue'
+
+export default {
+  install(app: App) {
+    app.directive('format-distance', {
+      beforeMount(el: HTMLElement, binding: { value: number }) {
+        format(el, binding.value)
+      },
+      updated(el: HTMLElement, binding: { value: number }) {
+        format(el, binding.value)
+      },
+    })
+  },
+}
+
+function format(el: HTMLElement, value: number): void {
+  let formattedText: string = ''
+  if (value === null) {
+    formattedText = i18next.t('N/A', { ns: 'client' })
+  } else if (value < 1000) {
+    formattedText = `${value.toFixed(2)} m`
+  } else if (value >= 1000) {
+    formattedText = `${(value / 1000).toFixed(2)} km`
+  }
+  el.textContent = formattedText
+}
diff --git a/src/main.ts b/src/main.ts
index cfe08cc6..62149ef9 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,6 +9,7 @@ import { createPinia } from 'pinia'
 import { initProjections } from '@/services/projection.utils'
 import { useThemeStore } from './stores/config.store'
 import { themesApiFixture } from './__fixtures__/themes.api.fixture'
+import formatDistanceDirective from './directives/format-distance.directive'
 
 import App from './App.vue'
 
@@ -37,6 +38,7 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(I18NextVue, { i18next })
 app.use(VueDOMPurifyHTML)
+app.use(formatDistanceDirective)
 
 app.mount('#app')