diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..ed9572b
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,8 @@
+# OAuth 2.0 Client ID. Create one at Google Cloud Console > APIs & Services > Credentials
+VITE_CLIENT_ID=
+
+# OpenRouteService API key. Create one at OpenRouteService dev dashboard > Tokens
+VITE_OPENROUTESERVICE_API_KEY=
+
+# Specify backend URL here
+VITE_BACKEND_URL=
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a547bf3..025cdbf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+#env
+.env
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
deleted file mode 100644
index c027599..0000000
--- a/.gitlab-ci.yml
+++ /dev/null
@@ -1,25 +0,0 @@
-stages:          
-  - prepare
-  - build
-  - deploy
-
-remove-old-services:
-  stage: prepare
-  script:
-    - podman stop little-lines
-    - podman rm little-lines
-
-container-build:
-  stage: build 
-  script:
-    - sed -i "s/DATE/$(date -I)/g" ${CI_PROJECT_DIR}/src/views/About.vue
-    - sed -i "s/VERSION/$(git log -1 --oneline | awk '{print $1}')/g" ${CI_PROJECT_DIR}/src/views/About.vue
-    - podman build -t little-lines .
-
-container-deploy:
-  stage: deploy
-  script:
-    - podman run --name little-lines -p 8081:80 -d little-lines
-    - podman generate systemd little-lines > ~/.config/systemd/user/little-lines.service
-    - systemctl --user daemon-reload
-    - systemctl --user enable little-lines
\ No newline at end of file
diff --git a/.woodpecker.yml b/.woodpecker.yml
new file mode 100644
index 0000000..af2a63e
--- /dev/null
+++ b/.woodpecker.yml
@@ -0,0 +1,23 @@
+when:
+  - branch: main
+    event: push
+  - event: tag
+  
+steps:
+  - name: deploy
+    image: node
+    commands:
+      - npm i
+      - npm run build
+      - rm -rf /mnt/caddy-sites/little-lines.techtransthai.org/*
+      - cp -r dist/* /mnt/caddy-sites/little-lines.techtransthai.org/
+    volumes:
+      - /media/core/Data1/Apps/caddy/sites:/mnt/caddy-sites
+    environment:
+      VITE_BACKEND_URL: https://little-lines-backend.techtransthai.org
+      VITE_CLIENT_ID:
+        from_secret: client_id
+      VITE_OPENROUTESERVICE_API_KEY:
+        from_secret: ors_api_key
+      
+
diff --git a/Dockerfile b/Dockerfile
index 2094672..4a01004 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,16 +1,15 @@
-FROM nginx:alpine
+FROM docker.io/library/alpine:latest
 
 # Set up environment for building
-RUN apk add yarn nodejs
+RUN apk add nodejs npm
 
 # Copy files to build environment
-RUN mkdir /opt/micromobility-navigation
-COPY . /opt/micromobility-navigation
+RUN mkdir /opt/little-lines-frontend
+COPY . /opt/little-lines-frontend
+
+# Start the app
+WORKDIR /opt/little-lines-frontend
+RUN npm i
+CMD npm run dev -- --host
 
-# Run Vite production build
-WORKDIR /opt/micromobility-navigation
-RUN yarn
-RUN yarn run build
 
-# Copy files to nginx path
-RUN cp -r dist/* icons /usr/share/nginx/html
diff --git a/README.md b/README.md
index 6fd2f75..f3a8674 100644
--- a/README.md
+++ b/README.md
@@ -6,9 +6,9 @@
   <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">
     <img alt="License: AGPLv3" src="https://shields.io/badge/License-AGPLv3-blueviolet.svg">
   </a>
-  <a href="https://gitlab.com/openKMITL/micromobility-navigation/-/pipelines">
-    <img alt="Build Status" src="https://gitlab.com/openkmitl/micromobility-navigation/badges/main/pipeline.svg">
+    <img alt="Service Status" src="https://status.techtransthai.org/api/badge/7/status">
   </a>
+
  
 
 
@@ -17,11 +17,11 @@
 
   <a href="https://little-lines.techtransthai.org">เข้าใช้งานเว็บแอป</a>
   &nbsp;•&nbsp;
-  <a href="https://gitlab.com/openKMITL/micromobility-navigation/-/wikis/home">เอกสาร</a>
+  <a href="https://www.techtransthai.org/webapps/little-lines/">โฮมเพจ</a>
 
   <h5>ร่วมพูดคุยกับเรา:</h5>
-  <a href="https://discord.gg/6aPemyuSzx">
-    <img alt="Discord" src="https://img.shields.io/discord/1053041544845861015?label=Discord&color=blueviolet">
+  <a href="https://t.me/techtransthai">
+    <img alt="Telegram" src="https://img.shields.io/badge/Telegram-TechTransThai Community-blue">
   </a>
 </div>
 
@@ -41,37 +41,8 @@ Littles Lines คือระบบนำทางสำหรับล้อข
 สำหรับการพัฒนาด้วย NPM
 
 ```
-$ git clone https://gitlab.com/openKMITL/micromobility-navigation.git
-$ cd micromobility-navigation
+$ git clone https://gitlab.com/little-lines/frontend.git
+$ cd little-lines
 $ npm i
 $ npm run dev
-```
-
-สำหรับการพัฒนาด้วย Yarn
-
-```
-$ git clone https://gitlab.com/openKMITL/micromobility-navigation.git
-$ cd micromobility-navigation
-$ yarn
-$ yarn dev
-```
-
-สำหรับ Production ด้วย Podman/Docker
-
-```
-$ git clone https://gitlab.com/openKMITL/micromobility-navigation.git
-$ cd micromobility-navigation
-$ podman build -t littlelines:20230720 .
-$ podman run --name littlelines -p 8080:80 -d littlelines:20230720
-```
-
-## Special Thanks
-
-<div style="display: flex; justify-content: center; align-items: center;">
-    <a href="https://discord.gg/6aPemyuSzx">
-    <img src="assets/openKMITL-Community.png" alt=openKMITL" height="40">
-    <a/>
-    <a href="https://techtransthai.org">
-    <img src="assets/ttt-org-wide-grey.svg" alt="TTT Logo" height="45">
-    <a/>
-</div>
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/assets/flag-filled-symbolic.png b/assets/flag-filled-symbolic.png
new file mode 100644
index 0000000..afc4c4c
Binary files /dev/null and b/assets/flag-filled-symbolic.png differ
diff --git a/assets/flag-filled-symbolic.svg b/assets/flag-filled-symbolic.svg
new file mode 100644
index 0000000..7312640
--- /dev/null
+++ b/assets/flag-filled-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 1.980469 1.003906 v 14 h 2 v -6 h 2.382812 l 0.722657 1.445313 c 0.171874 0.339843 0.519531 0.554687 0.894531 0.554687 h 5 c 0.554687 0 1 -0.449218 1 -1 v -6 c 0 -0.550781 -0.445313 -1 -1 -1 h -3.378907 l -0.726562 -1.449218 c -0.167969 -0.335938 -0.515625 -0.550782 -0.894531 -0.550782 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -580 -600)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>
diff --git a/assets/map-marker-symbolic.png b/assets/map-marker-symbolic.png
new file mode 100644
index 0000000..28393f4
Binary files /dev/null and b/assets/map-marker-symbolic.png differ
diff --git a/assets/map-marker-symbolic.svg b/assets/map-marker-symbolic.svg
new file mode 100644
index 0000000..8a58190
--- /dev/null
+++ b/assets/map-marker-symbolic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><path d="m 8 0 c -3.589844 0 -6.5 2.910156 -6.5 6.5 s 2.910156 6.496094 6.5 6.496094 c 3.589844 0.003906 6.5 -2.90625 6.5 -6.496094 s -2.910156 -6.5 -6.5 -6.5 z m 0 4 c 1.378906 0 2.5 1.117188 2.5 2.5 c 0 1.378906 -1.121094 2.5 -2.5 2.496094 c -1.378906 0 -2.5 -1.117188 -2.5 -2.496094 s 1.117188 -2.5 2.5 -2.5 z m 0 0" fill="#222222"/><path d="m 14.097656 8.746094 l -5.660156 0.230468 l -6.535156 -0.230468 c 0.6875 2.152344 4.097656 5.25 6.097656 7.25 v 0.003906 v -0.003906 c 2 -2 5.410156 -5.101563 6.097656 -7.25 z m 0 0" fill="#222222"/><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -700 -60)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g></svg>
diff --git a/icons/Adwaita/no-wheelchair.svg b/icons/Adwaita/no-wheelchair.svg
new file mode 100644
index 0000000..576d2d2
--- /dev/null
+++ b/icons/Adwaita/no-wheelchair.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -320 -60)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -320 -60)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -320 -60)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g><g fill="#222222"><path d="m 2 1 c -0.265625 0 -0.519531 0.105469 -0.707031 0.292969 c -0.390625 0.390625 -0.390625 1.023437 0 1.414062 l 12 12 c 0.390625 0.390625 1.023437 0.390625 1.414062 0 s 0.390625 -1.023437 0 -1.414062 l -12 -12 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 z m 0 0"/><path d="m 5.949219 0.125 c -0.753907 0.019531 -1.433594 0.460938 -1.753907 1.140625 c -0.207031 0.191406 -0.320312 0.457031 -0.320312 0.734375 v 0.5 c 0 0.128906 0.023438 0.253906 0.074219 0.371094 l 4.066406 6.238281 c 0.152344 0.378906 0.519531 0.625 0.929687 0.628906 l 2.234376 1.261719 l 2.046874 3.191406 c 0.144532 0.386719 0.40625 0.808594 0.824219 0.808594 h 0.824219 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -0.804688 l -1.257812 -3.351562 c -0.148438 -0.390626 -0.519531 -0.648438 -0.9375 -0.648438 h -3.324219 l -0.398437 -1 h 2.847656 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -3.648438 l -0.78125 -1.957031 c 0.847657 -0.253907 1.429688 -1.03125 1.429688 -1.917969 c 0 -1.105469 -0.894531 -2 -2 -2 c -0.015625 0 -0.03125 0 -0.046875 0 z m 0 0"/><path d="m 2.855469 6.671875 c -0.261719 0.246094 -0.5 0.519531 -0.707031 0.8125 l 1.398437 1.402344 c 0.179687 -0.320313 0.394531 -0.617188 0.660156 -0.859375 z m -1.273438 1.839844 c -0.164062 0.394531 -0.277343 0.8125 -0.339843 1.25 l 2.207031 2.203125 c -0.210938 -0.441406 -0.339844 -0.929688 -0.339844 -1.453125 c 0 -0.148438 0.027344 -0.289063 0.042969 -0.429688 z m -0.324219 2.851562 c 0.363282 2.234375 2.136719 4.007813 4.375 4.375 z m 7.710938 1.421875 c -0.246094 0.269532 -0.539062 0.484375 -0.855469 0.664063 l 1.371094 1.371093 c 0.289063 -0.210937 0.554687 -0.453124 0.796875 -0.722656 z m -3.9375 0.761719 l 2.199219 2.203125 c 0.4375 -0.066406 0.851562 -0.183594 1.238281 -0.351562 l -1.554688 -1.558594 c -0.144531 0.019531 -0.28125 0.042968 -0.429687 0.042968 c -0.523437 0 -1.015625 -0.125 -1.453125 -0.335937 z m 0 0"/></g></svg>
diff --git a/icons/Adwaita/wheelchair-limited.svg b/icons/Adwaita/wheelchair-limited.svg
new file mode 100644
index 0000000..134ce0a
--- /dev/null
+++ b/icons/Adwaita/wheelchair-limited.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -360 -60)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -360 -60)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -360 -60)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g><g fill="#222222"><path d="m 4.875 1 c -0.550781 0 -1 0.449219 -1 1 v 0.5 c 0 0.128906 0.023438 0.253906 0.074219 0.371094 l 3 7.5 c 0.148437 0.378906 0.515625 0.628906 0.925781 0.628906 h 3.304688 l 1.257812 3.351562 c 0.148438 0.390626 0.519531 0.648438 0.9375 0.648438 h 1.5 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -0.804688 l -1.257812 -3.351562 c -0.148438 -0.390626 -0.519531 -0.648438 -0.9375 -0.648438 h -3.324219 l -2.675781 -6.691406 v -0.308594 c 0 -0.550781 -0.449219 -1 -1 -1 z m 0 0"/><path d="m 8 2.125 c 0 1.105469 -0.894531 2 -2 2 s -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 s 2 0.894531 2 2 z m 0 0"/><path d="m 4.25 5.707031 c -1.808594 0.847657 -3.066406 2.683594 -3.066406 4.800781 c 0 2.917969 2.382812 5.304688 5.300781 5.304688 c 1.933594 0 3.582031 -1.066406 4.488281 -2.628906 l -0.488281 -1.226563 h -0.957031 c -0.539063 1.140625 -1.6875 1.925781 -3.042969 1.925781 c -1.875 0 -3.375 -1.5 -3.375 -3.375 c 0 -1.308593 0.742187 -2.421874 1.824219 -2.984374 z m 0 0" fill-opacity="0.34902"/><path d="m 7 6 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 h 4 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m 0 0"/></g></svg>
diff --git a/icons/Adwaita/wheelchair.svg b/icons/Adwaita/wheelchair.svg
index 54db37d..50fda74 100644
--- a/icons/Adwaita/wheelchair.svg
+++ b/icons/Adwaita/wheelchair.svg
@@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path d="m 8 0.0625 c -1.105469 0 -2 0.894531 -2 2 s 0.894531 2 2 2 s 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m -1 4.9375 s -1 0 -1 1 v 3 c 0 2 2 2 2 2 h 2 v -0.0625 h 0.371094 l 2.710937 4.515625 c 0.28125 0.472656 0.894531 0.625 1.367188 0.34375 c 0.476562 -0.285156 0.628906 -0.898437 0.34375 -1.375 l -3.289063 -5.484375 h -1.503906 v -0.9375 h 3 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -2.585938 l -0.707031 -0.707031 c -0.1875 -0.1875 -0.441406 -0.292969 -0.707031 -0.292969 z m -2 1.972656 c -1.613281 0.183594 -3.027344 1.21875 -3.65625 2.742188 c -0.699219 1.679687 -0.308594 3.621094 0.976562 4.90625 c 1.28125 1.28125 3.222657 1.671875 4.902344 0.972656 c 1.523438 -0.628906 2.558594 -2.042969 2.738282 -3.65625 h -2.015626 c -0.164062 0.804688 -0.710937 1.488281 -1.488281 1.8125 c -0.9375 0.386719 -2.007812 0.171875 -2.726562 -0.546875 c -0.714844 -0.714844 -0.929688 -1.785156 -0.542969 -2.722656 c 0.324219 -0.777344 1.007812 -1.324219 1.8125 -1.484375 z m 0 0"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="16px" viewBox="0 0 16 16" width="16px"><filter id="a" height="100%" width="100%" x="0%" y="0%"><feColorMatrix color-interpolation-filters="sRGB" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="b"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.5"/></g></mask><clipPath id="c"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="d"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.7"/></g></mask><clipPath id="e"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><mask id="f"><g filter="url(#a)"><path d="m -1.6 -1.6 h 19.2 v 19.2 h -19.2 z" fill-opacity="0.35"/></g></mask><clipPath id="g"><path d="m 0 0 h 1600 v 1200 h -1600 z"/></clipPath><g mask="url(#b)"><g clip-path="url(#c)" transform="matrix(1 0 0 1 -340 -60)"><path d="m 550 182 c -0.351562 0.003906 -0.695312 0.101562 -1 0.28125 v 3.4375 c 0.304688 0.179688 0.648438 0.277344 1 0.28125 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 c -0.339844 0 -0.679688 0.058594 -1 0.175781 v 6.824219 h 4 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#d)"><g clip-path="url(#e)" transform="matrix(1 0 0 1 -340 -60)"><path d="m 569 182 v 4 c 1.105469 0 2 -0.894531 2 -2 s -0.894531 -2 -2 -2 z m 0 5 v 7 h 3 v -4 c 0 -1.65625 -1.34375 -3 -3 -3 z m 0 0"/></g></g><g mask="url(#f)"><g clip-path="url(#g)" transform="matrix(1 0 0 1 -340 -60)"><path d="m 573 182.269531 v 3.449219 c 0.613281 -0.355469 0.996094 -1.007812 1 -1.71875 c 0 -0.714844 -0.382812 -1.375 -1 -1.730469 z m 0 4.90625 v 6.824219 h 2 v -4 c 0 -1.269531 -0.800781 -2.402344 -2 -2.824219 z m 0 0"/></g></g><g fill="#222222"><path d="m 4.875 1 c -0.550781 0 -1 0.449219 -1 1 v 0.5 c 0 0.128906 0.023438 0.253906 0.074219 0.371094 l 3 7.5 c 0.148437 0.378906 0.515625 0.628906 0.925781 0.628906 h 3.304688 l 1.257812 3.351562 c 0.148438 0.390626 0.519531 0.648438 0.9375 0.648438 h 1.5 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 h -0.804688 l -1.257812 -3.351562 c -0.148438 -0.390626 -0.519531 -0.648438 -0.9375 -0.648438 h -3.324219 l -2.675781 -6.691406 v -0.308594 c 0 -0.550781 -0.449219 -1 -1 -1 z m 0 0"/><path d="m 8 2.125 c 0 1.105469 -0.894531 2 -2 2 s -2 -0.894531 -2 -2 s 0.894531 -2 2 -2 s 2 0.894531 2 2 z m 0 0"/><path d="m 4.25 5.707031 c -1.808594 0.847657 -3.066406 2.683594 -3.066406 4.800781 c 0 2.917969 2.382812 5.304688 5.300781 5.304688 c 1.933594 0 3.582031 -1.066406 4.488281 -2.628906 l -0.488281 -1.226563 h -0.957031 c -0.539063 1.140625 -1.6875 1.925781 -3.042969 1.925781 c -1.875 0 -3.375 -1.5 -3.375 -3.375 c 0 -1.308593 0.742187 -2.421874 1.824219 -2.984374 z m 0 0"/><path d="m 7 6 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 h 4 c 0.550781 0 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m 0 0"/></g></svg>
diff --git a/little-lines-frontend.container.example b/little-lines-frontend.container.example
new file mode 100644
index 0000000..8b16586
--- /dev/null
+++ b/little-lines-frontend.container.example
@@ -0,0 +1,14 @@
+[Unit]
+Description=Little Lines frontend container
+
+[Container]
+ContainerName=little-lines-frontend
+Image=localhost/little-lines-frontend
+PublishPort=5173:5173
+Volume=/path/to/env:/opt/little-lines-frontend/.env
+
+[Service]
+Restart=always
+
+[Install]
+WantedBy=multi-user.target default.target
diff --git a/package-lock.json b/package-lock.json
index 46e9bfa..a8e9215 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,25 +8,28 @@
       "name": "micromobility-navigation",
       "version": "0.0.0",
       "dependencies": {
-        "axios": "^1.4.0",
-        "ol": "^7.4.0",
-        "ol-contextmenu": "^5.2.1",
+        "axios": "^1.6.2",
+        "dotenv": "^16.3.1",
+        "ol": "^9.1.0",
+        "ol-contextmenu": "^5.4.0",
         "ol-ext": "^4.0.10",
         "ol-geocoder": "^4.3.0",
         "vue": "^3.3.4",
         "vue-router": "^4.2.4",
-        "vue3-openlayers": "^1.0.0",
+        "vue3-google-login": "^2.0.25",
+        "vue3-google-oauth2": "^1.0.7",
+        "vue3-openlayers": "^6.3.0",
         "vuetify": "^3.3.8"
       },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^4.2.3",
-        "vite": "^4.4.0"
+        "@vitejs/plugin-vue": "^5.0.4",
+        "vite": "^5.2.6"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.22.14",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.14.tgz",
-      "integrity": "sha512-1KucTHgOvaw/LzCVrEOAyXkr9rQlp0A1HiHRYnSUE9dmb8PvPW7o5sscg+5169r54n3vGlbx6GevTE/Iw/P3AQ==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz",
+      "integrity": "sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -35,9 +38,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.11",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.11.tgz",
-      "integrity": "sha512-ee7jVNlWN09+KftVOu9n7S8gQzD/Z6hN/I8VBRXW4P1+Xe7kJGXMwu8vds4aGIMHZnNbdpSWCfZZtinytpcAvA==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -45,10 +48,26 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -62,9 +81,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
-      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -78,9 +97,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
-      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -94,9 +113,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
-      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -110,9 +129,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
-      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -126,9 +145,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
-      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -142,9 +161,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
-      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -158,9 +177,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
-      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -174,9 +193,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
-      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -190,9 +209,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
-      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -206,9 +225,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -222,9 +241,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
-      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -238,9 +257,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
-      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -254,9 +273,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
-      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -270,9 +289,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
-      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -286,9 +305,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
-      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -302,9 +321,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -318,9 +337,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
-      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -334,9 +353,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
-      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -350,9 +369,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
-      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -366,9 +385,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
-      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -382,9 +401,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
-      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -402,175 +421,396 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
       "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
-    "node_modules/@mapbox/jsonlint-lines-primitives": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@mapbox/mapbox-gl-style-spec": {
-      "version": "13.28.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.28.0.tgz",
-      "integrity": "sha512-B8xM7Fp1nh5kejfIl4SWeY0gtIeewbuRencqO3cJDrCHZpaPg7uY+V8abuR+esMeuOjRl5cLhVTP40v+1ywxbg==",
-      "dependencies": {
-        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/unitbezier": "^0.0.0",
-        "csscolorparser": "~1.0.2",
-        "json-stringify-pretty-compact": "^2.0.0",
-        "minimist": "^1.2.6",
-        "rw": "^1.3.3",
-        "sort-object": "^0.3.2"
-      },
-      "bin": {
-        "gl-style-composite": "bin/gl-style-composite.js",
-        "gl-style-format": "bin/gl-style-format.js",
-        "gl-style-migrate": "bin/gl-style-migrate.js",
-        "gl-style-validate": "bin/gl-style-validate.js"
-      }
-    },
-    "node_modules/@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
-    },
-    "node_modules/@mapbox/unitbezier": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
-      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA=="
-    },
     "node_modules/@petamoriken/float16": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.3.tgz",
-      "integrity": "sha512-an2OZ7/6er9Jja8EDUvU/tmtGIutdlb6LwXOwgjzoCjDRAsUd8sRZMBjoPEy78Xa9iOp+Kglk2CHgVwZuZbWbw=="
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.6.tgz",
+      "integrity": "sha512-GNJhABTtcmt9al/nqdJPycwFD46ww2+q2zwZzTjY0dFFwUAFRw9zszvEr9osyJRd9krRGy6hUDopWUg9fX7VVw=="
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.1.tgz",
+      "integrity": "sha512-4C4UERETjXpC4WpBXDbkgNVgHyWfG3B/NKY46e7w5H134UDOFqUJKpsLm0UYmuupW+aJmRgeScrDNfvZ5WV80A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.1.tgz",
+      "integrity": "sha512-TrTaFJ9pXgfXEiJKQ3yQRelpQFqgRzVR9it8DbeRzG0RX7mKUy0bqhCFsgevwXLJepQKTnLl95TnPGf9T9AMOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.1.tgz",
+      "integrity": "sha512-fz7jN6ahTI3cKzDO2otQuybts5cyu0feymg0bjvYCBrZQ8tSgE8pc0sSNEuGvifrQJWiwx9F05BowihmLxeQKw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.1.tgz",
+      "integrity": "sha512-WTvdz7SLMlJpektdrnWRUN9C0N2qNHwNbWpNo0a3Tod3gb9leX+yrYdCeB7VV36OtoyiPAivl7/xZ3G1z5h20g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.1.tgz",
+      "integrity": "sha512-dBHQl+7wZzBYcIF6o4k2XkAfwP2ks1mYW2q/Gzv9n39uDcDiAGDqEyml08OdY0BIct0yLSPkDTqn4i6czpBLLw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.1.tgz",
+      "integrity": "sha512-bur4JOxvYxfrAmocRJIW0SADs3QdEYK6TQ7dTNz6Z4/lySeu3Z1H/+tl0a4qDYv0bCdBpUYM0sYa/X+9ZqgfSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.1.tgz",
+      "integrity": "sha512-ssp77SjcDIUSoUyj7DU7/5iwM4ZEluY+N8umtCT9nBRs3u045t0KkW02LTyHouHDomnMXaXSZcCSr2bdMK63kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.1.tgz",
+      "integrity": "sha512-Jv1DkIvwEPAb+v25/Unrnnq9BO3F5cbFPT821n3S5litkz+O5NuXuNhqtPx5KtcwOTtaqkTsO+IVzJOsxd11aQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.13.1.tgz",
+      "integrity": "sha512-U564BrhEfaNChdATQaEODtquCC7Ez+8Hxz1h5MAdMYj0AqD0GA9rHCpElajb/sQcaFL6NXmHc5O+7FXpWMa73Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.1.tgz",
+      "integrity": "sha512-zGRDulLTeDemR8DFYyFIQ8kMP02xpUsX4IBikc7lwL9PrwR3gWmX2NopqiGlI2ZVWMl15qZeUjumTwpv18N7sQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.1.tgz",
+      "integrity": "sha512-VTk/MveyPdMFkYJJPCkYBw07KcTkGU2hLEyqYMsU4NjiOfzoaDTW9PWGRsNwiOA3qI0k/JQPjkl/4FCK1smskQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.1.tgz",
+      "integrity": "sha512-L+hX8Dtibb02r/OYCsp4sQQIi3ldZkFI0EUkMTDwRfFykXBPptoz/tuuGqEd3bThBSLRWPR6wsixDSgOx/U3Zw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.1.tgz",
+      "integrity": "sha512-+dI2jVPfM5A8zme8riEoNC7UKk0Lzc7jCj/U89cQIrOjrZTCWZl/+IXUeRT2rEZ5j25lnSA9G9H1Ob9azaF/KQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.1.tgz",
+      "integrity": "sha512-YY1Exxo2viZ/O2dMHuwQvimJ0SqvL+OAWQLLY6rvXavgQKjhQUzn7nc1Dd29gjB5Fqi00nrBWctJBOyfVMIVxw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@turf/bbox": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.5.0.tgz",
+      "integrity": "sha512-RBbLaao5hXTYyyg577iuMtDB8ehxMlUqHEJiMs8jT1GHkFhr6sYre3lmLsPeYEi/ZKj5TP5tt7fkzNdJ4GIVyw==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/buffer": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/buffer/-/buffer-6.5.0.tgz",
+      "integrity": "sha512-qeX4N6+PPWbKqp1AVkBVWFerGjMYMUyencwfnkCesoznU6qvfugFHNAngNqIBVnJjZ5n8IFyOf+akcxnrt9sNg==",
+      "dependencies": {
+        "@turf/bbox": "^6.5.0",
+        "@turf/center": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0",
+        "@turf/projection": "^6.5.0",
+        "d3-geo": "1.7.1",
+        "turf-jsts": "*"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/center": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/center/-/center-6.5.0.tgz",
+      "integrity": "sha512-T8KtMTfSATWcAX088rEDKjyvQCBkUsLnK/Txb6/8WUXIeOZyHu42G7MkdkHRoHtwieLdduDdmPLFyTdG5/e7ZQ==",
+      "dependencies": {
+        "@turf/bbox": "^6.5.0",
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clone": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
+      "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
+      "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==",
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/meta": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
+      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/projection": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/projection/-/projection-6.5.0.tgz",
+      "integrity": "sha512-/Pgh9mDvQWWu8HRxqpM+tKz8OzgauV+DiOcr3FCjD6ubDnrrmMJlsf6fFJmggw93mtVPrZRL6yyi9aYCQBOIvg==",
+      "dependencies": {
+        "@turf/clone": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
     },
     "node_modules/@types/raf": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.0.tgz",
-      "integrity": "sha512-taW5/WYqo36N7V39oYyHP9Ipfd5pNFvGTIQsNGj86xV88YQ7GnI30/yMfKDF7Zgin0m3e+ikX88FvImnK4RjGw==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
       "optional": true
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.4.tgz",
-      "integrity": "sha512-ciXNIHKPriERBisHFBvnTbfKa6r9SAesOYXeGDzgegcvy9Q4xdScSHAmKbNT0M3O0S9LKhIf5/G+UYG4NnnzYw==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
+      "integrity": "sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==",
       "dev": true,
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "vite": "^4.0.0",
+        "vite": "^5.0.0",
         "vue": "^3.2.25"
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz",
-      "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz",
+      "integrity": "sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==",
       "dependencies": {
-        "@babel/parser": "^7.21.3",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.9",
+        "@vue/shared": "3.4.21",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz",
-      "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz",
+      "integrity": "sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==",
       "dependencies": {
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-core": "3.4.21",
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz",
-      "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.21.tgz",
+      "integrity": "sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==",
       "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/reactivity-transform": "3.3.4",
-        "@vue/shared": "3.3.4",
+        "@babel/parser": "^7.23.9",
+        "@vue/compiler-core": "3.4.21",
+        "@vue/compiler-dom": "3.4.21",
+        "@vue/compiler-ssr": "3.4.21",
+        "@vue/shared": "3.4.21",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0",
-        "postcss": "^8.1.10",
+        "magic-string": "^0.30.7",
+        "postcss": "^8.4.35",
         "source-map-js": "^1.0.2"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz",
-      "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.21.tgz",
+      "integrity": "sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.21",
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.0.tgz",
-      "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz",
-      "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.21.tgz",
+      "integrity": "sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==",
       "dependencies": {
-        "@vue/shared": "3.3.4"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz",
-      "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==",
-      "dependencies": {
-        "@babel/parser": "^7.20.15",
-        "@vue/compiler-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.0"
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz",
-      "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.21.tgz",
+      "integrity": "sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==",
       "dependencies": {
-        "@vue/reactivity": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/reactivity": "3.4.21",
+        "@vue/shared": "3.4.21"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz",
-      "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.21.tgz",
+      "integrity": "sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==",
       "dependencies": {
-        "@vue/runtime-core": "3.3.4",
-        "@vue/shared": "3.3.4",
-        "csstype": "^3.1.1"
+        "@vue/runtime-core": "3.4.21",
+        "@vue/shared": "3.4.21",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz",
-      "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.21.tgz",
+      "integrity": "sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-ssr": "3.4.21",
+        "@vue/shared": "3.4.21"
       },
       "peerDependencies": {
-        "vue": "3.3.4"
+        "vue": "3.4.21"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz",
-      "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ=="
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
+      "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -589,11 +829,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.0.tgz",
-      "integrity": "sha512-D4DdjDo5CY50Qms0qGQTTw6Q44jl7zRwY7bthds06pUGfChBCTcQs+N743eFWGEd6pRTMd6A+I87aWyFV5wiZQ==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -643,6 +883,36 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "optional": true
     },
+    "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-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-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/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -655,9 +925,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.32.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.32.1.tgz",
-      "integrity": "sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==",
+      "version": "3.36.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.1.tgz",
+      "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==",
       "hasInstallScript": true,
       "optional": true,
       "funding": {
@@ -674,15 +944,23 @@
         "utrie": "^1.0.2"
       }
     },
-    "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/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/d3-array": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.4.tgz",
+      "integrity": "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="
+    },
+    "node_modules/d3-geo": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.7.1.tgz",
+      "integrity": "sha512-O4AempWAr+P5qbk2bC2FuN/sDW4z+dN2wDf9QV3bxQt4M5HfOEeXLgJ/UKQW0+o1Dj8BE+L5kiDbdWUMjsmQpw==",
+      "dependencies": {
+        "d3-array": "1"
+      }
     },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
@@ -693,20 +971,42 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.7.tgz",
-      "integrity": "sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==",
+      "version": "2.4.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.4.9.tgz",
+      "integrity": "sha512-iHtnxYMotKgOTvxIqq677JsKHvCOkAFqj9x8Mek2zdeHW1XjuFKwjpmZeMaXQRQ8AbJZDbcRz/+r1QhwvFtmQg==",
       "optional": true
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/earcut": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
       "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -716,28 +1016,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/estree-walker": {
@@ -756,9 +1057,9 @@
       "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -802,9 +1103,9 @@
       }
     },
     "node_modules/geotiff": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.7.tgz",
-      "integrity": "sha512-FKvFTNowMU5K6lHYY2f83d4lS2rsCNdpUC28AX61x9ZzzqPNaWFElWv93xj0eJFaNyOYA63ic5OzJ88dHpoA5Q==",
+      "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",
@@ -812,7 +1113,8 @@
         "parse-headers": "^2.0.2",
         "quick-lru": "^6.1.1",
         "web-worker": "^1.2.0",
-        "xml-utils": "^1.0.2"
+        "xml-utils": "^1.0.2",
+        "zstddec": "^0.1.0"
       },
       "engines": {
         "node": ">=10.19"
@@ -850,11 +1152,6 @@
         }
       ]
     },
-    "node_modules/json-stringify-pretty-compact": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
-      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ=="
-    },
     "node_modules/jspdf": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.1.tgz",
@@ -878,9 +1175,9 @@
       "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
     },
     "node_modules/magic-string": {
-      "version": "0.30.3",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
-      "integrity": "sha512-B7xGbll2fG/VjP+SWg4sX3JynwIU0mjoTc6MPpKNuIvftk6u6vqhDnk1R80b8C2GBR6ywqy+1DcKBrevBg+bmw==",
+      "version": "0.30.8",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz",
+      "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -888,11 +1185,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/mapbox-to-css-font": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.2.tgz",
-      "integrity": "sha512-f+NBjJJY4T3dHtlEz1wCG7YFlkODEjFIYlxDdLIDMNpkSksqTt+l/d4rjuwItxuzkuMFvPyrjzV2lxRM4ePcIA=="
-    },
     "node_modules/mgrs": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
@@ -917,18 +1209,10 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/minimist": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
-      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/nanoid": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
-      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
       "funding": [
         {
           "type": "github",
@@ -943,13 +1227,14 @@
       }
     },
     "node_modules/ol": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-7.5.2.tgz",
-      "integrity": "sha512-HJbb3CxXrksM6ct367LsP3N+uh+iBBMdP3DeGGipdV9YAYTP0vTJzqGnoqQ6C2IW4qf8krw9yuyQbc9fjOIaOQ==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-9.1.0.tgz",
+      "integrity": "sha512-nDrkJ2tzZNpo/wzN/PpHV5zdxbnXZaFktoMaD2cFLEc6gCwlgLY21Yd8wnt/4FjaVYwLBnbN9USXSwIBGcyksQ==",
       "dependencies": {
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
         "earcut": "^2.2.3",
         "geotiff": "^2.0.7",
-        "ol-mapbox-style": "^10.1.0",
         "pbf": "3.2.1",
         "rbush": "^3.0.1"
       },
@@ -959,44 +1244,34 @@
       }
     },
     "node_modules/ol-contextmenu": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/ol-contextmenu/-/ol-contextmenu-5.2.1.tgz",
-      "integrity": "sha512-By1ShS/BkzQjGoE3aBOzAc5CELSdymjqokwdBrGLC4C6UBmxD8pRVWGcqMZWfsNWNkk4bYYy/osNfFr3DOScVQ==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/ol-contextmenu/-/ol-contextmenu-5.4.0.tgz",
+      "integrity": "sha512-F2cIwCToMAYsddnrcRvCnWAH4bp9n9LNHrDTqU3mDJMiNUw1RB4Ovz5b2FwxasLpymtkzV8ME39u+mP3IvpT6g==",
       "dependencies": {
         "tiny-emitter": "^2.1.0"
       },
       "engines": {
-        "node": "^16 || ^18",
+        "node": ">=16",
         "npm": ">=8"
       },
       "peerDependencies": {
-        "ol": "^7.1.0"
+        "ol": "> 7.x <= 9.x"
       }
     },
     "node_modules/ol-ext": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.11.tgz",
-      "integrity": "sha512-zorUn71RsahiA/kbf+tRDbv19wqdLCclxd3gkjsFMnqCbdgl+P59CSJCqMO4O7b2bvaHrw5FEmep7FNFnGGQXg==",
+      "version": "4.0.17",
+      "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.17.tgz",
+      "integrity": "sha512-o3D+x7dzUIRyVDshmNceGgcNKX0N+Xf/vgQ1QwEIsBDeRJgraAeKtREGOPP0upnI8ldehoLMsCIiZgnsWxWAVw==",
       "peerDependencies": {
         "ol": ">= 5.3.0"
       }
     },
     "node_modules/ol-geocoder": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ol-geocoder/-/ol-geocoder-4.3.0.tgz",
-      "integrity": "sha512-CcuoebLrUiS5ejefd9y4F3eyw8aZhUE9NPHn8fcVuvM8PSh/lwhWrQE4XPRMGnuPDoh9CZEv5volUkqnx5h3Sg==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/ol-geocoder/-/ol-geocoder-4.3.3.tgz",
+      "integrity": "sha512-uCXygiNVldMNGgi7H0pLMMMnEey8Nlx/k3brq4knCnmtapC9P1lbel7NydMNGgdymUgm1jq4T5ENvIngTJW44A==",
       "peerDependencies": {
-        "ol": ">8.0.0"
-      }
-    },
-    "node_modules/ol-mapbox-style": {
-      "version": "10.7.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.7.0.tgz",
-      "integrity": "sha512-S/UdYBuOjrotcR95Iq9AejGYbifKeZE85D9VtH11ryJLQPTZXZSW1J5bIXcr4AlAH6tyjPPHTK34AdkwB32Myw==",
-      "dependencies": {
-        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1",
-        "ol": "^7.3.0"
+        "ol": ">=6.0.0"
       }
     },
     "node_modules/pako": {
@@ -1033,9 +1308,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/postcss": {
-      "version": "8.4.29",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.29.tgz",
-      "integrity": "sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -1051,21 +1326,21 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.6",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
       }
     },
     "node_modules/proj4": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.9.0.tgz",
-      "integrity": "sha512-BoDXEzCVnRJVZoOKA0QHTFtYoE8lUxtX1jST38DJ8U+v1ixY70Kpwi0Llu6YqSWEH2xqu4XMEBNGcgeRIEywoA==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.11.0.tgz",
+      "integrity": "sha512-SasuTkAx8HnWQHfIyhkdUNJorSJqINHAN3EyMWYiQRVorftz9DHz650YraFgczwgtHOxqnfuDxSNv3C8MUnHeg==",
       "dependencies": {
         "mgrs": "1.0.0",
-        "wkt-parser": "^1.3.1"
+        "wkt-parser": "^1.3.3"
       }
     },
     "node_modules/protocol-buffers-schema": {
@@ -1112,9 +1387,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/resolve-protobuf-schema": {
       "version": "2.1.0",
@@ -1134,66 +1409,50 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.28.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
-      "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
+      "version": "4.13.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.1.tgz",
+      "integrity": "sha512-hFi+fU132IvJ2ZuihN56dwgpltpmLZHZWsx27rMCTZ2sYwrqlgL5sECGy1eeV2lAihD8EzChBVVhsXci0wD4Tg==",
       "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
       "engines": {
-        "node": ">=14.18.0",
+        "node": ">=18.0.0",
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.13.1",
+        "@rollup/rollup-android-arm64": "4.13.1",
+        "@rollup/rollup-darwin-arm64": "4.13.1",
+        "@rollup/rollup-darwin-x64": "4.13.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.13.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.13.1",
+        "@rollup/rollup-linux-arm64-musl": "4.13.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.13.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.13.1",
+        "@rollup/rollup-linux-x64-gnu": "4.13.1",
+        "@rollup/rollup-linux-x64-musl": "4.13.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.13.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.13.1",
+        "@rollup/rollup-win32-x64-msvc": "4.13.1",
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
-    "node_modules/sort-asc": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
-      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-desc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
-      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-object": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
-      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
-      "dependencies": {
-        "sort-asc": "^0.1.0",
-        "sort-desc": "^0.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/stackblur-canvas": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.6.0.tgz",
-      "integrity": "sha512-8S1aIA+UoF6erJYnglGPug6MaHYGo1Ot7h5fuXx4fUPvcvQfcdw2o/ppCse63+eZf8PPidSu4v1JnmEVtEDnpg==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
       "optional": true,
       "engines": {
         "node": ">=0.1.14"
@@ -1222,6 +1481,11 @@
       "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
       "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
     },
+    "node_modules/turf-jsts": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/turf-jsts/-/turf-jsts-1.2.3.tgz",
+      "integrity": "sha512-Ja03QIJlPuHt4IQ2FfGex4F4JAr8m3jpaHbFbQrgwr7s7L6U8ocrHiF3J1+wf9jzhGKxvDeaCAnGDot8OjGFyA=="
+    },
     "node_modules/utrie": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
@@ -1232,29 +1496,29 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
-      "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
+      "integrity": "sha512-FPtnxFlSIKYjZ2eosBQamz4CbyrTizbZ3hnGJlh/wMtCrlp1Hah6AzBLjGI5I2urTfNnpovpHdrL6YRuBOPnCA==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.18.10",
-        "postcss": "^8.4.27",
-        "rollup": "^3.27.1"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.36",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^14.18.0 || >=16.0.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": ">= 14",
+        "@types/node": "^18.0.0 || >=20.0.0",
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
@@ -1287,23 +1551,31 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
-      "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==",
+      "version": "3.4.21",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
+      "integrity": "sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.3.4",
-        "@vue/compiler-sfc": "3.3.4",
-        "@vue/runtime-dom": "3.3.4",
-        "@vue/server-renderer": "3.3.4",
-        "@vue/shared": "3.3.4"
+        "@vue/compiler-dom": "3.4.21",
+        "@vue/compiler-sfc": "3.4.21",
+        "@vue/runtime-dom": "3.4.21",
+        "@vue/server-renderer": "3.4.21",
+        "@vue/shared": "3.4.21"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-router": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
-      "integrity": "sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
+      "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.0"
+        "@vue/devtools-api": "^6.5.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/posva"
@@ -1312,26 +1584,48 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-google-login": {
+      "version": "2.0.26",
+      "resolved": "https://registry.npmjs.org/vue3-google-login/-/vue3-google-login-2.0.26.tgz",
+      "integrity": "sha512-BuTSIeSjINNHNPs+BDF4COnjWvff27IfCBDxK6JPRqvm57lF8iK4B3+zcG8ud6BXfZdyuiDlxletbEDgg4/RFA==",
+      "peerDependencies": {
+        "vue": "^3.0.3"
+      }
+    },
+    "node_modules/vue3-google-oauth2": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/vue3-google-oauth2/-/vue3-google-oauth2-1.0.7.tgz",
+      "integrity": "sha512-XZv5+IVRLqKrsfm6DamD75e4LPynDt3xpmEw3SQBKfnUvpaIq6YuimOCPoXMfedR6nQHJeZkw62E/ii2disppA=="
+    },
     "node_modules/vue3-openlayers": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/vue3-openlayers/-/vue3-openlayers-1.2.1.tgz",
-      "integrity": "sha512-8Z+kzLn20E7JxI5To26IiBk9h4lZZ6TG9cBKEMJcFlGzAOd2cMVpOf+wXV8bVJqugwoPN+J2ojZt2mPG6FflMQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/vue3-openlayers/-/vue3-openlayers-6.3.0.tgz",
+      "integrity": "sha512-Son7NyWVRQRxGZ8J+t8S6LtLcShReUzsMNvPNI6Kv+sqhLvLGbBWNv2L4P6rIMLYAJB87f56wQR3HVt1JUrYIQ==",
       "dependencies": {
+        "@turf/buffer": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
         "file-saver": "^2.0.5",
         "jspdf": "^2.5.1",
-        "proj4": "^2.9.0"
+        "ol": "^9.0.0",
+        "ol-contextmenu": "^5.4.0",
+        "ol-ext": "^4.0.15",
+        "proj4": "^2.11.0",
+        "vue": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
       },
       "peerDependencies": {
-        "ol": "^7.4.0",
-        "ol-contextmenu": "^5.2.1",
-        "ol-ext": "^4.0.8",
+        "ol": "^9.0.0",
+        "ol-contextmenu": "^5.4.0",
+        "ol-ext": "^4.0.15",
         "vue": "^3.0.0"
       }
     },
     "node_modules/vuetify": {
-      "version": "3.3.15",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.15.tgz",
-      "integrity": "sha512-n7GYBO31k8vA9UfvRwLNyBlkq1WoN3IJ9wNnIBFeV4axleSjFAzzR4WUw7rgj6Ba3q6N2hxXoyxJM21tseQTfQ==",
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.12.tgz",
+      "integrity": "sha512-6Dv6hSQH4NpoIFSEn+GouexKZYMCgMhB1x/Bepp7vnDgnpy6xGj2OgNOp/eBTPiaNrsX9knMv310c2Y9FSEllw==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
@@ -1341,10 +1635,10 @@
       },
       "peerDependencies": {
         "typescript": ">=4.7",
-        "vite-plugin-vuetify": "^1.0.0-alpha.12",
-        "vue": "^3.2.0",
+        "vite-plugin-vuetify": ">=1.0.0",
+        "vue": "^3.3.0",
         "vue-i18n": "^9.0.0",
-        "webpack-plugin-vuetify": "^2.0.0-alpha.11"
+        "webpack-plugin-vuetify": ">=2.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -1362,9 +1656,9 @@
       }
     },
     "node_modules/web-worker": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
-      "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
     },
     "node_modules/wkt-parser": {
       "version": "1.3.3",
@@ -1372,9 +1666,14 @@
       "integrity": "sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw=="
     },
     "node_modules/xml-utils": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.7.0.tgz",
-      "integrity": "sha512-bWB489+RQQclC7A9OW8e5BzbT8Tu//jtAOvkYwewFr+Q9T9KDGvfzC1lp0pYPEQPEoPQLDkmxkepSC/2gIAZGw=="
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.8.0.tgz",
+      "integrity": "sha512-1TY5yLw8DApowZAUsWCniNr8HH6Ebt6O7UQvmIwziGKwUNsQx6e+4NkfOvCfnqmYIcPjCeoI6dh1JenPJ9a1hQ=="
+    },
+    "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/package.json b/package.json
index 5cddd15..2aeacc9 100644
--- a/package.json
+++ b/package.json
@@ -9,18 +9,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.4.0",
-    "ol": "^7.4.0",
-    "ol-contextmenu": "^5.2.1",
+    "axios": "^1.6.2",
+    "dotenv": "^16.3.1",
+    "ol": "^9.1.0",
+    "ol-contextmenu": "^5.4.0",
     "ol-ext": "^4.0.10",
     "ol-geocoder": "^4.3.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4",
-    "vue3-openlayers": "^1.0.0",
+    "vue3-google-login": "^2.0.25",
+    "vue3-google-oauth2": "^1.0.7",
+    "vue3-openlayers": "^6.3.0",
     "vuetify": "^3.3.8"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
-    "vite": "^4.4.0"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "vite": "^5.2.6"
   }
 }
diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index 53601d4..d3b8e9e 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -1,95 +1,432 @@
 <template>
-  <v-img 
-  class="image"
-  src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg" 
-  cover
-  ></v-img>
-  
   <v-card 
-  class="stick-bottom card-height"
+  class="stick-bottom card-height destination-card"
   width="100%"
-  height="60vh"
-  style="padding-top: 15px; font-weight:bold;"
-  :title="destination.title" 
-  :subtitle="destination.subTitle"
+  :height="cardHeight"
+  style="padding-top: 15px;"
   >
 
-    <v-list lines="one">
+  <div v-if="!showRoute">
+    <v-list>
+
+      <v-list-item>
+        <v-list-item-title class="title-text">{{nearestStructureData.display_name}}</v-list-item-title>
+      </v-list-item>
+      
       <v-list-item>
         <template v-slot:prepend>
           <v-avatar>
-            <img :src="detial[0].icon" 
-            class="iconCheck"
-            />
+            <img :src="wheelchairIcon" :class="wheelchairIconClass"/>
           </v-avatar>
         </template>
-        <v-list-item-title class="textCheck">{{detial[0].title}}</v-list-item-title>
-        <v-list-item-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">{{detial[0].subtitle}}</a></v-list-item-subtitle>
+        <v-list-item-title :class="wheelchairTextColorClass">{{ wheelchairAccessText }}</v-list-item-title>
+        <v-list-item-subtitle ><a href="https://wiki.openstreetmap.org/wiki/Key:wheelchair" class="knowMore">เรียนรู้เพิ่มเติม</a></v-list-item-subtitle>
       </v-list-item>
 
       <v-list-item>
         <template v-slot:prepend>
           <v-avatar>
-            <img :src="detial[1].icon" 
+            <img :src="findLocation" 
             class="icon"
             />
           </v-avatar>
         </template>
-        <v-list-item-title class="text-decoration-underline">{{detial[1].title}}</v-list-item-title>
+        <v-list-item-title class="text-decoration-underline">{{nearestStructureData.lon}} , {{nearestStructureData.lat}}</v-list-item-title>
       </v-list-item>
 
-      <v-list-item>
+      <!-- <v-list-item>
         <template v-slot:prepend>
           <v-avatar>
-            <img :src="detial[2].icon" 
+            <img :src="clock" 
             class="icon"
             />
           </v-avatar>
         </template>
-        <v-list-item-title>{{detial[2].title}}</v-list-item-title>
-      </v-list-item>
-
+        <v-list-item-title class="text-decoration-underline">{{nearestStructureData.infoWheelchair}}</v-list-item-title>
+      </v-list-item> -->
 
     </v-list>
 
     <v-card-actions class="stick-bottom btnlist-height justify-sa">
-      <v-btn rounded="xl" variant="tonal" width="45vw" height="44px">
+      <v-btn @click="addToFavorites" rounded="xl" variant="tonal" width="45vw" height="44px">
         เพิ่มลงในสถานที่โปรด</v-btn>
-      <v-btn rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+      <v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
         ดูเส้นทาง</v-btn>
     </v-card-actions>
 
-    <v-btn :to="{name: 'favorite'}" variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
+    
+  </div>
 
 
+  <div v-else>
+
+    <v-list-item class="d-flex justify-center">
+        <v-btn-toggle
+        class="btn-toggle"
+        mandatory
+        >
+          <v-btn class="btn"><v-icon class="icon-walk"></v-icon></v-btn>
+          <v-btn class="btn"><v-icon class="icon-wheelchair"></v-icon></v-btn>
+        </v-btn-toggle>
+      </v-list-item>
+
+      <v-list-item class="d-flex justify-center">
+            <v-toolbar
+            dense
+            floating
+            style="width: 90vw; background-color: transparent;"
+            >
+            <v-icon
+              style="
+              background-color: transparent;
+              border-radius: 10px;
+              width: 12vw;
+              height: 100%;
+              ">
+                <v-icon 
+              class="icon-flag"
+              style="background-color: transparent;"
+              >
+              </v-icon>
+
+              </v-icon>
+              
+            <v-text-field
+              hide-details
+              prepend-icon="mdi-magnify"
+              style="
+              
+              border-radius: 10px;
+              background-color: rgba(230, 230, 230, 1);
+              padding-left: 2vw;"
+              variant="invert-solo"
+              :model-value="formattedLocation"
+              flat
+            ></v-text-field>
+            <v-btn
+            hide-details
+            style="
+            background-color: rgba(230, 230, 230, 1);
+            margin-left: 2vw;
+            margin-right: 1vw;
+            border-radius: 10px;
+            height: 86%;"
+            flat
+            >
+              <v-icon class="icon-plus"></v-icon>
+            </v-btn>
+          </v-toolbar>
+      </v-list-item>
+
+      <v-list-item class="d-flex justify-center"
+      style="overflow-x:hidden"
+      >
+            <v-toolbar
+            dense
+            floating
+            style="
+            width: 90vw;
+            background-color: transparent;
+            flex-wrap: nowrap;
+            overflow-y: hidden;"
+            >
+
+              <v-icon
+              style="
+              background-color: transparent;
+              border-radius: 10px;
+              width: 12vw;
+              height: 100%;
+              ">
+                <v-icon 
+              class="icon-flag"
+              style="background-color: rgba(241, 99, 34, 1);"
+              >
+              </v-icon>
+
+              </v-icon>
+            <v-text-field
+              @click="viewPopup"
+              readonly
+              hide-details
+              prepend-icon="mdi-magnify"
+              style="
+              border-radius: 10px;
+              background-color: rgba(230, 230, 230, 1);
+              padding-left: 2vw;
+              "
+              variant="invert-solo"
+              flat
+              :model-value="nearestStructureData.display_name"
+              >
+            
+            </v-text-field>
+            <v-btn
+            hide-details
+            style="
+            background-color: rgba(230, 230, 230, 1);
+            margin-left: 2vw;
+            margin-right: 1vw;
+            border-radius: 10px;
+            height: 86%;
+            "
+            flat
+            >
+            
+              <v-icon class="icon-vertical-arrows"></v-icon>
+            </v-btn>
+          </v-toolbar>
+      </v-list-item>
+
+      <v-list-item class="d-flex justify-center">
+        <v-card-text>0 นาที</v-card-text>
+      </v-list-item>
+
+      <v-card-actions class="stick-bottom btnlist-height justify-sa">
+        <v-btn @click="viewPopup" rounded="xl" variant="tonal" width="45vw" height="44px">
+          ย้อนกลับ</v-btn>
+        <v-btn @click="enterRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+          เริ่มการนำทาง</v-btn>
+
+    </v-card-actions>
+  </div>
+
+  <v-btn 
+    @click="closePopup"
+    variant="tonal" icon="mdi-close" style="position: absolute; top: 15px; right: 15px;" />
+
   </v-card>
 </template>
   
 <script setup>
-import findLocation from '../../icons/Material/find-location.svg';
-import clock from '../../icons/Material/clock.svg';
-import check from '../../icons/Material/check-round.svg';
-const destination = {
-  title: "อนุสาวรีย์ชัยสมรภูมิ",
-  subTitle: "ราชเทวี , กรุงเทพมหานคร"
-}
-const detial = [
-  {
-    icon: check,
-    subtitle: 'เรียนรู้เพิ่มเติม',
-    title: 'Unrestricted Wheelchair access',
+import findLocation from '../../icons/Adwaita/find-location.svg';
+import clock from '../../icons/Adwaita/clock.svg';
+import check from '../../icons/Adwaita/check-round.svg';
+import cross from '../../icons/Adwaita/cross.svg';
+import wheelchair from '../../icons/Adwaita/wheelchair.svg'
+import wheelchairlimited from '../../icons/Adwaita/wheelchair-limited.svg'
+import nowheelchair from '../../icons/Adwaita/no-wheelchair.svg'
+
+
+// import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
+// const destination = {
+//   title: "อนุสาวรีย์ชัยสมรภูมิ",
+//   subTitle: "ราชเทวี , กรุงเทพมหานคร"
+// }
+// const detial = [
+//   {
+//     icon: check,
+//     subtitle: 'เรียนรู้เพิ่มเติม',
+//     title: 'Unrestricted Wheelchair access',
+//   },
+//   {
+//     icon: findLocation,
+//     subtitle: '',
+//     title: '13.76493, 100.53828',
+//   },
+//   {
+//     icon: clock,
+//     subtitle: '',
+//     title: 'Mo-Su 11:30-22:00',
+//   },
+// ]
+</script>
+
+<script>
+import axios from "axios";
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+    infoWheelchair: String
   },
-  {
-    icon: findLocation,
-    subtitle: '',
-    title: '13.76493, 100.53828',
+  data() {
+    return {
+      showPopup: true,
+      showRoute: false,
+      userLocation: null,
+      isLocationRequested: false,
+      
+    };
   },
-  {
-    icon: clock,
-    subtitle: '',
-    title: 'Mo-Su 11:30-22:00',
+  computed: {
+    cardHeight() {
+      return this.showRoute ? '45vh' : '50vh';
+    },
+    formattedLocation() {
+      if (this.isLocationRequested && !this.userLocation) {
+        return 'Requesting location...';
+      } else if (this.userLocation) {
+        return `${this.userLocation.lon.toFixed(6)}, ${this.userLocation.lat.toFixed(6)}`;
+      }
+      return 'Location not available';
+    },
+
+    //icon
+    wheelchairIcon() {
+      switch(this.nearestStructureData.infoWheelchair) {
+        case 'yes':
+          return wheelchair;
+        case 'limited':
+          return wheelchairlimited;
+        case 'no':
+          return nowheelchair;
+        default:
+          return cross;
+      }
+    },
+
+    //icon-color
+    wheelchairIconClass() {
+      // return this.nearestStructureData.infoWheelchair === 'limited' ? 'iconCheckLimited' : 'iconCheck';
+      switch(this.nearestStructureData.infoWheelchair) {
+        case 'yes':
+          return 'iconCheck';
+        case 'limited':
+          return 'iconCheckLimited';
+        case 'no':
+          return 'iconCheckNo';
+        default:
+          return 'iconCheckDefault';
+      }
+    },
+
+    //text
+    wheelchairAccessText() {
+      switch(this.nearestStructureData.infoWheelchair) {
+        case 'yes':
+          return 'วีลแชร์สามารถเข้าถึงได้';
+        case 'limited':
+          return 'วีลแชร์เข้าถึงได้อย่างจำกัด';
+        case 'no':
+          return 'วีลแชร์ไม่สามารถเข้าถึงได้';
+        default:
+          return 'ไม่มีข้อมูลว่าวีลแชร์สามารถเข้าถึงได้หรือไม่';
+      }
+    },
+
+    //text-color
+
+    wheelchairTextColorClass() {
+    switch(this.nearestStructureData.infoWheelchair) {
+      case 'yes':
+        return 'textColorYes';
+      case 'limited':
+        return 'textColorLimited';
+      case 'no':
+        return 'textColorNo';
+      default:
+        return 'textColorDefault';
+    }
+  }
   },
-]
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+
+      this.$emit('updateRouting', {route:null,isRouting:false});
+      this.isRouting = false;
+
+      this.onClose();
+    },
+    viewRoute() {
+      this.getUserLocation();
+      this.showRoute = true;
+    },
+    enterRoute() {
+      console.log('Entering Route!');
+      this.Routing();
+    },
+    getUserLocation() {
+      this.isLocationRequested = true;
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(this.setLocation, this.handleLocationError)
+      } else {
+        console.error("Geolocation is not supported by this browser.");
+      }
+    },
+    setLocation(position) {
+      this.userLocation = {
+        lat: position.coords.latitude,
+        lon: position.coords.longitude
+      };
+      console.log('User Location:', this.userLocation);
+    },
+    handleLocationError(error) {
+      console.error('Error getting location:', error);
+    },
+    viewPopup(){
+      this.showPopup = true;
+      this.showRoute = false;
+
+      this.$emit('updateRouting', {route:null,isRouting:false});
+      this.isRouting = false;
+    },
+    addToFavorites() {
+      const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
+
+      if (currentUser) {
+        console.log('Logged in. Proceed to add to favorites.');
+
+        fetch(`${import.meta.env.VITE_BACKEND_URL}/api/favorites/create`, {
+
+          method: "POST",
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            user_id: currentUser.id, // ใช้ userId ของผู้ใช้ที่ล็อกอินอยู่
+            place_name: this.nearestStructureData.display_name, 
+            location: {
+              type: "Point",
+              coordinates: [parseFloat(this.nearestStructureData.lon), parseFloat(this.nearestStructureData.lat)]
+            },
+            wheelchair_access: 'Accessible',
+            highway_type: 'Highway'
+          })
+        })
+          .then((res) => {
+            if (res.ok) {
+              console.log('Add to favorites success');
+              return res.json();
+            } else {
+              throw Error(`Add to favorites failed (${res.status})`);
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+      } else {
+        console.log('User not logged in. Unable to add to favorites.');
+        this.$router.push({ name: 'login' });
+      }
+    },
+    Routing(){
+      if(!this.isRouting){
+        console.log('Start routing!!');
+        console.log(`nearestStructureData : ${this.nearestStructureData.lon},${this.nearestStructureData.lat}`);
+        console.log(`userLocation : ${this.userLocation.lon},${this.userLocation.lat}`);
+        // Make a request to OpenRouteService API for a sample route
+        const apiKey = import.meta.env.VITE_OPENROUTESERVICE_API_KEY;
+        const startCoord = `${this.userLocation.lon},${this.userLocation.lat}`;//'100.53860,13.76410';
+        const endCoord = `${this.nearestStructureData.lon},${this.nearestStructureData.lat}`;//'100.53928,13.76526';
+
+        axios.get(`https://api.openrouteservice.org/v2/directions/wheelchair?api_key=${apiKey}&start=${startCoord}&end=${endCoord}`)
+          .then(response => {
+            const route = response.data.features[0].geometry.coordinates;
+            console.log('This is route :',{route:route})
+            this.$emit('updateRouting', {route:route,isRouting:true});
+            this.isRouting = true;
+          })
+          .catch(error => {
+            alert(`Can't routing`)
+            console.error('Error fetching route:', error);
+          });
+      }
+    },
+  },
+  
+};
 </script>
 
 <style>
@@ -129,5 +466,120 @@ const detial = [
   width: 100%;
   height: 45vh;
 }
+
+.title-text
+{
+  color: rgba(0, 0, 0, 1);
+  font-style: normal;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.sutitle-text{
+  color: rgba(155, 155, 155, 1);
+  font-style: normal;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.2;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+.icon-walk {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/walk.svg) no-repeat center;
+  mask: url(icons/Adwaita/walk.svg) no-repeat center;
+}
+.icon-wheelchair {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/wheelchair.svg) no-repeat center;
+  mask: url(icons/Adwaita/wheelchair.svg) no-repeat center;
+}
+.icon-plus {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/plus.svg) no-repeat center;
+  mask: url(icons/Adwaita/plus.svg) no-repeat center;
+}
+.icon-vertical-arrows {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/vertical-arrows.svg) no-repeat center;
+  mask: url(icons/Adwaita/vertical-arrows.svg) no-repeat center;
+}
+.icon-flag {
+  background-color: #000000;
+  -webkit-mask: url(icons/Adwaita/flag.svg) no-repeat center;
+  mask: url(icons/Adwaita/flag.svg) no-repeat center;
+}
+
+
+.btn-toggle
+{
+  border-radius: 10px;
+  background-color: rgba(230, 230, 230, 1);
+}
+
+.btn-toggle .btn
+{
+  border-radius: 0px;
+  background-color: rgba(230, 230, 230, 1);
+}
+
+.destination-card .v-input__control
+{
+  
+  max-height: 6vh;
+  max-width: 50vw;
+}
+
+.destination-card .v-field__input
+{
+  padding: 0;
+}
+
+.iconCheckYes {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
+} 
+
+.iconCheckLimited {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
+}
+
+.iconCheckDefault {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
+}
+
+.iconCheckNo {
+  width: 30px;
+  height: 30px;
+  filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(5539%) hue-rotate(326deg) brightness(86%) contrast(109%);
+}
+
+.textColorLimited {
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
+}
+
+.textColorNo {
+  filter: brightness(0) saturate(100%) invert(25%) sepia(20%) saturate(5539%) hue-rotate(326deg) brightness(86%) contrast(109%);
+}
+
+.textColorDefault {
+  filter: brightness(0) saturate(100%) invert(59%) sepia(84%) saturate(813%) hue-rotate(5deg) brightness(99%) contrast(92%);
+}
+
+.textColorYes {
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(380%) hue-rotate(100deg) brightness(98%) contrast(87%);
+}
+
 </style>
   
\ No newline at end of file
diff --git a/src/components/NavigationMapCard.vue b/src/components/NavigationMapCard.vue
new file mode 100644
index 0000000..860c01c
--- /dev/null
+++ b/src/components/NavigationMapCard.vue
@@ -0,0 +1,38 @@
+<template>
+    <v-card 
+  class="stick-bottom card-height"
+  width="100%"
+  height="60vh"
+  style="padding-top: 15px; font-weight:bold;"
+  :title="nearestStructureData.display_name" 
+  :subtitle="destination.subTitle"
+  >
+
+    </v-card>
+
+</template>
+
+<script>
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+
+    viewRoute() {
+      this.$emit('changeComponent', { userLocation: this.userLocation, destination: this.destination });
+    },
+
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/Popup.vue b/src/components/Popup.vue
index c6b3cab..ee92c4e 100644
--- a/src/components/Popup.vue
+++ b/src/components/Popup.vue
@@ -8,6 +8,9 @@
 </template>
 
 <script>
+
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
+
 export default {
   props: {
     nearestStructureData: Object,
diff --git a/src/iconsets/adwaita.ts b/src/iconsets/adwaita.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.js b/src/main.js
index 04197e6..e945fa1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import '@/style.css'
 
+
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
@@ -12,10 +13,11 @@ import OpenLayersMap from "vue3-openlayers";
 
 import App from '@/App.vue'
 import router from '@/plugins/router'
+import vue3GoogleLogin from 'vue3-google-login'
 
 const vuetify = createVuetify({
     components,
     directives,
   })
 
-createApp(App).use(router).use(vuetify).use(OpenLayersMap).mount('#app')
\ No newline at end of file
+createApp(App).use(router).use(vuetify).use(OpenLayersMap).use(vue3GoogleLogin,{ clientId: import.meta.env.VITE_CLIENT_ID }).mount('#app')
\ No newline at end of file
diff --git a/src/views/About.vue b/src/views/About.vue
index 1bed2cd..3d9475a 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,32 +1,88 @@
 <template>
 
-    <v-sheet class="d-flex justify-center">
+    <v-sheet class="d-flex justify-center align-center">
+    
 
         <v-sheet class="ma-2 pa-4 mb-auto">
 
-            <v-row class="ma-2" justify="centered">
+            <v-sheet style="display: flex; align-items: center;justify-content: center;">
 
-            <v-img cover src="../../icons/LittleLines.svg"></v-img>
-            </v-row>
+                <img src="../../icons/LittleLines.svg">
+                
+            </v-sheet>
 
-            <v-list-item
-            center
-                class="text-black"
-                title="Little Lines"
-                subtitle="openKMITL Community"
+            <p class="text-center text-h4 font-weight-black">Little Lines</p>
+
+            <p class="text-center">TechTransThai Community</p>
+
+
+            <v-sheet style="display: flex; align-items: center;justify-content: center;">
+              <a class="versionbutton">2024.06.0</a>
+            </v-sheet>
             
-            >
-            
-            </v-list-item>
-            <a class="versionbutton">DATE-VERSION</a>
+        
+            <v-list class = "ma-2" density="compact" max-width="420px" min-width="200px" width="95vw">
+                <v-list-item 
+                    v-for="(item, i) in sourcecode_items"
+                    :key="i"
+                    :value="item"
+                    :href="'https://forge.techtransthai.org/little-lines'"
+                >
+                <template v-slot:append>
+                <!-- <v-icon :icon="item.icon"></v-icon> -->
+                <img src="../../icons/Adwaita/right.svg">
+                </template>
+                    <v-list-item-title v-text="item.text"></v-list-item-title>
+                </v-list-item>
+            </v-list>
 
+            <v-list class = "ma-2" density="compact">
+                <v-list-subheader>รายงานปัญหาและข้อเสนอแนะ</v-list-subheader>
+
+                <v-list-item
+                    v-for="(item, i) in report_items"
+                    :key="i"
+                    :value="item"
+                    :href="item.link"
+                >
+                <template v-slot:append>
+                <!-- <v-icon :icon="item.icon"></v-icon> -->
+                <img src="../../icons/Adwaita/right.svg">
+                </template>
+
+                    <v-list-item-title v-text="item.text"></v-list-item-title>
+                </v-list-item>
+            </v-list>
         </v-sheet>
+
+        
+        
     </v-sheet>
 
 </template>
 
 <script setup>
 
+import { getTopRight } from 'ol/extent';
+import {RouterLink} from 'vue-router';
+
+  const sourcecode_items = [
+    { text: 'ซอร์สโค้ด',
+    icon: 'mdi-chevron-right',}
+  ]
+
+  const report_items = [
+    { text: 'Discord',
+    icon: 'mdi-chevron-right',
+    link: 'https://discord.gg/3tRdRE3tGv'},
+    { text: 'Facebook',
+    icon: 'mdi-chevron-right',
+    link: 'https://www.facebook.com'},
+    { text: 'Google Forms',
+    icon: 'mdi-chevron-right',
+    link: 'https://forms.google.com'},
+  ]
+
 </script>
 
 <style>
@@ -45,6 +101,11 @@
   padding-left: 15px;
   margin-top: 10px;
   margin-bottom: 10px;
+  width: 200px;
+}
+
+.text-h4 {
+  font-family: Cantarell, sans-serif !important;
 }
 
 </style>
\ No newline at end of file
diff --git a/src/views/Favorite.vue b/src/views/Favorite.vue
index 1d457d7..9ddbd0b 100644
--- a/src/views/Favorite.vue
+++ b/src/views/Favorite.vue
@@ -1,79 +1,83 @@
 <template>
-    <!-- <h1>Favorite</h1> -->
+    <v-card
+    class="mx-auto fav-card">
 
-    <!-- <v-card
-    class="mx-auto"
-    max-width="420"
-    height="600"
-    >
-
-    <v-list lines="two">
+      <v-list lines="two">
         <v-list-item
-            v-for="item in items"
-            :key="item.title"
-            :title="item.title"
-            :subtitle="item.desc"
-            :prepend-avatar="pin_svg"
-        ></v-list-item>
-    </v-list>
+          v-for="(favorite, index) in favorite"
+          :key="index"
+          @click="handleClick(favorite)"
+          >
 
-    </v-card> -->
+        <template v-slot:prepend>
+              <v-icon class="icon-pin"></v-icon>
+          </template>
 
-    <v-card fluid 
-    class="mx-auto"
-    max-width="500px"
-    width="90vw"
-
-    max-height="600px"
-    height="90vh"
-    >
-        <v-list
-        item-props
-        lines="three"
-        >
-        <v-list-item
-            v-for="(item, i) in items"
-            :to="{name: 'destination-info'}"
-            :key="i"
-            :value="item"
-            
-            >
-            <template v-slot:prepend>
-                <v-avatar>
-                    <v-img
-                    :height="30"
-                    src= "./icons/Adwaita/pin.svg"
-                    ></v-img>
-                </v-avatar>
-                
-            </template>
-
-            <v-list-item-title v-text="item.title"></v-list-item-title>
-            <v-list-item-subtitle v-text="item.desc"></v-list-item-subtitle>
-            <v-divider></v-divider>
+          <v-list-item-content>
+            <v-list-item-title>{{ favorite.place_name }}</v-list-item-title>
+          </v-list-item-content>
         </v-list-item>
-        </v-list>
-    </v-card>
+      </v-list>
 
-    
+    </v-card>
 </template>
 
-<script setup>
-    import {RouterLink} from 'vue-router';
+<script>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 
-    const pin_svg = "./icons/Adwaita/pin.svg"
-    const items = [
-        {
-        title: 'หอพักนักศึกษา',
-        desc: 'ลาดกระบัง, กรุงเทพมหานคร',
-        },
-        {
-        title: 'อนุสาวรีย์ชัยสมรภูมิ',
-        desc: 'ราชเทวี, กรุงเทพมหานคร',
-        },
-  ]
+export default {
+  setup() {
+    const favorite = ref([]);
+    const router = useRouter();
+    
+    const handleClick = (favoriteItem) => {
+      console.log('Clicked:', favoriteItem);
+      router.push({ name: 'home', params: { favoriteLocation: favoriteItem } });
+
+    };
+
+    onMounted(async () => {
+      try {
+        const currentUser = JSON.parse(sessionStorage.getItem('current_user'));
+
+        if (currentUser && currentUser.id) {
+          const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/favorites/${currentUser.id}`);
+
+          if (!response.ok) {
+            throw new Error('Failed to fetch favorites');
+          }
+
+          const data = await response.json();
+          favorite.value = data;
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    });
+
+    return {
+      favorite,
+      handleClick
+    };
+  }
+};
 </script>
 
-<style >
+<style>
+.icon-pin{
+  background-color: black;
+  -webkit-mask: url(icons/Adwaita/pin.svg) no-repeat center;
+  mask: url(icons/Adwaita/pin.svg) no-repeat center;
 
-</style>
\ No newline at end of file
+}
+
+.fav-card
+{
+  margin-top: 2vh;
+  max-width: 90vw;
+  border-radius: 12px;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.13);
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 27f4625..4e62571 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,12 +1,18 @@
 <template>
 
 <div id="app">
-    <router-view />
-    <Popup
+    <router-view
+    class="router-view"
+    />
+
+    <DestinationInfoCard
+    class="DestinationInfoCard"
       v-if="popupData"
       :nearestStructureData="popupData"
       :onClose="closePopup"
+      @updateRouting="handleRouting"
     />
+    
   </div>
   
   <!-- <searchbar/> -->
@@ -14,32 +20,45 @@
         <v-app-bar scroll-threshold="0"
             class="mx-auto px-auto"
             >
-            <v-text-field
-              v-model="searchQuery"
-              @keyup.enter="performSearch"
-              @input="performSearch"
-              density="compact"
-              variant="solo"
-              prepend-inner-icon="mdi-magnify"
-              single-line
-              hide-details
-            ></v-text-field>
-            <v-btn icon>
+            
+            <div class="flex-grow-1">
+                <v-text-field
+                  v-model="searchQuery"
+                  @keyup.enter="performSearch"
+                  @input="performSearch"
+                  @click="toggleSearchBar()"
+                  density="compact"
+                  variant="solo"
+                  prepend-inner-icon="mdi-magnify"
+                  single-line
+                  hide-details
+                  
+                ></v-text-field>
+            </div>
+
+            <v-btn icon @click="showSearchBar = !showSearchBar">
                 <v-icon>mdi-crosshairs-gps</v-icon>
             </v-btn>
+
         </v-app-bar>
         
       </v-layout>
 
-      <div v-if="searchResults.length > 0" class="search-results">
-              <ul>
-                <li v-for="result in searchResults" :key="result.place_id" @click="moveToLocation(result)">
-                  {{ result.display_name }}
-                </li>
-              </ul>
-            </div>
+      <v-list v-if="searchResults.length > 0 && !showSearchBar" class="search-results">
+        <v-list-item
+          v-for="result in searchResults"
+          :key="result.place_id"
+          @click="moveToLocation(result),toggleSearchBar()"
+        >
+          <v-list-item-icon>
+            <v-icon>mdi-map-marker</v-icon>
+          </v-list-item-icon>
+          {{ result.display_name }}
+        </v-list-item>
+      </v-list>
+
   <!-- <map/> -->
-    <ol-map
+  <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
     style=
@@ -61,6 +80,33 @@
     <ol-tile-layer>
       <ol-source-osm />
     </ol-tile-layer>
+
+    <ol-vector-layer v-if="isRouting">
+      <ol-source-vector>
+        <!-- Line String Geometry -->
+        <ol-feature>
+          <ol-geom-line-string :coordinates="route"></ol-geom-line-string>
+        </ol-feature>
+
+        <!-- Multi Point Geometry -->
+        <ol-feature>
+          <ol-geom-multi-point :coordinates="[
+            [route[0][0],route[0][1]],
+            [route[route.length-1][0],route[route.length-1][1]]
+          ]"></ol-geom-multi-point>
+        </ol-feature>
+      </ol-source-vector>
+
+      <!-- Style for the Line and Points -->
+      <ol-style>
+        <!-- Style for Line -->
+        <ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
+
+        <!-- Style for Points -->
+        <ol-style-icon :src="startMarker" :scale="0.1" :anchor="[0.5, 1]"></ol-style-icon>
+      </ol-style>
+    </ol-vector-layer>
+
   </ol-map>
 
 </template>
@@ -68,11 +114,12 @@
 
 
 <script setup>
-
-import searchbar from '@/components/searchbar.vue';
-import Popup from "@/components/Popup.vue"; // Import the Popup componen
 import { ref } from "vue";
 import axios from "axios";
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
+
+import startMarker from '../../assets/map-marker-symbolic.png';
+import stopMarker from '../../assets/flag-filled-symbolic.png';
 
 const center = ref([100.538611, 13.764722]);
 const projection = ref("EPSG:4326");
@@ -81,17 +128,27 @@ const rotation = ref(0);
 
 const popupData = ref(null);
 
+const isRouting = ref(false);
+const route = ref(null);
+const infoWheelchair = ref(null)
+const strokeWidth = ref(5);
+const strokeColor = ref("red");
+
 //search
 const searchQuery = ref("");
 const searchResults = ref([]);
+const showSearchBar = ref(false);
+
+const toggleSearchBar = () => {
+  showSearchBar.value = !showSearchBar.value;
+};
 
 const moveToLocation = (result) => {
-  // Extract latitude and longitude from the selected result
   const lat = parseFloat(result.lat);
   const lon = parseFloat(result.lon);
-
-  // Update the center coordinates to move the camera to the selected location
   center.value = [lon, lat];
+  showSearchBar.value = false;
+  popupData.value = result; 
 };
 
 const performSearch = async () => {
@@ -100,26 +157,56 @@ const performSearch = async () => {
       `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`
     );
 
-    // Process the search results and limit to, let's say, 5 results
     searchResults.value = response.data.slice(0, 5);
   } catch (error) {
     console.error("Error fetching search results:", error);
   }
 };
 
-
 //Show API
 const handleMapClick = async event => {
   const clickedCoordinate = event.coordinate;
+  const overpassQuery = `[out:json];
+(
+  node(around:10,${clickedCoordinate[1]},${clickedCoordinate[0]})["wheelchair"];
+  way(around:10,${clickedCoordinate[1]},${clickedCoordinate[0]})["wheelchair"];
+  relation(around:10,${clickedCoordinate[1]},${clickedCoordinate[0]})["wheelchair"];
+);
+out;`;
+  const overpassUrl = 'https://overpass-api.de/api/interpreter';
+
+  axios.post(overpassUrl, `data=${encodeURIComponent(overpassQuery)}`, {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  }).then(response => {
+    // Process the data returned by the Overpass API
+    response.data.elements.forEach(element => {
+      if (element.tags && element.tags.wheelchair) {
+        console.log(`wheelchair: ${element.tags.wheelchair}`);
+        const wheelchairValues = element.tags.wheelchair;
+        infoWheelchair.value = wheelchairValues;
+      }
+    })
+  }).catch(error => {
+    console.error('Error fetching data from Overpass API:', error);
+  });
 
   try {
     const response = await axios.get(
       `https://nominatim.openstreetmap.org/reverse?format=json&lat=${clickedCoordinate[1]}&lon=${clickedCoordinate[0]}`
     );
 
-    const nearestStructureData = response.data;
-    popupData.value = nearestStructureData; // Show popup
+    let nearestStructureData = response.data;
 
+    nearestStructureData = {
+      ...nearestStructureData,
+      infoWheelchair: infoWheelchair
+    }
+    //infoWheelchair can null,yes,no
+    popupData.value = nearestStructureData; // Show popup
+    
+    // console.log(nearestStructureData)
   } catch (error) {
     console.error("Error fetching reverse geocoding data:", error);
   }
@@ -129,6 +216,14 @@ const closePopup = () => {
   popupData.value = null; // Hide popup
 };
 
+const handleRouting = (res) => {
+  console.log("Received Route:", res);
+  route.value = res.route;
+  isRouting.value = res.isRouting;
+};
+
+
+
 </script>
 
 <style>
@@ -166,4 +261,12 @@ const closePopup = () => {
 .search-results li:hover {
   background-color: #f0f0f0;
 }
+
+.router-view{
+  z-index: -15;
+}
+
+.DestinationInfoCard{
+  z-index: 15;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index dc7363e..2a83e0c 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -3,31 +3,82 @@
   <v-app>
     <top-bar :show-back-icon="true" :page-title="pageTitle" />  
     <v-main>
-      <v-container>
-        <v-form name="login-form">
-          <div class="mb-3">
-            <label for="username">Username: </label>
-            <input type="text" id="username" v-model="input.username" />
-          </div>
-          <div class="mb-3">
-            <label for="password">Password: </label>
-            <input type="password" id="password" v-model="input.password" />
-          </div>
-          
-        </v-form>
-      </v-container>
+      <div class="text-center mt-8 mb-16">
+            <div class="text-h4 font-weight-bold">
+              ยินดีต้อนรับกลับสู่
+              <div>Little Lines</div>
+            </div>
+      </div>
+
+      <div class="mx-5">
+          <v-text-field 
+            class="email" 
+            v-model="input.email" 
+            label="อีเมล" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+            </template>
+          </v-text-field>
+
+          <v-text-field 
+            class="password" 
+            v-model="input.password" 
+            label="รหัสผ่าน" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+                <img
+                  class="iconEyeNotLooking"
+                  :src="eyeNotLooking"
+                >
+            </template>
+          </v-text-field>
+        </div>   
       
-            <v-btn @click.prevent="login">ลงชื่อเข้าใช้</v-btn>
-            <v-btn :to="{name: 'register'}">ฉันต้องการสมัครสมาชิก</v-btn>
+        <v-contaioner>
+            <v-row class="button">
+              <v-btn @click.prevent="login" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+              ลงชื่อเข้าใช้</v-btn>
+            </v-row>
+            <v-row class="button">
+              <v-btn @click.prevent="loginGoogle" class="text-none" rounded="xl" variant="tonal" width="45vw" height="44px">
+                ลงชื่อเข้าใช้ด้วย Google</v-btn>
+            </v-row>
+            <v-row class="button">
+              <v-btn :to="{name: 'register'}" rounded="xl" variant="tonal" width="45vw" height="44px">
+                ฉันต้องการสมัครสมาชิก</v-btn>
+            </v-row>
+        </v-contaioner>
+        
+        
        
     </v-main>
   </v-app>
 
 </template>
 
+<script setup>
+import edit from '../../icons/Material/edit.svg';
+import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
+</script>
+
 <script>
 import {RouterLink} from 'vue-router';
 import TopBar from '@/components/TopBar.vue';
+import { VContainer } from 'vuetify/lib/components/index.mjs';
+
+import { googleSdkLoaded } from "vue3-google-login";
+import axios from 'axios'
+
 
 export default {
   components: {
@@ -38,20 +89,107 @@ export default {
     return {
       pageTitle: 'ลงชื่อเข้าใช้',
       input: {
-        username: '',
+        email: '',
         password: ''
       }
     };
   },
   methods: {
     login() {
-      if (this.input.username !== '' || this.input.password !== '') {
+      if (this.input.email !== '' && this.input.password !== '') {
         console.log('Authenticated: Checking with Backend');
+        fetch(`${import.meta.env.VITE_BACKEND_URL}/api/users/login`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            email: this.input.email,
+            password: this.input.password,
+          }),
+        })
+          .then((res) => {
+            if (res.ok) {
+              return res.json();
+            } else {
+              throw Error(`Login failed (${res.status})`);
+            }
+          })
+          .then((data) => {
+
+            console.log(data.success);
+            sessionStorage.setItem('current_user', JSON.stringify({id:data.user._id,username:data.user.username,email:data.user.email}));
+
+            this.$router.push({ name: 'home' });
+          })
+          .catch((err) => {
+            console.log(err);
+            // Handle the error, e.g., display an error message to the user
+          });
       } else {
-        console.log('Username and Password cannot be empty');
+        console.log('Email and Password cannot be empty');
+      }
+    },
+
+    loginGoogle(){
+      googleSdkLoaded(google => {
+        google.accounts.oauth2
+          .initCodeClient({
+            client_id:
+              import.meta.env.VITE_CLIENT_ID,
+            scope: "email profile openid",
+            redirect_uri: `${import.meta.env.VITE_BACKEND_URL}/api/users/googleAuth/callback`,
+            callback: response => {
+              if (response.code) {
+                this.sendCodeToBackend(response.code);
+              }
+            }
+          })
+          .requestCode();
+      });
+    },
+    async sendCodeToBackend(code) {
+      try {
+        const headers = {
+          Authorization: code
+        };
+        const response = await axios.post(`${import.meta.env.VITE_BACKEND_URL}/api/users/googleAuth`, null, { headers });
+        const userDetails = response.data;
+        console.log("User Details:", userDetails);
+        this.userDetails = userDetails;
+
+        sessionStorage.setItem('current_user', JSON.stringify({id:userDetails.user._id}));
+        this.$router.push({ name: 'home' });
+
+        // Redirect to the homepage ("/")
+        // this.$router.push({ name: 'home' });
+      } catch (error) {
+        console.error("Failed to send authorization code:", error);
       }
     }
   }
 };
-
 </script>
+
+<style>
+.username {
+  margin-bottom: -21px;
+}
+.iconEdit, .iconEyeNotLooking {
+  width: 25px;
+  height: 25px;
+}
+.iconEdit {
+  margin-right: 10px;
+}
+.iconEyeNotLooking {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+.button {
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+</style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 9ce0491..944b976 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -3,32 +3,90 @@
     <v-app>
       <top-bar :show-back-icon="true" :page-title="pageTitle" />  
       <v-main>
-        <v-container>
-          <v-form name="register-form">
-            <div class="mb-3">
-              <label for="username">Username: </label>
-              <input type="text" id="username" v-model="input.username" />
-            </div>
-            <div class="mb-3">
-              <label for="password">Password: </label>
-              <input type="password" id="password" v-model="input.password" />
-            </div>
-            <div class="mb-3">
-              <label for="password">Password Confirmation: </label>
-              <input type="password" id="passwordConfirm" v-model="input.passwordConfirm" />
-            </div>
-            
-          </v-form>
-        </v-container>
         
-              <v-btn @click.prevent="login">สมัครสมาชิค</v-btn>
+          <div class="text-center mt-8 mb-16">
+            <div class="text-h4">
+              <div class="font-weight-bold">Little Lines</div>
+            </div>
+            <div>ระบบนำทางสำหรับ Micromobility</div>
+          </div>
          
+        <div class="mx-5">
+          <v-text-field 
+            class="email" 
+            v-model="input.email" 
+            label="อีเมล" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+            </template>
+          </v-text-field>
+
+          <v-text-field 
+            class="password" 
+            v-model="input.password" 
+            label="รหัสผ่าน" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+                <img
+                  class="iconEyeNotLooking"
+                  :src="eyeNotLooking"
+                >
+            </template>
+          </v-text-field>
+
+          <v-text-field 
+            class="passwordC" 
+            v-model="input.passwordConfirm" 
+            label="ยืนยันรหัสผ่าน" 
+            variant="solo"
+          >
+            <template v-slot:append-inner>
+                <img
+                  class="iconEdit"
+                  :src="edit"
+                >
+                <img
+                  class="iconEyeNotLooking"
+                  :src="eyeNotLooking"
+                >
+            </template>
+          </v-text-field>
+        </div>        
+        
+        <v-checkbox color="#F16322" class="check">
+          <template v-slot:label>
+            <div>ฉันได้อ่านและยอมรับ</div>
+            <a href="https://www.google.co.th/?hl=th" >นโยบายความเป็นส่วนตัว</a>
+          </template>
+        </v-checkbox>
+        
+        <div class="button-register">
+          <v-btn @click.prevent="register" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+          สมัครสมาชิก</v-btn>
+        </div>
+        
+        
       </v-main>
     </v-app>
   
   </template>
-  
-  <script>
+
+<script setup>
+import edit from '../../icons/Material/edit.svg';
+import eyeNotLooking from '../../icons/Material/eye-not-looking.svg';
+</script>
+
+<script>
   import TopBar from '@/components/TopBar.vue';
   
   export default {
@@ -38,24 +96,84 @@
     name: 'register',
     data() {
       return {
-        pageTitle: 'สมัครสมาชิค', 
+        pageTitle: 'สมัครสมาชิก', 
         input: {
-          username: '',
+          email: '',
           password: '',
           passwordConfirm:''
         }
       };
     },
     methods: {
-      login() {
-        if (this.input.username !== '' || this.input.password !== '') {
+      register() {
+        if (this.input.username !== '' && ((this.input.password !='') && (this.input.password == this.input.passwordConfirm))) {
           console.log('Authenticated: Checking with Backend');
+          fetch(`${import.meta.env.VITE_BACKEND_URL}/api/users/create`, {
+            method: "POST",
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              username: "temp",
+              password: this.input.password,
+              email: this.input.email,
+              isGoogleAccount: false
+            })
+            })
+            .then((res) => {
+              if(res.ok){
+                return res.json()
+              }
+              else{
+                return res.json().then(data => {throw Error(`${data.registerStatus}`) });
+              }
+            })
+            .then((data) => {
+              console.log(data.registerStatus)
+              this.$router.push({name : 'login'})
+            })
+            .catch((err) =>{
+              console.log(err)
+            })
+            console.log("fisnished fetch");
         } else {
-          console.log('Username and Password cannot be empty');
+          console.log('Email and Password cannot be empty');
         }
       }
-    }
+    },
   };
-  
-  </script>
+</script>
+
+<style>
+.user {
+  background-color: aqua;
+}
+.email, .password {
+  margin-bottom: -21px;
+}
+.check {
+  display: flex;
+  justify-content:center;
+  padding-top: 5%;
+  padding-bottom: 5%;
+}
+.button-register {
+  margin: 0;
+  position: absolute;
+  left: 50%;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+.iconEdit, .iconEyeNotLooking {
+  width: 25px;
+  height: 25px;
+}
+.iconEdit {
+  margin-right: 10px;
+}
+.iconEyeNotLooking {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+</style>
   
\ No newline at end of file
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index a652aa6..d3bfe6a 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -1,12 +1,12 @@
 <template>
 <v-app>
     <v-container class="d-flex justify-center align-center">
-        <div>
+        <div v-if="!currentUser">
             <h1>ยังไม่ได้ลงชื่อเข้าใช้</h1>
         <h2>ลงชื่อเข้าใช้เพื่อบันทึกการตั้งค่าอย่างปลอดภัย</h2>
       <v-container class="d-flex justify-center align-center">
         <v-btn class="ma-2" width="150" :to="{name: 'login'}">ลงชื่อเข้าใช้</v-btn>
-        <v-btn class="ma-2" width="150" :to="{name: 'register'}">สมัครสมาชิค</v-btn>
+        <v-btn class="ma-2" width="150" :to="{name: 'register'}">สมัครสมาชิก</v-btn>
       </v-container>
         </div>
     </v-container>
@@ -55,7 +55,7 @@
                 </v-list-item>
             </v-list>
 
-            <v-btn class = "ma-2 mt-3" width="100%"
+            <v-btn @click.prevent="logout" class = "ma-2 mt-3" width="100%"
             color="red">
                 ลงชื่อออก
             </v-btn>
@@ -69,6 +69,10 @@
 <script setup>
 
 import {RouterLink} from 'vue-router';
+import { VContainer } from 'vuetify/lib/components/index.mjs';
+import router from '@/plugins/router'
+
+const currentUser = sessionStorage.getItem('current_user');
 
 const account_items = [
     { text: 'ตั้งค่าบัญชี',
@@ -90,5 +94,18 @@ const display_items = [
     icon: 'mdi-chevron-right',}
   ]
 
+  function logout() {
+      if (sessionStorage.getItem('current_user')){
+        console.log('loging out...');
+        fetch(`${import.meta.env.VITE_BACKEND_URL}/api/users/logout`, {
+          method: "GET"
+        }).then(()=>{
+          console.log('loged out');
+          sessionStorage.removeItem('current_user');
+          router.push({ name: 'home' });
+        })
+      }
+    }
 
 </script>
+