From 74d00b041fae30313f5d6de9ae83f74fc5652cc8 Mon Sep 17 00:00:00 2001
From: steev <mauricefl@outlook.de>
Date: Tue, 7 Jan 2025 00:19:29 +0100
Subject: [PATCH] feat: :sparkles: implemented map (does not yet support
 geoJSON)

---
 web/package-lock.json             | 252 ++++++++++++++++++++++++++++++
 web/package.json                  |   7 +
 web/src/components/fileUpload.vue |   9 +-
 web/src/components/map.vue        |  77 ++++++---
 web/src/leatflet.d.ts             |   4 +
 web/src/views/driver.vue          |   1 -
 web/src/views/route.vue           |  81 +++++++++-
 web/src/views/settings.vue        |   3 +-
 web/src/views/uploadcenter.vue    |  19 ---
 9 files changed, 403 insertions(+), 50 deletions(-)
 create mode 100644 web/src/leatflet.d.ts
 delete mode 100644 web/src/views/uploadcenter.vue

diff --git a/web/package-lock.json b/web/package-lock.json
index d2591f6..b7a0634 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,8 +8,14 @@
       "name": "my-vue-app",
       "version": "0.0.0",
       "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.8",
+        "@types/geojson": "^7946.0.15",
+        "@vuepic/vue-datepicker": "^10.0.0",
+        "leaflet": "^1.9.4",
+        "mapbox-gl": "^3.9.2",
         "maplibre-gl": "^4.7.1",
         "my-vue-app": "file:",
+        "ol": "^10.3.1",
         "register-service-worker": "^1.7.2",
         "three": "^0.172.0",
         "vue": "^3.4.37",
@@ -17,6 +23,7 @@
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
+        "@types/leaflet": "^1.9.15",
         "@types/three": "^0.171.0",
         "@vitejs/plugin-vue": "^5.1.2",
         "@vue/cli-plugin-pwa": "~5.0.0",
@@ -1943,6 +1950,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/@googlemaps/js-api-loader": {
+      "version": "1.16.8",
+      "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
+      "integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -2071,6 +2083,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-3.0.0.tgz",
+      "integrity": "sha512-2XghOwu16ZwPJLOFVuIOaLbN0iKMn867evzXFyf0P22dqugezfJwLmdanAgU25ITvz1TvOfVP4jsDImlDJzcWg=="
+    },
     "node_modules/@mapbox/point-geometry": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
@@ -2173,6 +2190,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.1.tgz",
+      "integrity": "sha512-j+ejhYwY6PeB+v1kn7lZFACUIG97u90WxMuGosILFsl9d4Ovi0sjk0GlPfoEcx+FzvXZDAfioD+NGnnPamXgMA=="
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -2839,6 +2861,15 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.15.tgz",
+      "integrity": "sha512-7UuggAuAs+mva66gtf2OTB1nEhzU/9JED93TIaOEgvFMvG/dIGQaukHE7izHo1Zd+Ko1L4ETUw7TBc8yUxevpg==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@types/mapbox__point-geometry": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
@@ -2919,6 +2950,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@types/rbush": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
+      "integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ=="
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3530,6 +3566,20 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-10.0.0.tgz",
+      "integrity": "sha512-ujlk3ahftVQpyCJ8hq7TmOOHrf/XFJI1ZcAh/FRB5Ci62Vq5HmHf6xux5KVi5SPUFRTJY78m+uDhYy1M+8RZ9w==",
+      "dependencies": {
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
@@ -4445,6 +4495,11 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/cheap-ruler": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cheap-ruler/-/cheap-ruler-4.0.0.tgz",
+      "integrity": "sha512-0BJa8f4t141BYKQyn9NSQt1PguFQXMXwZiA5shfoaBYHAb2fFk2RAX+tiWMoQU+Agtzt3mdt0JtuyshAXqZ+Vw=="
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -4709,6 +4764,36 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-parse": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
+      "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
+      "dependencies": {
+        "color-name": "^2.0.0"
+      }
+    },
+    "node_modules/color-parse/node_modules/color-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
+      "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/color-rgba": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
+      "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
+      "dependencies": {
+        "color-parse": "^2.0.0",
+        "color-space": "^2.0.0"
+      }
+    },
+    "node_modules/color-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
+      "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA=="
+    },
     "node_modules/color-string": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
@@ -5137,6 +5222,11 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -5338,6 +5428,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -6636,6 +6735,24 @@
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.2.tgz",
       "integrity": "sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A=="
     },
+    "node_modules/geotiff": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
+      "integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2",
+        "zstddec": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10.19"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6847,6 +6964,11 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true
     },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -8124,6 +8246,16 @@
         "launch-editor": "^2.9.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
+    "node_modules/lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8417,6 +8549,45 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/mapbox-gl": {
+      "version": "3.9.2",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.9.2.tgz",
+      "integrity": "sha512-ADGW4rJOylwcy9+yGf8HM2sLXLh3An+9PZVQzdpXrSbSNt0dI7e49a6NY35Yf2wbd4hoVyR5M3hy7cQ9sFrC2w==",
+      "workspaces": [
+        "src/style-spec",
+        "test/build/typings"
+      ],
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^3.0.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "@types/geojson": "^7946.0.15",
+        "@types/geojson-vt": "^3.2.5",
+        "@types/mapbox__point-geometry": "^0.1.4",
+        "@types/mapbox__vector-tile": "^1.3.4",
+        "@types/pbf": "^3.0.5",
+        "@types/supercluster": "^7.1.3",
+        "cheap-ruler": "^4.0.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^3.0.0",
+        "geojson-vt": "^4.0.2",
+        "gl-matrix": "^3.4.3",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.2",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^3.0.0",
+        "serialize-to-js": "^3.1.2",
+        "supercluster": "^8.0.1",
+        "tinyqueue": "^3.0.0",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "node_modules/maplibre-gl": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.1.tgz",
@@ -8995,6 +9166,35 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/ol": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-10.3.1.tgz",
+      "integrity": "sha512-D1nRQVLOBCRempVqBFV8pSI5H13BtnhuLDjGl+3NKdMOFyjx/UqRX/tcMspEw3LhFOSPWn1Ev+1KIRV8AlHM7A==",
+      "dependencies": {
+        "@types/rbush": "4.0.0",
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
+        "earcut": "^3.0.0",
+        "geotiff": "^2.1.3",
+        "pbf": "4.0.1",
+        "rbush": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol/node_modules/pbf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+      "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -9198,6 +9398,11 @@
       "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -9221,6 +9426,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -10378,6 +10588,17 @@
       ],
       "license": "MIT"
     },
+    "node_modules/quick-lru": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
+      "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/quickselect": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
@@ -10418,6 +10639,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/rbush": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
+      "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
+      "dependencies": {
+        "quickselect": "^3.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -11132,6 +11361,14 @@
         "randombytes": "^2.1.0"
       }
     },
+    "node_modules/serialize-to-js": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.2.tgz",
+      "integrity": "sha512-owllqNuDDEimQat7EPG0tH7JjO090xKNzUtYz6X+Sk2BXDnOCilDdNLwjWeFywG9xkJul1ULvtUQa9O4pUaY0w==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/serve-index": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
@@ -12849,6 +13086,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -13723,6 +13965,11 @@
         }
       }
     },
+    "node_modules/xml-utils": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.1.tgz",
+      "integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ=="
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -13824,6 +14071,11 @@
       "engines": {
         "node": ">=8"
       }
+    },
+    "node_modules/zstddec": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",
+      "integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
     }
   }
 }
diff --git a/web/package.json b/web/package.json
index 904250c..cc6f024 100644
--- a/web/package.json
+++ b/web/package.json
@@ -8,8 +8,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@googlemaps/js-api-loader": "^1.16.8",
+    "@types/geojson": "^7946.0.15",
+    "@vuepic/vue-datepicker": "^10.0.0",
+    "leaflet": "^1.9.4",
+    "mapbox-gl": "^3.9.2",
     "maplibre-gl": "^4.7.1",
     "my-vue-app": "file:",
+    "ol": "^10.3.1",
     "register-service-worker": "^1.7.2",
     "three": "^0.172.0",
     "vue": "^3.4.37",
@@ -17,6 +23,7 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.15",
     "@types/three": "^0.171.0",
     "@vitejs/plugin-vue": "^5.1.2",
     "@vue/cli-plugin-pwa": "~5.0.0",
diff --git a/web/src/components/fileUpload.vue b/web/src/components/fileUpload.vue
index c5b3e7f..d696600 100644
--- a/web/src/components/fileUpload.vue
+++ b/web/src/components/fileUpload.vue
@@ -33,13 +33,20 @@ export default defineComponent({
   <div class="card bg-base-100 w-full shadow-xl" style="">
     <div class="card-body">
 
-      <h2 class="card-title">{{ localizedUploadHeader }}</h2>
+      <h2 class="card-title">File Upload</h2>
 
       <button class="btn btn-error close round" @click="close()">
         <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
           <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
         </svg>
       </button>
+      <label class="form-control w-full max-w-xs">
+        <div class="label">
+          <span class="label-text">Upload a GPX File</span>
+        </div>
+        <input type="file" class="file-input file-input-bordered w-full max-w-xs" />
+      </label>
+      <button class="btn btn-success">Upload</button>
     </div>
   </div>
 </template>
diff --git a/web/src/components/map.vue b/web/src/components/map.vue
index d424b35..a0c82c2 100644
--- a/web/src/components/map.vue
+++ b/web/src/components/map.vue
@@ -1,37 +1,64 @@
 <script lang="ts">
-import {defineComponent, SetupContext} from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
 
 export default defineComponent({
-  name: 'map',
-  setup(_, { emit }: SetupContext) {
-    return { 
+  name: 'Map',
+  props: {
+    geoJsonData: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+  },
+  setup(props) {
+    const mapDiv = ref<HTMLElement | null>(null); // ref to map container element
+
+    onMounted(() => {
+      if (mapDiv.value) {
+        const map = L.map(mapDiv.value, {
+          center: [51.4819, 7.2162], // Beispielkoordinaten, setze deine eigenen
+          zoom: 13,
+        });
+
+        // Hinzufügen der GeoJSON-Daten zur Karte
+        if (props.geoJsonData) {
+          L.geoJSON(props.geoJsonData).addTo(map);
+        }
+
+        // Hinzufügen von OpenStreetMap-Kacheln
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
+      }
+    });
+
+    return {
+      mapDiv, // Gebe mapDiv zurück, damit es im Template verwendet wird
     };
   },
 });
 </script>
 
-
 <template>
-  the map has not yet been implemented
-  <ul class="menu bg-base-200 lg:menu-horizontal" style="width: 100%;">
-    <li>
-      <a>
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-upload-fill" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0"/>
-        </svg>
-        Upload
-      </a>
-    </li>
-    <li>
-      <a @click="toggleSettings">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sliders" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z"/>
-        </svg>
-        Settings
-      </a>
-    </li>
-  </ul>
+  <!-- Das ref-Attribut gibt den Container für die Karte an -->
+  <div ref="mapDiv" style="width: 100vw; height: 80vh; overflow: hidden;"></div>
 </template>
 
 <style scoped>
-</style>
\ No newline at end of file
+/* Verhindert, dass die Karte über den Bildschirm hinausgeht */
+#mapDiv {
+  width: 100vw; /* Volle Breite des Viewports */
+  height: 80vh; /* Volle Höhe des Viewports */
+  margin: 0;     /* Keine Margen */
+  padding: 0;    /* Keine Auffüllung */
+  overflow: hidden; /* Verhindert ungewolltes Überlaufen */
+}
+
+/* Optional: Globale Styles für den Body und html, um das Layout zu normalisieren */
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/web/src/leatflet.d.ts b/web/src/leatflet.d.ts
new file mode 100644
index 0000000..0a6211a
--- /dev/null
+++ b/web/src/leatflet.d.ts
@@ -0,0 +1,4 @@
+declare module 'leaflet' {
+    import * as L from 'leaflet';
+    export = L;
+}  
\ No newline at end of file
diff --git a/web/src/views/driver.vue b/web/src/views/driver.vue
index a3c38b0..fe777f3 100644
--- a/web/src/views/driver.vue
+++ b/web/src/views/driver.vue
@@ -51,7 +51,6 @@ export default defineComponent({
 
     // handles sending webrequests to the backend
     const createDriver = async () => {
-      // TODO: send of post request with new driver and attach it to the grid
       const headers: Headers = new Headers()
 
       headers.set('Content-Type', 'application/json')
diff --git a/web/src/views/route.vue b/web/src/views/route.vue
index 44dfd50..12d2ad3 100644
--- a/web/src/views/route.vue
+++ b/web/src/views/route.vue
@@ -1,10 +1,60 @@
 <script lang="ts">
-import {defineComponent, SetupContext} from 'vue';
+import {defineComponent, ref, Ref, SetupContext} from 'vue';
+import PointCloud from '../components/pointcloud.vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+import Map from '../components/map.vue';
+import FileUpload from '../components/fileUpload.vue';
+
+
+type track = {
+  id:number
+  name:string
+}
 
 export default defineComponent({
   name: 'map',
+  components: {PointCloud, VueDatePicker, Map, FileUpload},
   setup(_, { emit }: SetupContext) {
+    const showMap:Ref<boolean> = ref(false);
+    const showCloud:Ref<boolean> = ref(false);
+    const search:Ref<boolean> = ref(true);
+    const showUpload:Ref<boolean> = ref(false);
+    const tracks:Ref<track[]> = ref([{id:0, name:"test"}])
+    const startSearchDate = ref();
+    const endSearchDate = ref();
+    const mapData = ref(null);
+
+    const loadTrack = async (id:number) => {
+      showMap.value = true;
+      showCloud.value = false;
+      search.value = false;
+    }
+
+    const toggleUpdload = () => {
+
+    }
+
+    const getTracks  = async() => {
+
+    }
+
+    const searchTracks = async() => {
+
+    }
+
     return { 
+      showMap,
+      showCloud,
+      search,
+      tracks,
+      loadTrack,
+      getTracks,
+      searchTracks,
+      startSearchDate,
+      endSearchDate,
+      mapData,
+      showUpload
     };
   },
 });
@@ -12,7 +62,34 @@ export default defineComponent({
 
 
 <template>
-  route
+  <FileUpload v-if="showUpload" @close="showUpload=false;" style="position:absolute; top: 30VH; width: 80%;"></FileUpload>
+  <div class="grid grid-flow-col auto-cols-max gap-4">
+    <div>
+      <ul class="menu menu-xs bg-base-200 rounded-lg w-full max-w-xs overscroll-auto">
+        <li> <a v-on:click="showUpload=true; showMap=false;showCloud=false;search=false;"> upload file </a> </li>
+        <li> <a v-on:click="search=true;showMap=false;showCloud=false;"> filter track </a> </li>
+        <li><div class="divider"></div></li>
+        <li v-for="track in tracks"> <a v-on:click="loadTrack(track.id)"> {{ track.name }} </a> </li>
+      </ul>
+    </div>
+    <div style="width: 62%; margin-left: 30%;">
+      <PointCloud v-if="showCloud && !search"></PointCloud>
+    </div>
+    <div v-if="!showMap && !showCloud && search" style="margin-left: 20%; display:flex;">
+      <div>
+        start time
+        <VueDatePicker v-model="startSearchDate"> Search From </VueDatePicker>
+      </div>
+      <div style="margin-left: 5%;">
+        end time
+        <VueDatePicker v-model="endSearchDate"> Search To </VueDatePicker>
+      </div>
+      <button class="btn btn-success" v-on:click="" style="margin-left: 5%; height:60px; width:120px;">Search</button>
+    </div>
+    <div v-if="showMap && !search && !showCloud">
+      <Map style="width: 68VW; margin-left: 10%; border-radius: 10px; border: 1px solid #95a5a6;"></Map>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/web/src/views/settings.vue b/web/src/views/settings.vue
index 92ddc9d..adb3747 100644
--- a/web/src/views/settings.vue
+++ b/web/src/views/settings.vue
@@ -3,7 +3,6 @@ import { defineComponent, SetupContext, ref, Ref } from 'vue';
 import GetLocalizedText from "../classes/language";
 
 export default defineComponent({
-    emits: ['close'],
     name: 'settings',
     setup(_, { emit }: SetupContext) {
         var attributeTheme: Ref<string> = ref(document.documentElement.getAttribute("data-theme") ?? "dark")
@@ -18,7 +17,7 @@ export default defineComponent({
         }
 
         // TODO: if time rework this to function with the new intended settings class
-        // NOTE: this has low priority as the system inplace allthough not very intuitive works
+        // NOTE: this has low priority as the system inplace although not very intuitive works
         const changeTheme = (theme: string) => {
 
             document.documentElement.setAttribute('data-theme', theme);
diff --git a/web/src/views/uploadcenter.vue b/web/src/views/uploadcenter.vue
deleted file mode 100644
index e6e1d0b..0000000
--- a/web/src/views/uploadcenter.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script lang="ts">
-import {defineComponent, SetupContext} from 'vue';
-
-export default defineComponent({
-    name: 'map',
-    setup(_, { emit }: SetupContext) {
-        return { 
-        };
-    },
-});
-</script>
-
-
-<template>
-    upload center
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file