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 01042ab..f3a8674 100644
--- a/README.md
+++ b/README.md
@@ -1,99 +1,48 @@
-# Little Lines
 
-Quick setup via Podman/Docker
+<div align="center">
+  <img src="icons/LittleLines.svg" width="192" height="192" alt="Logo">
+  <h1>Little Lines</h1>
+
+  <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>
+    <img alt="Service Status" src="https://status.techtransthai.org/api/badge/7/status">
+  </a>
+
+ 
+
+
+
+  <h3>ระบบนำทางสำหรับล้อขนาดเล็ก</h3>
+
+  <a href="https://little-lines.techtransthai.org">เข้าใช้งานเว็บแอป</a>
+  &nbsp;•&nbsp;
+  <a href="https://www.techtransthai.org/webapps/little-lines/">โฮมเพจ</a>
+
+  <h5>ร่วมพูดคุยกับเรา:</h5>
+  <a href="https://t.me/techtransthai">
+    <img alt="Telegram" src="https://img.shields.io/badge/Telegram-TechTransThai Community-blue">
+  </a>
+</div>
+
+## Little Lines คืออะไร
+
+Littles Lines คือระบบนำทางสำหรับล้อขนาดเล็ก ไม่ว่าจะเป็นวีลแชร์ กระเป๋าเดินทาง รถเข็นเด็ก นอกจากนี้ยังสามารถใช้นำทางสำหรับการเดินเท้าไปยังที่ต่าง ๆ ได้อีกด้วย โดยเว็บแอปที่ เขียนด้วย Vue นี้จะนำข้อมูลจาก OpenStreetMap มาใช้ในการคำนวณเส้นทางและแสดงผลให้ผู้ใช้ต่อไป
+
+## การมีส่วนร่วมกับโปรเจกต์
+
+คุณสามารถสนับสนุนโปรเจกต์นี้ได้ผ่านหลากหลายช่องทาง ไม่ว่าจะเป็น
+- นำเสนอไอเดีย หรือส่ง Feedback ใน Discord ของเรา
+- เพิ่มข้อมูลที่จำเป็นสำหรับการนำทางลงในแพลตฟอร์ม OpenStreetMap
+- ร่วมพัฒนาตัวเว็บแอป Little Lines เอง
+
+## การติดตั้ง
+
+สำหรับการพัฒนาด้วย NPM
 
 ```
-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
-```
-
-## Getting started
-
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
-
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin https://gitlab.com/openKMITL/wheelchair-navigation.git
-git branch -M main
-git push -uf origin main
-```
-
-## Integrate with your tools
-
-- [ ] [Set up project integrations](https://gitlab.com/openKMITL/wheelchair-navigation/-/settings/integrations)
-
-## Collaborate with your team
-
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
-
-## Test and Deploy
-
-Use the built-in continuous integration in GitLab.
-
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
-
-***
-
-# Editing this README
-
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
-
-## Suggestions for a good README
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+$ git clone https://gitlab.com/little-lines/frontend.git
+$ cd little-lines
+$ npm i
+$ npm run dev
+```
\ 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/assets/openKMITL-Community.png b/assets/openKMITL-Community.png
new file mode 100644
index 0000000..cb640b8
Binary files /dev/null and b/assets/openKMITL-Community.png differ
diff --git a/assets/ttt-org-wide-grey.svg b/assets/ttt-org-wide-grey.svg
new file mode 100644
index 0000000..2b63738
--- /dev/null
+++ b/assets/ttt-org-wide-grey.svg
@@ -0,0 +1,187 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="161.22487mm"
+   height="27.516666mm"
+   viewBox="0 0 161.22487 27.516666"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
+   sodipodi:docname="ttt-org-wide-grey.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.0141844"
+     inkscape:cx="160.22727"
+     inkscape:cy="224.31818"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1"><rect
+       x="179.41219"
+       y="53.603985"
+       width="394.91403"
+       height="68.973473"
+       id="rect4" /><linearGradient
+       id="b"
+       gradientUnits="userSpaceOnUse"
+       x1="12"
+       x2="112.04102"
+       y1="60"
+       y2="80.988281"><stop
+         offset="0"
+         stop-color="#77767b"
+         id="stop7" /><stop
+         offset="0.384443"
+         stop-color="#9a9996"
+         id="stop8" /><stop
+         offset="0.720567"
+         stop-color="#77767b"
+         id="stop9" /><stop
+         offset="1"
+         stop-color="#68666f"
+         id="stop10" /></linearGradient><linearGradient
+       id="a"
+       gradientUnits="userSpaceOnUse"
+       x1="11.999989"
+       x2="115.99999"
+       y1="64"
+       y2="64"><stop
+         offset="0"
+         stop-color="#3d3846"
+         id="stop1" /><stop
+         offset="0.05"
+         stop-color="#77767b"
+         id="stop2" /><stop
+         offset="0.1"
+         stop-color="#5e5c64"
+         id="stop3" /><stop
+         offset="0.899999"
+         stop-color="#504e56"
+         id="stop4" /><stop
+         offset="0.95"
+         stop-color="#77767b"
+         id="stop5" /><stop
+         offset="1"
+         stop-color="#3d3846"
+         id="stop6" /></linearGradient><linearGradient
+       inkscape:collect="always"
+       xlink:href="#a"
+       id="linearGradient3"
+       gradientUnits="userSpaceOnUse"
+       x1="11.999989"
+       y1="64"
+       x2="115.99999"
+       y2="64"
+       gradientTransform="translate(-362.40368,-507.32441)" /><linearGradient
+       inkscape:collect="always"
+       xlink:href="#b"
+       id="linearGradient4"
+       gradientUnits="userSpaceOnUse"
+       x1="12"
+       y1="60"
+       x2="112.04102"
+       y2="80.988281"
+       gradientTransform="translate(-362.40368,-507.32441)" /></defs><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-7.0803835,-7.5681382)"><image
+       width="21.681797"
+       height="21.681797"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,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&#10;"
+       id="image1"
+       x="146.62346"
+       y="10.485573" /><g
+       id="g1"
+       transform="matrix(0.26458333,0,0,0.26458333,99.791356,138.62272)"><path
+         d="m -342.40368,-485.32441 h 88 c 4.41797,0 8,3.58204 8,8 v 78 c 0,4.41797 -3.58203,8 -8,8 h -88 c -4.41797,0 -8,-3.58203 -8,-8 v -78 c 0,-4.41796 3.58203,-8 8,-8 z m 0,0"
+         fill="url(#a)"
+         id="path10-9"
+         style="fill:url(#linearGradient3)" /><path
+         d="m -342.40368,-495.32441 h 88 c 4.41797,0 8,3.58204 8,8 v 80 c 0,4.41797 -3.58203,8 -8,8 h -88 c -4.41797,0 -8,-3.58203 -8,-8 v -80 c 0,-4.41796 3.58203,-8 8,-8 z m 0,0"
+         fill="url(#b)"
+         id="path11-3"
+         style="fill:url(#linearGradient4)" /><path
+         d="m -342.40368,-493.32441 h 88 c 3.3125,0 6,2.6875 6,6 v 80 c 0,3.3125 -2.6875,6 -6,6 h -88 c -3.3125,0 -6,-2.6875 -6,-6 v -80 c 0,-3.3125 2.6875,-6 6,-6 z m 0,0"
+         fill="#241f31"
+         id="path12" /><g
+         id="g14-3"
+         transform="translate(-359.40368,-510.70056)"
+         style="fill:#ffffff;fill-opacity:1"><rect
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:14.6656;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+           id="rect14-5"
+           width="36"
+           height="12"
+           x="47"
+           y="44.376148"
+           ry="2.4000001" /><rect
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:16.9343;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+           id="rect14-3-6"
+           width="12"
+           height="48"
+           x="59"
+           y="44.376148"
+           ry="2.4000001" /></g><g
+         id="g14"
+         transform="translate(-363.40368,-514.70056)"
+         style="fill:#f5a9b8;fill-opacity:1"><rect
+           style="fill:#f5a9b8;fill-opacity:1;fill-rule:evenodd;stroke-width:14.6656;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+           id="rect14"
+           width="36"
+           height="12"
+           x="47"
+           y="44.376148"
+           ry="2.4000001" /><rect
+           style="fill:#f5a9b8;fill-opacity:1;fill-rule:evenodd;stroke-width:16.9343;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+           id="rect14-3"
+           width="12"
+           height="48"
+           x="59"
+           y="44.376148"
+           ry="2.4000001" /></g><g
+         id="g14-2"
+         transform="translate(-367.40368,-518.70056)"
+         style="fill:#5bcefa;fill-opacity:1"><rect
+           style="fill:#5bcefa;fill-opacity:1;fill-rule:evenodd;stroke-width:14.6656;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+           id="rect14-9"
+           width="36"
+           height="12"
+           x="47"
+           y="44.376148"
+           ry="2.4000001" /><rect
+           style="fill:#5bcefa;fill-opacity:1;fill-rule:evenodd;stroke-width:16.9343;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers"
+           id="rect14-3-1"
+           width="12"
+           height="48"
+           x="59"
+           y="44.376148"
+           ry="2.4000001" /></g></g><text
+       xml:space="preserve"
+       transform="matrix(0.26458333,0,0,0.26458333,-8.4155109,-1.6547557)"
+       id="text4"
+       style="font-size:56px;font-family:Bebas;-inkscape-font-specification:Bebas;text-align:center;white-space:pre;shape-inside:url(#rect4);fill:#505050;fill-rule:evenodd;stroke-width:12.2213;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1"
+       x="-180.03996"
+       y="0"><tspan
+         x="187.78519"
+         y="107.27018"
+         id="tspan4"><tspan
+           style="font-weight:bold;font-family:Cantarell;-inkscape-font-specification:'Cantarell Bold'"
+           id="tspan3">TechTransThai</tspan></tspan></text></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 83d3ff1..a8e9215 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,24 +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.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.7.tgz",
-      "integrity": "sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==",
+      "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"
       },
@@ -34,20 +38,36 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
+      "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.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "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.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.13.tgz",
-      "integrity": "sha512-KwqFhxRFMKZINHzCqf8eKxE0XqWlAVPRxwy6rc7CbVFxzUWB2sA/s3hbMZeemPdhN3fKBkqOaFhTbS8xJXYIWQ==",
+      "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"
       ],
@@ -61,9 +81,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.13.tgz",
-      "integrity": "sha512-j7NhycJUoUAG5kAzGf4fPWfd17N6SM3o1X6MlXVqfHvs2buFraCJzos9vbeWjLxOyBKHyPOnuCuipbhvbYtTAg==",
+      "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"
       ],
@@ -77,9 +97,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.13.tgz",
-      "integrity": "sha512-M2eZkRxR6WnWfVELHmv6MUoHbOqnzoTVSIxgtsyhm/NsgmL+uTmag/VVzdXvmahak1I6sOb1K/2movco5ikDJg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -93,9 +113,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.13.tgz",
-      "integrity": "sha512-f5goG30YgR1GU+fxtaBRdSW3SBG9pZW834Mmhxa6terzcboz7P2R0k4lDxlkP7NYRIIdBbWp+VgwQbmMH4yV7w==",
+      "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"
       ],
@@ -109,9 +129,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.13.tgz",
-      "integrity": "sha512-RIrxoKH5Eo+yE5BtaAIMZaiKutPhZjw+j0OCh8WdvKEKJQteacq0myZvBDLU+hOzQOZWJeDnuQ2xgSScKf1Ovw==",
+      "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"
       ],
@@ -125,9 +145,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.13.tgz",
-      "integrity": "sha512-AfRPhHWmj9jGyLgW/2FkYERKmYR+IjYxf2rtSLmhOrPGFh0KCETFzSjx/JX/HJnvIqHt/DRQD/KAaVsUKoI3Xg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -141,9 +161,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.13.tgz",
-      "integrity": "sha512-pGzWWZJBInhIgdEwzn8VHUBang8UvFKsvjDkeJ2oyY5gZtAM6BaxK0QLCuZY+qoj/nx/lIaItH425rm/hloETA==",
+      "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"
       ],
@@ -157,9 +177,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.13.tgz",
-      "integrity": "sha512-4iMxLRMCxGyk7lEvkkvrxw4aJeC93YIIrfbBlUJ062kilUUnAiMb81eEkVvCVoh3ON283ans7+OQkuy1uHW+Hw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -173,9 +193,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.13.tgz",
-      "integrity": "sha512-hCzZbVJEHV7QM77fHPv2qgBcWxgglGFGCxk6KfQx6PsVIdi1u09X7IvgE9QKqm38OpkzaAkPnnPqwRsltvLkIQ==",
+      "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"
       ],
@@ -189,9 +209,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.13.tgz",
-      "integrity": "sha512-I3OKGbynl3AAIO6onXNrup/ttToE6Rv2XYfFgLK/wnr2J+1g+7k4asLrE+n7VMhaqX+BUnyWkCu27rl+62Adug==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -205,9 +225,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.13.tgz",
-      "integrity": "sha512-8pcKDApAsKc6WW51ZEVidSGwGbebYw2qKnO1VyD8xd6JN0RN6EUXfhXmDk9Vc4/U3Y4AoFTexQewQDJGsBXBpg==",
+      "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"
       ],
@@ -221,9 +241,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.13.tgz",
-      "integrity": "sha512-6GU+J1PLiVqWx8yoCK4Z0GnfKyCGIH5L2KQipxOtbNPBs+qNDcMJr9euxnyJ6FkRPyMwaSkjejzPSISD9hb+gg==",
+      "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"
       ],
@@ -237,9 +257,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.13.tgz",
-      "integrity": "sha512-pfn/OGZ8tyR8YCV7MlLl5hAit2cmS+j/ZZg9DdH0uxdCoJpV7+5DbuXrR+es4ayRVKIcfS9TTMCs60vqQDmh+w==",
+      "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"
       ],
@@ -253,9 +273,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.13.tgz",
-      "integrity": "sha512-aIbhU3LPg0lOSCfVeGHbmGYIqOtW6+yzO+Nfv57YblEK01oj0mFMtvDJlOaeAZ6z0FZ9D13oahi5aIl9JFphGg==",
+      "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"
       ],
@@ -269,9 +289,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.13.tgz",
-      "integrity": "sha512-Pct1QwF2sp+5LVi4Iu5Y+6JsGaV2Z2vm4O9Dd7XZ5tKYxEHjFtb140fiMcl5HM1iuv6xXO8O1Vrb1iJxHlv8UA==",
+      "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"
       ],
@@ -285,9 +305,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.13.tgz",
-      "integrity": "sha512-zTrIP0KzYP7O0+3ZnmzvUKgGtUvf4+piY8PIO3V8/GfmVd3ZyHJGz7Ht0np3P1wz+I8qJ4rjwJKqqEAbIEPngA==",
+      "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"
       ],
@@ -301,9 +321,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.13.tgz",
-      "integrity": "sha512-I6zs10TZeaHDYoGxENuksxE1sxqZpCp+agYeW039yqFwh3MgVvdmXL5NMveImOC6AtpLvE4xG5ujVic4NWFIDQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -317,9 +337,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.13.tgz",
-      "integrity": "sha512-W5C5nczhrt1y1xPG5bV+0M12p2vetOGlvs43LH8SopQ3z2AseIROu09VgRqydx5qFN7y9qCbpgHLx0kb0TcW7g==",
+      "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"
       ],
@@ -333,9 +353,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.13.tgz",
-      "integrity": "sha512-X/xzuw4Hzpo/yq3YsfBbIsipNgmsm8mE/QeWbdGdTTeZ77fjxI2K0KP3AlhZ6gU3zKTw1bKoZTuKLnqcJ537qw==",
+      "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"
       ],
@@ -349,9 +369,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.13.tgz",
-      "integrity": "sha512-4CGYdRQT/ILd+yLLE5i4VApMPfGE0RPc/wFQhlluDQCK09+b4JDbxzzjpgQqTPrdnP7r5KUtGVGZYclYiPuHrw==",
+      "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"
       ],
@@ -365,9 +385,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.13.tgz",
-      "integrity": "sha512-D+wKZaRhQI+MUGMH+DbEr4owC2D7XnF+uyGiZk38QbgzLcofFqIOwFs7ELmIeU45CQgfHNy9Q+LKW3cE8g37Kg==",
+      "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"
       ],
@@ -381,9 +401,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.18.13",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.13.tgz",
-      "integrity": "sha512-iVl6lehAfJS+VmpF3exKpNQ8b0eucf5VWfzR8S7xFve64NBNz2jPUgx1X93/kfnkfgP737O+i1k54SVQS7uVZA==",
+      "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"
       ],
@@ -401,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.1",
-      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.1.tgz",
-      "integrity": "sha512-oj3dU9kuMy8AqrreIboVh3KCJGSQO5T+dJ8JQFl369961jTWvPLP1GIlLy0FVoWehXLoI9BXygu/yzuNiIHBlg=="
+      "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.2.3",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.2.3.tgz",
-      "integrity": "sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==",
+      "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",
@@ -588,11 +829,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
-      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "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"
       }
@@ -636,6 +877,42 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/canvg/node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "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",
@@ -648,9 +925,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.31.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz",
-      "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==",
+      "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": {
@@ -667,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",
@@ -686,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.13",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.13.tgz",
-      "integrity": "sha512-vhg/WR/Oiu4oUIkVhmfcc23G6/zWuEQKFS+yiosSHe4aN6+DQRXIfeloYGibIfVhkr4wyfuVsGNLr+sQU1rWWw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -709,28 +1016,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.13",
-        "@esbuild/android-arm64": "0.18.13",
-        "@esbuild/android-x64": "0.18.13",
-        "@esbuild/darwin-arm64": "0.18.13",
-        "@esbuild/darwin-x64": "0.18.13",
-        "@esbuild/freebsd-arm64": "0.18.13",
-        "@esbuild/freebsd-x64": "0.18.13",
-        "@esbuild/linux-arm": "0.18.13",
-        "@esbuild/linux-arm64": "0.18.13",
-        "@esbuild/linux-ia32": "0.18.13",
-        "@esbuild/linux-loong64": "0.18.13",
-        "@esbuild/linux-mips64el": "0.18.13",
-        "@esbuild/linux-ppc64": "0.18.13",
-        "@esbuild/linux-riscv64": "0.18.13",
-        "@esbuild/linux-s390x": "0.18.13",
-        "@esbuild/linux-x64": "0.18.13",
-        "@esbuild/netbsd-x64": "0.18.13",
-        "@esbuild/openbsd-x64": "0.18.13",
-        "@esbuild/sunos-x64": "0.18.13",
-        "@esbuild/win32-arm64": "0.18.13",
-        "@esbuild/win32-ia32": "0.18.13",
-        "@esbuild/win32-x64": "0.18.13"
+        "@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": {
@@ -749,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",
@@ -781,9 +1089,9 @@
       }
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "dev": true,
       "hasInstallScript": true,
       "optional": true,
@@ -795,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",
@@ -805,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"
@@ -843,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",
@@ -871,9 +1175,9 @@
       "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
     },
     "node_modules/magic-string": {
-      "version": "0.30.1",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
-      "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
+      "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"
       },
@@ -881,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",
@@ -910,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",
@@ -936,13 +1227,14 @@
       }
     },
     "node_modules/ol": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-7.4.0.tgz",
-      "integrity": "sha512-bgBbiah694HhC0jt8ptEFNRXwgO8d6xWH3G97PCg4bmn9Li5nLLbi59oSrvqUI6VPVwonPQF1YcqJymxxyMC6A==",
+      "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"
       },
@@ -952,36 +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.10",
-      "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.10.tgz",
-      "integrity": "sha512-T+A0S2gR6rEWEVz3X8IZruiKp5C/WtkKgi69k6Jt9LBQsJnVR1FL0RpQ530HJEebZvnWR95/RjDBYVCFIjbGXA==",
+      "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-mapbox-style": {
-      "version": "10.6.0",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-10.6.0.tgz",
-      "integrity": "sha512-s86QhCoyyKVRsYkvPzzdWd///bhYh3onWrBq4lNXnCd9G/hS6AoK023kn4zlDESVlTBDTWLz8vhOistp0M3TXA==",
-      "dependencies": {
-        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
-        "mapbox-to-css-font": "^2.4.1",
-        "ol": "^7.3.0"
+    "node_modules/ol-geocoder": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/ol-geocoder/-/ol-geocoder-4.3.3.tgz",
+      "integrity": "sha512-uCXygiNVldMNGgi7H0pLMMMnEey8Nlx/k3brq4knCnmtapC9P1lbel7NydMNGgdymUgm1jq4T5ENvIngTJW44A==",
+      "peerDependencies": {
+        "ol": ">=6.0.0"
       }
     },
     "node_modules/pako": {
@@ -1018,9 +1308,9 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/postcss": {
-      "version": "8.4.26",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-      "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "funding": [
         {
           "type": "opencollective",
@@ -1036,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": {
@@ -1064,9 +1354,9 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
     "node_modules/quick-lru": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.1.tgz",
-      "integrity": "sha512-S27GBT+F0NTRiehtbrgaSE1idUAJ5bX8dPAQTdylEyNlrdcH5X4Lz7Edz3DYzecbsCluD5zO8ZNEe04z3D3u6Q==",
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
+      "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
       "engines": {
         "node": ">=12"
       },
@@ -1097,9 +1387,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "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",
@@ -1119,66 +1409,50 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.26.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.2.tgz",
-      "integrity": "sha512-6umBIGVz93er97pMgQO08LuH3m6PUb3jlDUUGFsNJB6VgTCUaDFpupf5JfU30529m/UKOgmiX+uY6Sx8cOYpLA==",
+      "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"
@@ -1207,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",
@@ -1217,29 +1496,29 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.4.tgz",
-      "integrity": "sha512-4mvsTxjkveWrKDJI70QmelfVqTm+ihFAb6+xf4sjEU2TmUCTlVX87tmg/QooPEMQb/lM9qGHT99ebqPziEd3wg==",
+      "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.25",
-        "rollup": "^3.25.2"
+        "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": "*",
@@ -1272,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"
@@ -1297,25 +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.0.0",
-      "resolved": "https://registry.npmjs.org/vue3-openlayers/-/vue3-openlayers-1.0.0.tgz",
-      "integrity": "sha512-7UNxjbNKsVXjtJYbuaHYsH+cGEbKvopT3U9nTkId0jSy3ZzlSKnWH2wp4Kbv45MF2xjFG5QClVSy/3gtUb2ZVg==",
+      "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.8",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.3.8.tgz",
-      "integrity": "sha512-m88MUczIeyNXfINnklBhat2fRknOUmeWyxgGTOZI5b95j9JTZwPH0b1z979nS6gJIyhPDVTuZSS/abp5aUyGBA==",
+      "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"
       },
@@ -1325,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": {
@@ -1346,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",
@@ -1356,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 0179f19..2aeacc9 100644
--- a/package.json
+++ b/package.json
@@ -9,17 +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/BottomNavigation.vue b/src/components/BottomNavigation.vue
index 55436fb..a520b1d 100644
--- a/src/components/BottomNavigation.vue
+++ b/src/components/BottomNavigation.vue
@@ -4,7 +4,9 @@
                     <v-btn :to="{name: 'home'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border"
+                    >
                         <v-icon>mdi-map</v-icon>
                         แผนที่
                     </v-btn>
@@ -13,7 +15,8 @@
                     <v-btn :to="{name: 'favorite'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-heart</v-icon>
                         สถานที่โปรด
                     </v-btn>
@@ -21,7 +24,8 @@
                     <v-btn :to="{name: 'setting'}"
                     block rounded="lg"
                     min-width="20px"
-                    max-width="120px">
+                    max-width="120px"
+                    class = "white-border">
                         <v-icon>mdi-cog</v-icon>
                         การตั้งค่า
                     </v-btn>
@@ -39,7 +43,7 @@ import {RouterLink} from 'vue-router';
 </script>
 
 <style>
-.v-btn {
+.white-border {
   min-width: 50px;
   border: 3px solid rgba(255, 255, 255, 1);
 }
diff --git a/src/components/DestinationInfoCard.vue b/src/components/DestinationInfoCard.vue
index 95d6bc1..d3b8e9e 100644
--- a/src/components/DestinationInfoCard.vue
+++ b/src/components/DestinationInfoCard.vue
@@ -1,75 +1,585 @@
 <template>
-    <v-img
-        src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
-        height="250px"
-        cover
-    ></v-img>
+  <v-card 
+  class="stick-bottom card-height destination-card"
+  width="100%"
+  :height="cardHeight"
+  style="padding-top: 15px;"
+  >
+
+  <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="wheelchairIcon" :class="wheelchairIconClass"/>
+          </v-avatar>
+        </template>
+        <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="findLocation" 
+            class="icon"
+            />
+          </v-avatar>
+        </template>
+        <v-list-item-title class="text-decoration-underline">{{nearestStructureData.lon}} , {{nearestStructureData.lat}}</v-list-item-title>
+      </v-list-item>
+
+      <!-- <v-list-item>
+        <template v-slot:prepend>
+          <v-avatar>
+            <img :src="clock" 
+            class="icon"
+            />
+          </v-avatar>
+        </template>
+        <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 @click="addToFavorites" rounded="xl" variant="tonal" width="45vw" height="44px">
+        เพิ่มลงในสถานที่โปรด</v-btn>
+      <v-btn @click="viewRoute" rounded="xl" variant="flat" class="text-white" width="45vw" height="44px" color="#f16322">
+        ดูเส้นทาง</v-btn>
+    </v-card-actions>
+
     
-    <v-card
-    class="stick-bottom card-height"
-    width="100%"
-    style="padding-top: 15px;"
-    >
-        <v-card-title>
-        Destination.Title
-        </v-card-title>
+  </div>
 
-        <v-card-subtitle>
-        Destination.SubTitle
-        </v-card-subtitle>
 
-        <v-card-text>
-        Enim voluptate ad deserunt amet culpa ad irure eu reprehenderit dolor consequat non.
-        </v-card-text>
+  <div v-else>
 
-        
-          <v-card-actions class = "stick-bottom btnlist-height justify-sa">
-              <v-btn rounded="xl" variant="tonal"
-              width="45vw" height = "44px"
+    <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-btn>
-              <v-btn rounded="xl" variant="flat"
-              class="text-white"
-              width="45vw" height = "44px"
-              color="#f16322">
-                ดูเส้นทาง</v-btn>
-          </v-card-actions>
+              </v-icon>
 
-          <v-btn  variant="tonal" icon="mdi-close"
-          
-          style="position: absolute; top: 15px; right: 15px;"
-          />
-        
-    
-    </v-card>
+              </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/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
+  },
+  data() {
+    return {
+      showPopup: true,
+      showRoute: false,
+      userLocation: null,
+      isLocationRequested: false,
+      
+    };
+  },
+  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>
-.stick-bottom{
-  position:fixed;
-  bottom:0;
+.stick-bottom {
+  position: fixed;
+  bottom: 0;
 }
-.card-height{
-  height: 75%;
-}
-.btnlist-height{
+
+.btnlist-height {
   height: 25%;
   width: 100%;
 }
+
 .v-card-actions.justify-sa {
   display: flex;
   justify-content: space-around;
 }
-.btn-width{
-  width: 35vw;
-}
-.text-white{
+
+.text-white {
   color: white;
 }
+
+.icon, .iconCheck {
+  width: 30px;
+  height: 30px;
+}
+
+.iconCheck, .textCheck {
+  filter: invert(55%) sepia(39%) saturate(601%) hue-rotate(73deg) brightness(97%) contrast(98%);
+}
+
+.knowMore {
+  filter: invert(67%) sepia(85%) saturate(5663%) hue-rotate(8deg) brightness(100%) contrast(101%);
+}
+
+.image { 
+  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
new file mode 100644
index 0000000..ee92c4e
--- /dev/null
+++ b/src/components/Popup.vue
@@ -0,0 +1,53 @@
+<template>
+  <div v-if="showPopup" class="popup">
+    <div class="popup-content">
+      <p>{{ nearestStructureData.display_name }}</p>
+      <button @click="closePopup">Close</button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
+
+export default {
+  props: {
+    nearestStructureData: Object,
+    onClose: Function,
+  },
+  data() {
+    return {
+      showPopup: true,
+    };
+  },
+  methods: {
+    closePopup() {
+      this.showPopup = false;
+      this.onClose();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.popup {
+  position: fixed;
+  top: 50%; /* Set the popup to be vertically centered */
+  left: 50%; /* Set the popup to be horizontally centered */
+  transform: translate(-50%, -50%); /* Center the popup accurately */
+  background-color: white;
+  border: 1px solid #ccc;
+  padding: 10px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.popup-content {
+  margin: 0;
+}
+
+button {
+  margin-top: 10px;
+}
+</style>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
new file mode 100644
index 0000000..3c42446
--- /dev/null
+++ b/src/components/TopBar.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-app-bar app class="custom-app-bar">
+    <v-app-bar-nav-icon @click="goBack" v-if="showBackIcon">
+      <v-icon large>mdi-arrow-left</v-icon> 
+    </v-app-bar-nav-icon>
+    <v-toolbar-title class="text-center">{{ pageTitle }}</v-toolbar-title>
+  </v-app-bar>
+</template>
+
+<script>
+export default {
+  props: {
+    showBackIcon: {
+      type: Boolean,
+      default: false
+    },
+    pageTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.custom-app-bar {
+  box-shadow: none;
+}
+</style>
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/plugins/router.js b/src/plugins/router.js
index c27a324..51e17e3 100644
--- a/src/plugins/router.js
+++ b/src/plugins/router.js
@@ -6,6 +6,8 @@ const routes = [
     {path: '/favorite', name: 'favorite', component: () => import('@/views/Favorite.vue')},
     {path: '/setting', name: 'setting', component: () => import('@/views/Setting.vue')},
     {path: '/destination-info', name: 'destination-info', component: () => import('@/views/DestinationInfo.vue')},
+    {path: '/login', name: 'login', component: () => import('@/views/Login.vue')},
+    {path: '/register', name: 'register', component: () => import('@/views/Register.vue')},
 ]
 const router = createRouter({
     routes,
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/DestinationInfo.vue b/src/views/DestinationInfo.vue
index f9bd6e3..e58f219 100644
--- a/src/views/DestinationInfo.vue
+++ b/src/views/DestinationInfo.vue
@@ -4,9 +4,4 @@
 
 <script setup>
     import DestinationInfoCard from '@/components/DestinationInfoCard.vue';
-</script>
-
-
-<style>
-
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/Favorite.vue b/src/views/Favorite.vue
index fd9281e..9ddbd0b 100644
--- a/src/views/Favorite.vue
+++ b/src/views/Favorite.vue
@@ -1,76 +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-img
-                :width="32"
-                src= "./icons/Adwaita/pin.svg"
-                ></v-img>
-            </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 a517d6e..4e62571 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,8 +1,64 @@
 <template>
-  
-  <searchbar/>
 
-    <ol-map
+<div id="app">
+    <router-view
+    class="router-view"
+    />
+
+    <DestinationInfoCard
+    class="DestinationInfoCard"
+      v-if="popupData"
+      :nearestStructureData="popupData"
+      :onClose="closePopup"
+      @updateRouting="handleRouting"
+    />
+    
+  </div>
+  
+  <!-- <searchbar/> -->
+  <v-layout style="height: 40px;">
+        <v-app-bar scroll-threshold="0"
+            class="mx-auto px-auto"
+            >
+            
+            <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>
+
+      <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
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
     style=
@@ -24,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>
@@ -31,33 +114,116 @@
 
 
 <script setup>
-
-import searchbar from '@/components/searchbar.vue';
 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");
 const zoom = ref(19);
 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) => {
+  const lat = parseFloat(result.lat);
+  const lon = parseFloat(result.lon);
+  center.value = [lon, lat];
+  showSearchBar.value = false;
+  popupData.value = result; 
+};
+
+const performSearch = async () => {
+  try {
+    const response = await axios.get(
+      `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery.value)}`
+    );
+
+    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;
-  console.log("Clicked coordinate:", clickedCoordinate);
+  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]}`
     );
 
-    console.log("API response:", response.data);
+    let nearestStructureData = response.data;
 
-    const nearestStructureData = response.data;
-    console.log("Nearest structure:", nearestStructureData);
+    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);
   }
 };
+
+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>
@@ -68,4 +234,39 @@ const handleMapClick = async event => {
   padding:1px .5em;
   margin-bottom: 8em;
 }
+.search-results {
+  position: absolute;
+  width: 100%;
+  max-height: 200px;
+  height: 300px;
+  overflow-y: auto;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  top: 4em;
+}
+
+.search-results ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.search-results li {
+  padding: 10px;
+  cursor: pointer;
+}
+
+.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
new file mode 100644
index 0000000..2a83e0c
--- /dev/null
+++ b/src/views/Login.vue
@@ -0,0 +1,195 @@
+<template>
+
+  <v-app>
+    <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+    <v-main>
+      <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-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: {
+    TopBar
+  },
+  name: 'Login',
+  data() {
+    return {
+      pageTitle: 'ลงชื่อเข้าใช้',
+      input: {
+        email: '',
+        password: ''
+      }
+    };
+  },
+  methods: {
+    login() {
+      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('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/Privacy.vue b/src/views/Privacy.vue
new file mode 100644
index 0000000..3a63585
--- /dev/null
+++ b/src/views/Privacy.vue
@@ -0,0 +1,23 @@
+<template>
+    <v-app>
+      <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+      <v-main>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quisquam quo accusamus totam excepturi consectetur obcaecati, corporis voluptates! Ut ipsum voluptatibus fugit qui fugiat. Ipsam blanditiis eveniet molestias quasi vitae?
+      </v-main>
+    </v-app>
+  
+</template>
+
+<script>
+  import TopBar from '@/components/TopBar.vue';
+  export default { 
+    components: {
+    TopBar
+  },
+  data() {
+    return {
+      pageTitle: 'นโยบายความเป็นส่วนตัว', // Set the page title here
+    };
+  },
+}
+  </script>
\ No newline at end of file
diff --git a/src/views/Register.vue b/src/views/Register.vue
new file mode 100644
index 0000000..944b976
--- /dev/null
+++ b/src/views/Register.vue
@@ -0,0 +1,179 @@
+<template>
+
+    <v-app>
+      <top-bar :show-back-icon="true" :page-title="pageTitle" />  
+      <v-main>
+        
+          <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 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 {
+    components: {
+      TopBar
+    },
+    name: 'register',
+    data() {
+      return {
+        pageTitle: 'สมัครสมาชิก', 
+        input: {
+          email: '',
+          password: '',
+          passwordConfirm:''
+        }
+      };
+    },
+    methods: {
+      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('Email and Password cannot be empty');
+        }
+      }
+    },
+  };
+</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 4a4bf14..d3bfe6a 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -1,49 +1,20 @@
 <template>
-    <v-sheet class="d-flex justify-center">
-
-        <v-sheet class="ma-2 pa-4 mb-auto">
-
-            <v-row class="ma-2" justify="space-around">
-            <v-avatar
-                color="grey"
-                size="128"
-            >
-            <v-img cover src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/User-avatar.svg/1200px-User-avatar.svg.png"></v-img>
-            </v-avatar>
-            </v-row>
-
-            <v-list-item
-            center
-                class="text-black"
-                title="SRP Rottenmango"
-                subtitle="sasha@example.org"
-            >
-            </v-list-item>
-        </v-sheet>
-        
-    </v-sheet>
-
+<v-app>
+    <v-container class="d-flex justify-center align-center">
+        <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-container>
+        </div>
+    </v-container>
     <v-sheet class="d-flex justify-center ma-2">
         <v-sheet class="mb-auto"
         max-width="420px"
         min-width="200px"
         width="95vw">
-        
-            <v-list class = "ma-2" density="compact">
-                <v-list-item
-                    v-for="(item, i) in account_items"
-                    :key="i"
-                    :value="item"
-                >
-                <template v-slot:append>
-                <v-icon :icon="item.icon"></v-icon>
-                </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>
 
@@ -84,22 +55,28 @@
                 </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>
         </v-sheet>
         
-    </v-sheet>    
+    </v-sheet>   
+</v-app> 
 
 </template>
 
 <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: 'ตั้งค่าบัญชี',icon: 'mdi-chevron-right'},
+    { text: 'ตั้งค่าบัญชี',
+    icon: 'mdi-chevron-right'},
     
   ]
 
@@ -113,8 +90,22 @@ const display_items = [
   ]
 
   const about_items = [
-    { text: 'เกี่ยวกับ',icon: 'mdi-chevron-right',}
+    { text: 'เกี่ยวกับ',
+    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>
+