diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..90ac95e
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,13 @@
+FROM node
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 5173
+
+CMD [ "npm", "run", "dev"]
diff --git a/package-lock.json b/package-lock.json
index e4e1455..7dd04d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "ol": "^10.5.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-router-dom": "^7.5.0"
+        "react-router-dom": "^7.5.0",
+        "vite-plugin-checker": "^0.9.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
@@ -44,7 +45,6 @@
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
       "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
         "js-tokens": "^4.0.0",
@@ -177,7 +177,6 @@
       "version": "7.25.9",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
       "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
-      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -310,7 +309,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -326,7 +324,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -342,7 +339,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -358,7 +354,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -374,7 +369,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -390,7 +384,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -406,7 +399,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -422,7 +414,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -438,7 +429,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -454,7 +444,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -470,7 +459,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -486,7 +474,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -502,7 +489,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -518,7 +504,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -534,7 +519,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -550,7 +534,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -566,7 +549,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -582,7 +564,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -598,7 +579,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -614,7 +594,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -630,7 +609,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -646,7 +624,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -662,7 +639,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -678,7 +654,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -694,7 +669,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -707,7 +681,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.6.0.tgz",
       "integrity": "sha512-WhCn7Z7TauhBtmzhvKpoQs0Wwb/kBcy4CwpuI0/eEIr2Lx2auxmulAzLr91wVZJaz47iUZdkXOK7WlAfxGKCnA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
       },
@@ -725,7 +699,7 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -737,7 +711,7 @@
       "version": "4.12.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
       "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -746,7 +720,7 @@
       "version": "0.20.0",
       "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
       "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@eslint/object-schema": "^2.1.6",
         "debug": "^4.3.1",
@@ -760,7 +734,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.1.tgz",
       "integrity": "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -769,7 +743,7 @@
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz",
       "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/json-schema": "^7.0.15"
       },
@@ -781,7 +755,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
       "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.3.2",
@@ -804,7 +778,7 @@
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=18"
       },
@@ -816,7 +790,7 @@
       "version": "9.24.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.24.0.tgz",
       "integrity": "sha512-uIY/y3z0uvOGX8cp1C2fiC4+ZmBhp6yZWkojtHL1YEMnRt1Y63HB9TM17proGEmeG7HeUY+UP36F0aknKYTpYA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -825,7 +799,7 @@
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
       "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -834,7 +808,7 @@
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz",
       "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@eslint/core": "^0.13.0",
         "levn": "^0.4.1"
@@ -847,7 +821,7 @@
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz",
       "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/json-schema": "^7.0.15"
       },
@@ -859,7 +833,7 @@
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -868,7 +842,7 @@
       "version": "0.16.6",
       "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
       "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.3.0"
@@ -881,7 +855,7 @@
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
       "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -894,7 +868,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -907,7 +881,7 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.2.tgz",
       "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -1011,7 +985,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1024,7 +997,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1037,7 +1009,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1050,7 +1021,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1063,7 +1033,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1076,7 +1045,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1089,7 +1057,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1102,7 +1069,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1115,7 +1081,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1128,7 +1093,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1141,7 +1105,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1154,7 +1117,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1167,7 +1129,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1180,7 +1141,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1193,7 +1153,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1206,7 +1165,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1219,7 +1177,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1232,7 +1189,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1245,7 +1201,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1258,7 +1213,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1313,14 +1267,13 @@
     "node_modules/@types/estree": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
     },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/rbush": {
       "version": "4.0.0",
@@ -1576,7 +1529,7 @@
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
       "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1588,7 +1541,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
+      "devOptional": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -1597,7 +1550,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -1609,11 +1562,22 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1628,19 +1592,19 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -1694,7 +1658,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -1723,7 +1687,7 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -1735,11 +1699,25 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1751,13 +1729,13 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
@@ -1777,7 +1755,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -1797,7 +1775,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
       "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -1814,7 +1792,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/earcut": {
       "version": "3.0.1",
@@ -1831,7 +1809,6 @@
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
       "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -1880,7 +1857,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=10"
       },
@@ -1892,7 +1869,7 @@
       "version": "9.24.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.24.0.tgz",
       "integrity": "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -1973,7 +1950,7 @@
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
       "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -1989,7 +1966,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
       "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -2001,7 +1978,7 @@
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
       "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "acorn": "^8.14.0",
         "acorn-jsx": "^5.3.2",
@@ -2018,7 +1995,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
       "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -2030,7 +2007,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -2042,7 +2019,7 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -2051,7 +2028,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2060,7 +2037,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-glob": {
       "version": "3.3.3",
@@ -2094,13 +2071,13 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fastq": {
       "version": "1.19.1",
@@ -2115,7 +2092,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -2139,7 +2116,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -2155,7 +2132,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -2168,13 +2145,12 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/fsevents": {
       "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,
       "os": [
@@ -2215,7 +2191,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -2245,7 +2221,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2254,7 +2230,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 4"
       }
@@ -2263,7 +2239,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -2279,7 +2255,7 @@
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -2288,7 +2264,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2297,7 +2273,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2318,19 +2294,18 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
       "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -2354,19 +2329,19 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -2384,7 +2359,7 @@
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -2398,7 +2373,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -2411,7 +2386,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -2426,7 +2401,7 @@
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
@@ -2463,7 +2438,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -2475,13 +2450,12 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2499,7 +2473,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/node-releases": {
       "version": "2.0.19",
@@ -2507,6 +2481,32 @@
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true
     },
+    "node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ol": {
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/ol/-/ol-10.5.0.tgz",
@@ -2527,7 +2527,7 @@
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -2544,7 +2544,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -2559,7 +2559,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -2579,7 +2579,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -2596,7 +2596,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2605,7 +2605,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2624,8 +2624,7 @@
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -2643,7 +2642,6 @@
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
       "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2671,7 +2669,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -2685,7 +2683,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -2800,11 +2798,23 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4"
       }
@@ -2831,7 +2841,6 @@
       "version": "4.40.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
       "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.7"
       },
@@ -2912,7 +2921,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -2924,7 +2933,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -2933,16 +2942,29 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       },
@@ -2954,7 +2976,7 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2962,6 +2984,50 @@
         "node": ">=8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2995,7 +3061,7 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -3007,7 +3073,7 @@
       "version": "5.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3038,6 +3104,17 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
@@ -3072,7 +3149,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -3081,7 +3158,6 @@
       "version": "6.2.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
       "integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "postcss": "^8.5.3",
@@ -3148,6 +3224,82 @@
         }
       }
     },
+    "node_modules/vite-plugin-checker": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-checker/-/vite-plugin-checker-0.9.1.tgz",
+      "integrity": "sha512-neH3CSNWdkZ+zi+WPt/0y5+IO2I0UAI0NX6MaXqU/KxN1Lz6np/7IooRB6VVAMBa4nigqm1GRF6qNa4+EL5jDQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "chokidar": "^4.0.3",
+        "npm-run-path": "^6.0.0",
+        "picocolors": "^1.1.1",
+        "picomatch": "^4.0.2",
+        "strip-ansi": "^7.1.0",
+        "tiny-invariant": "^1.3.3",
+        "tinyglobby": "^0.2.12",
+        "vscode-uri": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "peerDependencies": {
+        "@biomejs/biome": ">=1.7",
+        "eslint": ">=7",
+        "meow": "^13.2.0",
+        "optionator": "^0.9.4",
+        "stylelint": ">=16",
+        "typescript": "*",
+        "vite": ">=2.0.0",
+        "vls": "*",
+        "vti": "*",
+        "vue-tsc": "~2.2.2"
+      },
+      "peerDependenciesMeta": {
+        "@biomejs/biome": {
+          "optional": true
+        },
+        "eslint": {
+          "optional": true
+        },
+        "meow": {
+          "optional": true
+        },
+        "optionator": {
+          "optional": true
+        },
+        "stylelint": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        },
+        "vls": {
+          "optional": true
+        },
+        "vti": {
+          "optional": true
+        },
+        "vue-tsc": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-checker/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/vscode-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
+      "integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="
+    },
     "node_modules/web-worker": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.5.0.tgz",
@@ -3157,7 +3309,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -3172,7 +3324,7 @@
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3192,7 +3344,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/package.json b/package.json
index 66756d5..cd40ae6 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -13,7 +13,8 @@
     "ol": "^10.5.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.0"
+    "react-router-dom": "^7.5.0",
+    "vite-plugin-checker": "^0.9.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/src/App.css b/src/App.css
index 7bc9dc2..6211cbb 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,5 +15,17 @@
 
 .coordinates-container {
     position: absolute;
-    bottom: 0;
+    bottom: -2px;
 }
+
+.ol-popup{
+  position: absolute;
+  background-color: white;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid black;
+  transform: translate(-50%, -100%);
+  pointer-events: none;
+  width: 220px;
+  color: black;
+};
diff --git a/src/App.tsx b/src/App.tsx
index cef8178..8244078 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import './App.css'
 import OpenLayerMap from './components/OpenLayerMap';
+import OpenLayerEsri from './components/OpenLayerEsri';
 import LegiScanAPI from './components/LegiScanAPI';
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 
@@ -11,8 +12,9 @@ function App() {
 return (
     <Router>
     <Routes>
-        <Route exact path="/" element={<OpenLayerMap />} />
-        <Route exact path="/legi" element={<LegiScanAPI />} />
+        <Route path="/" element={<OpenLayerMap />} />
+        <Route path="/esri" element={<OpenLayerEsri />} />
+        <Route path="/legi" element={<LegiScanAPI />} />
     </Routes>
     </Router>
   );
diff --git a/src/components/LegiScanAPI.tsx b/src/components/LegiScanAPI.tsx
index 77cf9f0..1798edf 100644
--- a/src/components/LegiScanAPI.tsx
+++ b/src/components/LegiScanAPI.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+//import { useState, useEffect } from 'react'
 
 async function getBills(data) {
 	const bill_ids: number[] = [];
diff --git a/src/components/OpenLayerEsri.tsx b/src/components/OpenLayerEsri.tsx
new file mode 100644
index 0000000..11e9f2c
--- /dev/null
+++ b/src/components/OpenLayerEsri.tsx
@@ -0,0 +1,131 @@
+import {useRef} from 'react';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import EsriJSON from 'ol/format/EsriJSON';
+import TileLayer from 'ol/layer/Tile';
+import VectorLayer from 'ol/layer/Vector';
+import {tile as tileStrategy} from 'ol/loadingstrategy';
+import {fromLonLat} from 'ol/proj';
+import ImageTile from 'ol/source/ImageTile';
+import VectorSource from 'ol/source/Vector';
+import Fill from 'ol/style/Fill';
+import Stroke from 'ol/style/Stroke';
+import Style from 'ol/style/Style';
+import {createXYZ} from 'ol/tilegrid';
+
+const serviceUrl =
+  'https://services-eu1.arcgis.com/NPIbx47lsIiu2pqz/ArcGIS/rest/services/' +
+  'Neptune_Coastline_Campaign_Open_Data_Land_Use_2014/FeatureServer/';
+const layer = '0';
+
+const fillColors = {
+  'Lost To Sea Since 1965': [0, 0, 0, 1],
+  'Urban/Built-up': [104, 104, 104, 1],
+  'Shacks': [115, 76, 0, 1],
+  'Industry': [230, 0, 0, 1],
+  'Wasteland': [230, 0, 0, 1],
+  'Caravans': [0, 112, 255, 0.5],
+  'Defence': [230, 152, 0, 0.5],
+  'Transport': [230, 152, 0, 1],
+  'Open Countryside': [255, 255, 115, 1],
+  'Woodland': [38, 115, 0, 1],
+  'Managed Recreation/Sport': [85, 255, 0, 1],
+  'Amenity Water': [0, 112, 255, 1],
+  'Inland Water': [0, 38, 115, 1],
+};
+
+const style = new Style({
+  fill: new Fill(),
+  stroke: new Stroke({
+    color: [0, 0, 0, 1],
+    width: 0.5,
+  }),
+});
+
+
+const OpenLayerEsri = () => {
+const mapDivRef = useRef<HTMLDivElement>(null);
+const vectorSource = new VectorSource({
+  format: new EsriJSON(),
+  url: function (extent, projection) {
+    // ArcGIS Server only wants the numeric portion of the projection ID.
+    const srid = projection
+      .getCode()
+      .split(/:(?=\d+$)/)
+      .pop();
+
+    const url =
+      serviceUrl +
+      layer +
+      '/query/?f=json&' +
+      'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
+      encodeURIComponent(
+        '{"xmin":' +
+          extent[0] +
+          ',"ymin":' +
+          extent[1] +
+          ',"xmax":' +
+          extent[2] +
+          ',"ymax":' +
+          extent[3] +
+          ',"spatialReference":{"wkid":' +
+          srid +
+          '}}',
+      ) +
+      '&geometryType=esriGeometryEnvelope&inSR=' +
+      srid +
+      '&outFields=*' +
+      '&outSR=' +
+      srid;
+
+    return url;
+  },
+  strategy: tileStrategy(
+    createXYZ({
+      tileSize: 512,
+    }),
+  ),
+  attributions:
+    'University of Leicester (commissioned by the ' +
+    '<a href="https://www.arcgis.com/home/item.html?id=' +
+    'd5f05b1dc3dd4d76906c421bc1727805">National Trust</a>)',
+});
+
+const vector = new VectorLayer({
+  source: vectorSource,
+  style: function (feature) {
+    const classify = feature.get('LU_2014');
+    const color = fillColors[classify] || [0, 0, 0, 0];
+    style.getFill().setColor(color);
+    return style;
+  },
+  opacity: 0.7,
+});
+
+const raster = new TileLayer({
+  source: new ImageTile({
+    attributions:
+      'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
+    url:
+      'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+      'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+  }),
+});
+
+const map = new Map({
+  layers: [raster,vector],
+  target: mapDivRef.current as HTMLDivElement,
+  view: new View({
+    center: fromLonLat([1.72, 52.4]),
+    zoom: 14,
+  }),
+});
+
+    return (
+        <>
+            <div ref={mapDivRef} className='map' />
+        </>
+    );
+}
+export default OpenLayerEsri
diff --git a/src/components/OpenLayerMap.tsx b/src/components/OpenLayerMap.tsx
index efed9fa..78f1672 100644
--- a/src/components/OpenLayerMap.tsx
+++ b/src/components/OpenLayerMap.tsx
@@ -3,129 +3,132 @@ import { Map, View } from 'ol';
 
 import 'ol/ol.css';
 import TileLayer from 'ol/layer/Tile';
-import {tile as tileStrategy} from 'ol/loadingstrategy';
-import {createXYZ} from 'ol/tilegrid';
+import Overlay from 'ol/Overlay'
+//import Popup from 'ol/Popup'
+//import {tile as tileStrategy} from 'ol/loadingstrategy';
+//import {createXYZ} from 'ol/tilegrid';
 import { OSM } from 'ol/source';
 import { Coordinate } from 'ol/coordinate';
 import VectorLayer from "ol/layer/Vector"
 import VectorSource from "ol/source/Vector"
 import GeoJSON from "ol/format/GeoJSON"
-import EsriJSON from "ol/format/EsriJSON"
-import {Style, Icon, Fill, Circle} from "ol/style"
-import {getCenter} from 'ol/extent';
-import ImageLayer from 'ol/layer/Image';
-import ImageArcGISRest from 'ol/source/ImageArcGISRest';
+//import EsriJSON from "ol/format/EsriJSON"
+import {Style, Icon, Fill, Circle, Stroke} from "ol/style"
 
 const OpenLayersMap = () => {
     const mapDivRef = useRef<HTMLDivElement>(null);
-
-    const [olMap, setOlMap] = useState<Map>();
+    const popupRef = useRef<HTMLDivElement>(null);
 
     const [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>();
 
-  const mapRef = useRef()
-
- // // read geojson feature
- // const geoJSONFeatures: any = new GeoJSON().readFeatures(../assets/Address_Points.geojson)
-
- // // create vector source
- // const vectorSource: any = new VectorSource({
- //   features: geoJSONFeatures,
- // })
-
- // // create vector layer with source
- // const vectorLayer :any = new VectorLayer({
- //   source: vectorSource,
- // })
-const url: any =
-  'https://sampleserver6.arcgisonline.com/ArcGIS/rest/services/' +
-  'USA/MapServer';
-  const url_1: any = "https://geo.sandag.org/server/rest/services/Hosted/Address_Points/FeatureServer/";
-  const layer: any = '0';
+  const url_1: any = "https://geo.sandag.org/server/rest/services/Hosted/Address_Points/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&resultType=standard&f=geojson";
+  const url_2: any = "https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&resultType=none&f=geojson";
 
 const vectorLayer: any = new VectorLayer({
     source: new VectorSource({
         format: new GeoJSON(),
-        url: './assets/Address_Points.geojson'
+        url: url_2,
+style: new Style({
+    fill: new Fill({
+      color: 'red',
+    }),
+    stroke: new Stroke({
+      color: 'black',
+      width: 2.25
+    }),
+  }),
+    }),
+
+});
+const vectorLayer1: any = new VectorLayer({
+    source: new VectorSource({
+        format: new GeoJSON(),
+        url: url_1,
+attributions: ['Los Angeles GeoHub |']
     }),
 
 });
 
-const vectorSource: any = new VectorSource({
-  format: new EsriJSON(),
-  url: function (extent, resolution, projection) {
-    // ArcGIS Server only wants the numeric portion of the projection ID.
-    const srid: any = projection.getCode().split(/:(?=\d+$)/).pop();
-
-    const url =
-      url_1 +
-      layer +
-      '/query/?f=json&' +
-      'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
-      encodeURIComponent(
-        '{"xmin":' +
-          extent[0] +
-          ',"ymin":' +
-          extent[1] +
-          ',"xmax":' +
-          extent[2] +
-          ',"ymax":' +
-          extent[3] +
-          ',"spatialReference":{"wkid":' +
-          srid +
-          '}}',
-      ) +
-      '&geometryType=esriGeometryEnvelope&inSR=' +
-      srid +
-      '&outFields=*' +
-      '&outSR=' +
-      srid;
-
-    return url;
-  },
-  strategy: tileStrategy(
-    createXYZ({
-      tileSize: 512,
-    }),
-  ),
-  attributions:
-    'University of Leicester (commissioned by the ' +
-    '<a href="https://www.arcgis.com/home/item.html?id=' +
-    'd5f05b1dc3dd4d76906c421bc1727805">National Trust</a>)',
-});
 
   // default view
-  const def_view: any = new View({
-    center: [0, 0],
-    zoom: 2,
-  })
 
     useEffect(() => {
+
+const overlay = new Overlay({
+      element: popupRef.current as HTMLDivElement,
+      autoPan: {
+        animation: {
+          duration: 250,
+        },
+      },
+    })
         const map = new Map({
             target: mapDivRef.current as HTMLDivElement,
             layers: [
                 new TileLayer({
                     source: new OSM(),
                 }),
- new ImageLayer({
-    source: new ImageArcGISRest({
-      ratio: 1,
-      params: {},
-      url: './assets/Address_Points.geojson',
-    }),
-  }),
+		vectorLayer,
+		vectorLayer1
             ],
 view: new View({
-    center: [-10997148, 4569099],
-    zoom: 4,
-  })
+    center: [-13042228, 3857849],
+    zoom: 12,
+  }),
+  overlays: [overlay],
 	});
 
         map.on('click', (e) => {
             setClickedCoordinate(e.coordinate);
+// Get Coordinates of click
+      const coordinate = e.coordinate;
+      //const hdms = toStringHDMS(toLonLat(coordinate));
+
+const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
+    return feature;
+  });
+      
+      // Show popup at clicked position
+      overlay.setPosition(coordinate);
+      if(feature)
+      console.log("feature " + JSON.stringify(feature));
+
+  if(feature && feature.get("subname")){
+      if (popupRef.current) {
+        popupRef.current.innerHTML = `<p>You clicked here:</p><code>` +
+		`<p>Parcel</p>` + 
+
+		`<p>${feature.get('subname')}</p>` + 
+		`<p> Unit Qty ${feature.get('unitqty')}</p>` + 
+		`<p>${feature.get('situs_community')} ${feature.get('situs_zip')}</p>` + 
+		`<p>bedrooms ${feature.get('bedrooms')} Baths ${feature.get('baths')}</p>` + 
+		 `</code>`;
+      }
+  }
+  else if(feature && feature.get('addrsfx')){
+      if (popupRef.current) {
+        popupRef.current.innerHTML = `<p>You clicked here:</p><code>` +
+		`<p>Address Point</p>` + 
+
+		`<p>${feature.get('addrname')} ${feature.get('addrsfx')}</p>` + 
+		`<p>${feature.get('addrzip')}</p>` + 
+		`<p>${feature.get('community')}</p>` + 
+		 `</code>`;
+      }
+  }
+  else{
+      if (popupRef.current) {
+        popupRef.current.innerHTML = `<p>You clicked here:</p><code>` +
+		`<p>Not a parcel or Address Point</p>` + 
+		 `</code>`;
+      }
+
+
+  }
+      
+      overlay.setPosition(coordinate)
         });
 
-        setOlMap(map);
 
  // fit view to geometry of geojson feature with padding
     //def_view.fit(geoJSONFeatures[0].getGeometry().getExtent(), { padding: [100, 100, 100, 100]});
@@ -135,13 +138,13 @@ view: new View({
 
     return (
         <>
-            <div ref={mapDivRef} className='map' />
+            <div ref={mapDivRef} className='map'>
+<div ref={popupRef} className="ol-popup"/>
+	    </div>
             {clickedCoordinate && (
                 <span className='coordinates-container'>
-                    You clicked at: {clickedCoordinate[0]} /{' '}
-                    {clickedCoordinate[1]}
+                    You clicked at: {clickedCoordinate[0]} /{' '} {clickedCoordinate[1]}
                 </span>
-
             )}
         </>
     );
diff --git a/vite.config.ts b/vite.config.ts
index 8b0f57b..19eebd9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import checker from 'vite-plugin-checker';
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [checker({typescript: false}),react()],
+  server: {
+	  allowedHosts: true,
+	  host:true,
+ origin: 'http://localhost:5173',
+  },
 })