diff --git a/app/package-lock.json b/app/package-lock.json
index f7407a63ec..62dedc15f5 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -9,6 +9,7 @@
       "version": "4.0.0",
       "dependencies": {
         "@chenfengyuan/vue-countdown": "^1.1.5",
+        "@eox/drawtools": "^0.9.0",
         "@eox/geosearch": "^0.1.2",
         "@eox/itemfilter": "0.14.0",
         "@eox/jsonform": "^0.8.0",
@@ -366,9 +367,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -1312,12 +1313,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz",
-      "integrity": "sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
+      "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       },
       "engines": {
@@ -1976,6 +1977,18 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/@eox/drawtools": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@eox/drawtools/-/drawtools-0.9.0.tgz",
+      "integrity": "sha512-/8KFJ+Qm9a2/4oLuynN1hAWqVxnLd2mqoy3dQ3SG13Ky1ebsjYa+oL1rYWYtIu30RyUakA1H+LYyM7M0UoYDiw==",
+      "dependencies": {
+        "lit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      }
+    },
     "node_modules/@eox/geosearch": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@eox/geosearch/-/geosearch-0.1.2.tgz",
@@ -22287,9 +22300,9 @@
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
-      "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
@@ -22911,12 +22924,12 @@
       }
     },
     "@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.11.tgz",
-      "integrity": "sha512-YZWOw4HxXrotb5xsjMJUDlLgcDXSfO9eCmdl1bgW4+/lAGdkjaEvOnQ4p5WKKdUgSzO39dgPl0pTnfxm0OAXcg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
+      "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       }
     },
@@ -23400,6 +23413,14 @@
         }
       }
     },
+    "@eox/drawtools": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@eox/drawtools/-/drawtools-0.9.0.tgz",
+      "integrity": "sha512-/8KFJ+Qm9a2/4oLuynN1hAWqVxnLd2mqoy3dQ3SG13Ky1ebsjYa+oL1rYWYtIu30RyUakA1H+LYyM7M0UoYDiw==",
+      "requires": {
+        "lit": "^3.0.2"
+      }
+    },
     "@eox/geosearch": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@eox/geosearch/-/geosearch-0.1.2.tgz",
diff --git a/app/package.json b/app/package.json
index 6f868f7daa..4051638282 100644
--- a/app/package.json
+++ b/app/package.json
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-countdown": "^1.1.5",
+    "@eox/drawtools": "^0.9.0",
     "@eox/geosearch": "^0.1.2",
     "@eox/itemfilter": "0.14.0",
     "@eox/jsonform": "^0.8.0",
     "@eox/layercontrol": "^0.17.3",
-    "@eox/stacinfo": "^0.3.3",
     "@eox/map": "^1.9.2",
-    "ol": "9.2.5-dev.1716833846254",
+    "@eox/stacinfo": "^0.3.3",
     "@eox/storytelling": "^1.0.5",
     "@turf/difference": "^6.5.0",
     "axios": "^0.21.1",
@@ -45,6 +45,7 @@
     "luxon": "^1.28.1",
     "marked": "^4.0.10",
     "medium-zoom": "^1.0.6",
+    "ol": "9.2.5-dev.1716833846254",
     "ol-mapbox-style": "^12.3.0",
     "proj4": "^2.8.0",
     "regl": "^2.1.0",
diff --git a/app/src/components/map/Map.vue b/app/src/components/map/Map.vue
index 9674b25aac..1ed58c3684 100644
--- a/app/src/components/map/Map.vue
+++ b/app/src/components/map/Map.vue
@@ -141,6 +141,11 @@
           interval="1000"
           :endpoint="searchEndpoint"
         ></eox-geosearch>
+        <eox-drawtools
+          type="Polygon"
+          for="eox-map"
+          style="pointer-events: initial"
+        />
         <v-btn
           v-if="$vuetify.breakpoint.xsOnly && displayTimeSelection"
           :color="$vuetify.theme.currentTheme.background"
@@ -276,6 +281,7 @@ import {
   getFilteredInputData,
 } from '@/utils';
 import '@eox/map';
+import '@eox/drawtools';
 
 const geoJsonFormat = new GeoJSON({
 });
diff --git a/app/vue.config.js b/app/vue.config.js
index b3ebd5c620..58de838e12 100644
--- a/app/vue.config.js
+++ b/app/vue.config.js
@@ -60,6 +60,7 @@ module.exports = {
     '@eox/storytelling',
     'color-parse',
     '@eox/geosearch',
+    '@eox/drawtools',
   ],
   configureWebpack: {
     devServer: {