Marker,Sewer,Parcels

package-lock.json

@@ -8,15 +8,21 @@
       "name": "ai-real-estate-tool",
       "version": "0.0.0",
       "dependencies": {
+        "-": "^0.0.1",
+        "@types/leaflet": "^1.9.18",
+        "leaflet": "^1.9.4",
         "ol": "^10.5.0",
         "ol-ext": "^4.0.31",
-        "react": "^19.0.0",
+        "react": "^19.1.0",
         "react-dom": "^19.0.0",
+        "react-leaflet": "^5.0.0",
         "react-router-dom": "^7.5.0",
+        "save": "^2.9.0",
         "vite-plugin-checker": "^0.9.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
+        "@types/ol": "^6.5.3",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@vitejs/plugin-react": "^4.3.4",
@@ -29,6 +35,12 @@
         "vite": "^6.2.0"
       }
     },
+    "node_modules/-": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/-/-/--0.0.1.tgz",
+      "integrity": "sha512-3HfneK3DGAm05fpyj20sT3apkNcvPpCuccOThOPdzz8sY7GgQGe0l93XH9bt+YzibcTIgUAIMoyVJI740RtgyQ==",
+      "license": "UNLICENSED"
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -979,6 +991,17 @@
       "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.2.tgz",
       "integrity": "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
+      "integrity": "sha512-3EWmekh4Nz+pGcr+xjf0KNyYfC3U2JjnkWsh0zcqaexYqmmB5ZhH37kz41JXGmKzpaMZCnPofBBm64i+YrEvGQ==",
+      "license": "Hippocratic-2.1",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.40.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
@@ -1219,6 +1242,13 @@
         "win32"
       ]
     },
+    "node_modules/@types/arcgis-rest-api": {
+      "version": "10.4.8",
+      "resolved": "https://registry.npmjs.org/@types/arcgis-rest-api/-/arcgis-rest-api-10.4.8.tgz",
+      "integrity": "sha512-MapiW0nP/5X0BUHmtRNEjbK0xrxS6n0syZWQk25H4ObFFwuK1+pGl7LQfOLgpsVM849WQ1b2sKIvWqEAvPwzCA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1260,22 +1290,45 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/cookie": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
-      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
-    },
     "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=="
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "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==",
       "devOptional": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.18",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.18.tgz",
+      "integrity": "sha512-ht2vsoPjezor5Pmzi5hdsA7F++v5UGq9OlUduWHmMZiuQGIpJ2WS5+Gg9HaAA79gNh1AIPtCqhzejcIZ3lPzXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/ol": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ol/-/ol-6.5.3.tgz",
+      "integrity": "sha512-C0Sm5dytTfRxztYFMuWq0IBJYfMffPF4GzXI/s4ZyJlNZ8AAdS+9fW0iGOyYkTb3ZQmfYWYdAzMqwGXfHVw+3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/arcgis-rest-api": "*",
+        "@types/geojson": "*",
+        "@types/rbush": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
     "node_modules/@types/rbush": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
@@ -1299,6 +1352,16 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/topojson-specification": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.5.tgz",
+      "integrity": "sha512-C7KvcQh+C2nr6Y2Ub4YfgvWvWCgP2nOQMtfhlnwsRL4pYmmwzBS7HclGiS87eQfDOU/DLQpX6GEscviaz4yLIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.29.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.29.1.tgz",
@@ -1595,6 +1658,12 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "devOptional": true
     },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1748,6 +1817,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
       "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
       "engines": {
         "node": ">=18"
       }
@@ -1795,6 +1865,12 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "devOptional": true
     },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "license": "MIT"
+    },
     "node_modules/earcut": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.0.1.tgz",
@@ -2034,6 +2110,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/event-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-4.0.1.tgz",
+      "integrity": "sha512-qACXdu/9VHPBzcyhdOWR5/IahhGMf0roTeZJfzz077GwylcDd90yOHLouhmv7GJ5XzPi6ekaQWd8AvPP2nOvpA==",
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "^0.1.1",
+        "from": "^0.1.7",
+        "map-stream": "0.0.7",
+        "pause-stream": "^0.0.11",
+        "split": "^1.0.1",
+        "stream-combiner": "^0.2.2",
+        "through": "^2.3.8"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2148,6 +2239,12 @@
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "devOptional": true
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "license": "MIT"
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2365,6 +2462,12 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/lerc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
@@ -2398,6 +2501,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha512-hFuH8TY+Yji7Eja3mGiuAxBqLagejScbG8GbG0j6o9vzn0YL14My+ktnqtZgFTosKymC9/44wP6s7xyuLfnClw==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2413,6 +2522,12 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.0.7.tgz",
+      "integrity": "sha512-C0X0KQmGm3N2ftbTGBhSyuydQ+vV1LC3f3zPvT3RXHXNZrvfPZcoXp/N5DOa8vedX/rTMm2CjTtivFg2STJMRQ==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2435,6 +2550,12 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mingo": {
+      "version": "6.6.1",
+      "resolved": "https://registry.npmjs.org/mingo/-/mingo-6.6.1.tgz",
+      "integrity": "sha512-KC6b1ODYoSdYu5fBm+SzQb7fa4ARmGwfa3Cf9F7U+2mnfD4Zhf89qQgO1cPTtaJ68w3ntIT5dVujgF52HvN7+g==",
+      "license": "MIT"
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2512,6 +2633,7 @@
       "version": "10.5.0",
       "resolved": "https://registry.npmjs.org/ol/-/ol-10.5.0.tgz",
       "integrity": "sha512-nHFx8gkGmvYImsa7iKkwUnZidd5gn1XbMZd9GNOorvm9orjW9gQvT3Naw/MjIasVJ3cB9EJUdCGR2EFAulMHsQ==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "@types/rbush": "4.0.0",
         "earcut": "^3.0.0",
@@ -2528,6 +2650,7 @@
       "version": "4.0.31",
       "resolved": "https://registry.npmjs.org/ol-ext/-/ol-ext-4.0.31.tgz",
       "integrity": "sha512-byh26JcXZggkLUY79+c29cxf2ovkkwz5niWJzOIN+dLPDJ+ogSn0y4Wl8fIS9O2JtQff5/cInHRImgZBvl+N1g==",
+      "license": "BSD-3-Clause",
       "peerDependencies": {
         "ol": ">= 5.3.0"
       }
@@ -2619,6 +2742,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "license": [
+        "MIT",
+        "Apache2"
+      ],
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/pbf": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
@@ -2745,6 +2880,7 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2760,6 +2896,20 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-leaflet": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-5.0.0.tgz",
+      "integrity": "sha512-CWbTpr5vcHw5bt9i4zSlPEVQdTVcML390TjeDG0cK59z1ylexpqC6M1PJFjV8jD7CF+ACBFsLIDs6DRMoLEofw==",
+      "license": "Hippocratic-2.1",
+      "dependencies": {
+        "@react-leaflet/core": "^3.0.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -2770,14 +2920,13 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.5.0",
+      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
-      "integrity": "sha512-estOHrRlDMKdlQa6Mj32gIks4J+AxNsYoE0DbTTxiMy2mPzZuWSDU+N85/r1IlNR7kGfznF3VCUlvc5IUO+B9g==",
+      "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
+      "license": "MIT",
       "dependencies": {
-        "@types/cookie": "^0.6.0",
         "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0",
+        "set-cookie-parser": "^2.6.0"
-        "turbo-stream": "2.4.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -2793,11 +2942,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.5.0",
+      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
-      "integrity": "sha512-fFhGFCULy4vIseTtH5PNcY/VvDJK5gvOWcwJVHQp8JQcWVr85ENhJ3UpuF/zP1tQOIFYNRJHzXtyhU1Bdgw0RA==",
+      "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
+      "license": "MIT",
       "dependencies": {
-        "react-router": "7.5.0"
+        "react-router": "7.6.2"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -2907,6 +3057,18 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/save": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/save/-/save-2.9.0.tgz",
+      "integrity": "sha512-eg8+g8CjvehE/2C6EbLdtK1pINVD27pcJLj4M9PjWWhoeha/y5bWf4dp/0RF+OzbKTcG1bae9qi3PAqiR8CJTg==",
+      "license": "ISC",
+      "dependencies": {
+        "async": "^3.2.2",
+        "event-stream": "^4.0.1",
+        "lodash.assign": "^4.2.0",
+        "mingo": "^6.1.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.26.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
@@ -2924,7 +3086,8 @@
     "node_modules/set-cookie-parser": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
-      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -2955,6 +3118,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/split": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/split/-/split-1.0.1.tgz",
+      "integrity": "sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==",
+      "license": "MIT",
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/stream-combiner": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.2.2.tgz",
+      "integrity": "sha512-6yHMqgLYDzQDcAkL+tjJDC5nSNuNIx0vZtRZeiPh7Saef7VHX9H5Ijn9l2VIol2zaNYlYEX6KyuT/237A58qEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "through": "~2.3.4"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -2993,17 +3178,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "license": "MIT"
+    },
     "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",
+      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.3",
+        "fdir": "^6.4.4",
         "picomatch": "^4.0.2"
       },
       "engines": {
@@ -3014,9 +3206,10 @@
       }
     },
     "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.3",
+      "version": "6.4.5",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
       },
@@ -3030,6 +3223,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
       "engines": {
         "node": ">=12"
       },
@@ -3061,11 +3255,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/turbo-stream": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g=="
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3164,13 +3353,17 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.2.6",
+      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -3304,6 +3497,32 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.5.tgz",
+      "integrity": "sha512-4BG7puHpVsIYxZUbiUE3RqGloLaSSwzYie5jvasC4LWuBWzZawynvYouhjbQKw2JuIGYdm0DzIxl8iVidKlUEw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "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",

package.json

@@ -10,15 +10,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "-": "^0.0.1",
+    "@types/leaflet": "^1.9.18",
+    "leaflet": "^1.9.4",
     "ol": "^10.5.0",
     "ol-ext": "^4.0.31",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
     "react-router-dom": "^7.5.0",
+    "save": "^2.9.0",
     "vite-plugin-checker": "^0.9.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@types/ol": "^6.5.3",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react": "^4.3.4",

src/components/LegiScanAPI.tsx

@@ -1,11 +1,11 @@
-//import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 
 async function getBills(data) {
 	const bill_ids: number[] = [];
 	const bill_titles: string[] = [];
 	var results: any = data["searchresult"]["results"];
 	for(var i = 0; i < data["searchresult"]["summary"]["count"]; i++){
-		var bill_id: integer = results[i]["bill_id"];
+		var bill_id: number = results[i]["bill_id"];
 		bill_ids.push(bill_id);
 	}
 	for(var i = 0; i < bill_ids.length; i++){

src/components/OpenLayerEsri.tsx

@@ -1,17 +1,17 @@
-import {useRef} from 'react';
+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 { tile as tileStrategy } from 'ol/loadingstrategy';
-import {fromLonLat} from 'ol/proj';
+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';
+import { createXYZ } from 'ol/tilegrid';
 
 const serviceUrl =
   'https://services-eu1.arcgis.com/NPIbx47lsIiu2pqz/ArcGIS/rest/services/' +
@@ -44,23 +44,23 @@ const style = new Style({
 
 
 const OpenLayerEsri = () => {
-const mapDivRef = useRef<HTMLDivElement>(null);
+  const mapDivRef = useRef<HTMLDivElement>(null);
-const vectorSource = new VectorSource({
+  const vectorSource = new VectorSource({
-  format: new EsriJSON(),
+    format: new EsriJSON(),
-  url: function (extent, projection) {
+    url: function (extent, projection) {
-    // ArcGIS Server only wants the numeric portion of the projection ID.
+      // ArcGIS Server only wants the numeric portion of the projection ID.
-    const srid = projection
+      const srid = projection
-      .getCode()
+        .getCode()
-      .split(/:(?=\d+$)/)
+        .split(/:(?=\d+$)/)
-      .pop();
+        .pop();
 
-    const url =
+      const url =
-      serviceUrl +
+        serviceUrl +
-      layer +
+        layer +
-      '/query/?f=json&' +
+        '/query/?f=json&' +
-      'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
+        'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
-      encodeURIComponent(
+        encodeURIComponent(
-        '{"xmin":' +
+          '{"xmin":' +
           extent[0] +
           ',"ymin":' +
           extent[1] +
@@ -71,62 +71,62 @@ const vectorSource = new VectorSource({
           ',"spatialReference":{"wkid":' +
           srid +
           '}}',
-      ) +
+        ) +
-      '&geometryType=esriGeometryEnvelope&inSR=' +
+        '&geometryType=esriGeometryEnvelope&inSR=' +
-      srid +
+        srid +
-      '&outFields=*' +
+        '&outFields=*' +
-      '&outSR=' +
+        '&outSR=' +
-      srid;
+        srid;
 
-    return url;
+      return url;
-  },
+    },
-  strategy: tileStrategy(
+    strategy: tileStrategy(
-    createXYZ({
+      createXYZ({
-      tileSize: 512,
+        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/' +
+      'University of Leicester (commissioned by the ' +
-      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
+      '<a href="https://www.arcgis.com/home/item.html?id=' +
-    url:
+      'd5f05b1dc3dd4d76906c421bc1727805">National Trust</a>)',
-      'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+  });
-      'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
-  }),
-});
 
-const map = new Map({
+  const vector = new VectorLayer({
-  layers: [raster,vector],
+    source: vectorSource,
-  target: mapDivRef.current as HTMLDivElement,
+    style: function (feature) {
-  view: new View({
+      const classify = feature.get('LU_2014');
-    center: fromLonLat([1.72, 52.4]),
+      const color = fillColors[classify] || [0, 0, 0, 0];
-    zoom: 14,
+      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 (
+  return (
-        <>
+    <>
-            <div ref={mapDivRef} className='map' />
+      <div ref={mapDivRef} className='map' />
-        </>
+    </>
-    );
+  );
 }
 export default OpenLayerEsri

src/components/OpenLayerMap.tsx

@@ -1,259 +1,170 @@
 import { useEffect, useRef, useState } from 'react';
 import { Map, View } from 'ol';
-
 import 'ol/ol.css';
 import TileLayer from 'ol/layer/Tile';
-import Overlay from 'ol/Overlay'
-//import Popup from 'ol/Popup'
-//import {tile as tileStrategy} from 'ol/loadingstrategy';
-//import {createXYZ} from 'ol/tilegrid';
-//import {Search} from 'ol-ext/control/SearchFeature';
 import { OSM } from 'ol/source';
-import  {fromLonLat}  from 'ol/proj';
+import { fromLonLat } from 'ol/proj';
-//import {Select} from 'ol/interaction/Select';
 import { Coordinate } from 'ol/coordinate';
-import VectorLayer from "ol/layer/Vector"
+import VectorLayer from 'ol/layer/Vector';
-import VectorSource from "ol/source/Vector"
+import VectorSource from 'ol/source/Vector';
-import GeoJSON from "ol/format/GeoJSON"
+import GeoJSON from 'ol/format/GeoJSON';
-//import EsriJSON from "ol/format/EsriJSON"
+import Style from 'ol/style/Style';
-import {Style, Icon, Fill, Circle, Stroke} from "ol/style"
+import Stroke from 'ol/style/Stroke';
+import Fill from 'ol/style/Fill';
+import Icon from 'ol/style/Icon';
+import Point from 'ol/geom/Point';
+import Feature from 'ol/Feature';
 
 const OpenLayersMap = () => {
-  const [term, setTerm] = useState({});
+  const [term, setTerm] = useState<string>('');
   const [address, setAddress] = useState();
 
+  //Submit Button Logic
   const submitForm = async (event: React.FormEvent<HTMLFormElement>) => {
     // Preventing the page from reloading
     event.preventDefault();
 
-  //fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`)
+    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`);
- // .then(response => response.json())
-  //.then(response => console.log(response))
- // .then(({data: address}) => {setAddress(address)})
-  //console.log(address)
-    const response = await fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`)
-
     const json = await response.json();
     console.log(json);
     setAddress(json);
     console.log(address);
-
-    // Do something 
     alert(term);
   }
-	const [data,setData] = useState({});
+  //Submit Button Logic
-    const mapDivRef = useRef<HTMLDivElement>(null);
-    const popupRef = useRef<HTMLDivElement>(null);
 
-    const [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>();
+  //const [data, setData] = useState({});
-
+  const mapDivRef = useRef<HTMLDivElement>(null);
-  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 [clickedCoordinate, setClickedCoordinate] = useState<Coordinate>();
-  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 mapRef = useRef<Map | null>(null);
-  const url_3: any = "https://geo.sandag.org/server/rest/services/Hosted/Zoning_Base_SD/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&resultType=standard&f=geojson";
+  const markerLayerRef = useRef<VectorLayer | null>(null);
-  const url_4: any = "https://geo.sandag.org/server/rest/services/Hosted/Water_Main_SD/FeatureServer/0/query?where=1%3D1&outFields=*&returnGeometry=true&resultType=standard&f=geojson";
+  const parcelLayerRef = useRef<VectorLayer | null>(null);
-
+  const sewerLayerRef = useRef<VectorLayer | null>(null);
-
-const vectorLayer: any = new VectorLayer({
-    source: new VectorSource({
-        format: new GeoJSON(),
-        url: url_2,
-style: new Style({
-    fill: new Fill({
-      color: 'red',
-    }),
-    stroke: new Stroke({
-      color: 'black',
-      width: 2.25
-    }),
-  }),
-    }),
-
-});
-const vectorsource_offset: any = new VectorSource();
-const vectorsource_offset_1: any = new VectorSource();
-const format: any = new GeoJSON();
- //vectorsource_offset.addFeature(format.readFeatures(data))
-
-const vectorLayer2: any = new VectorLayer({
-    source: vectorsource_offset,
-
-});
-const vectorLayer1: any = new VectorLayer({
-    source: new VectorSource({
-        format: new GeoJSON(),
-        url: url_1,
-attributions: ['Los Angeles GeoHub |']
-    }),
-
-});
-
-const vectorLayer_given: any = new VectorLayer();
-const vectorLayer_parcel: any = new VectorLayer();
-
-  // default view
-
-  const vecLayerCreation = async (url,length,map,vectorLayer) => {
-
-const vectorsource_layer: any = new VectorSource();
-const format: any = new GeoJSON();
-const urls: string[] = [];
-for(var i = 0; i < length; i = i + 2000){
-	  urls.push(url + `&resultOffset=${i}`);
-}
-console.log(urls)
-	    urls.forEach((url_each,index) => {
-  fetch(url_each)
-  .then(response => response.json())
-  .then(response => vectorsource_layer.addFeatures(format.readFeatures(response, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: map.getView().getProjection(),
-        })))
-  .catch(error => console.error(error));
-
-	    })
- //vectorsource_offset.addFeature(format.readFeatures(data))
-vectorLayer.setSource(vectorsource_layer)
-console.log(vectorLayer)
 
+useEffect(() => {
+  if (!mapRef.current) {
+    const map = new Map({
+      target: mapDivRef.current as HTMLDivElement,
+      layers: [new TileLayer({ source: new OSM() })],
+    });
+    mapRef.current = map;
 
+    map.on('click', (e) => {
+      setClickedCoordinate(e.coordinate);
+    });
   }
-    useEffect(() => {
 
-var ar = [-117.9112790,34.0296349]
+  if (address && address.length > 0) {
-    var proj_lat_long = fromLonLat(ar);
+    const lat = parseFloat(address[0].lat);
+    const lon = parseFloat(address[0].lon);
+    const coords = fromLonLat([lon, lat]);
 
-const overlay = new Overlay({
+    mapRef.current!.setView(new View({
-      element: popupRef.current as HTMLDivElement,
+      center: coords,
-      autoPan: {
+      zoom: 15,
-        animation: {
+    }));
-          duration: 250,
-        },
-      },
-    })
-        const map = new Map({
-            target: mapDivRef.current as HTMLDivElement,
-            layers: [
-                new TileLayer({
-                    source: new OSM(),
-                }),
-            ],
-view: new View({
-    center: [-13042228, 3857849],
-    //center: proj_lat_long,
-    zoom: 12,
-  }),
-  overlays: [overlay],
-	});
 
-//vecLayerCreation(url_4,3718,map,vectorLayer_given)
+    const markerFeature = new Feature({
-//vecLayerCreation(url_2,1088001,map,vectorLayer_parcel)
+      geometry: new Point(coords),
+    });
 
-	//map.addLayer(vectorLayer_given)
+    markerFeature.setStyle(new Style({
- 
+      image: new Icon({
-	//const true_we = map.setLayers([vectorLayer_parcel])
+        anchor: [0.5, 1],
-	//console.log(true_we)
+        src: 'https://cdn-icons-png.flaticon.com/512/684/684908.png',
+        scale: 0.05,
+      }),
+    }));
 
+    const markerSource = new VectorSource({ features: [markerFeature] });
+    const markerLayer = new VectorLayer({ source: markerSource });
 
-        map.on('click', (e) => {
+    if (markerLayerRef.current) {
-            setClickedCoordinate(e.coordinate);
+      mapRef.current!.removeLayer(markerLayerRef.current);
-// Get Coordinates of click
+    }
-      const coordinate = e.coordinate;
+    mapRef.current!.addLayer(markerLayer);
-      //const hdms = toStringHDMS(toLonLat(coordinate));
+    markerLayerRef.current = markerLayer;
 
-const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) {
+    const radius = 100;
-    return feature;
+    const parcelUrl = `https://geo.sandag.org/server/rest/services/Hosted/Parcels/FeatureServer/0/query?geometry=${lon},${lat}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=${radius}&units=esriSRUnit_Meter&outFields=*&returnGeometry=true&f=geojson`;
-  });
+    const sewerUrl = `https://geo.sandag.org/server/rest/services/Hosted/Sewer_Main_SD/FeatureServer/0/query?geometry=${lon},${lat}&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelIntersects&distance=${radius}&units=esriSRUnit_Meter&outFields=*&returnGeometry=true&f=geojson`;
-      
-      // Show popup at clicked position
-      overlay.setPosition(coordinate);
-      if(feature)
-      console.log("feature " + JSON.stringify(feature,null,'\t'));
 
-  if(feature && feature.get("subname")){
+    fetch(parcelUrl)
-      if (popupRef.current) {
+      .then((res) => res.json())
-        popupRef.current.innerHTML = `<p>Parcel</p><code>` +
+      .then((parcelData) => {
-		`<p>Parcel ID ${feature.get('parcelid')}</p>` + 
+        if (parcelLayerRef.current) {
-		`<p>APN ${feature.get('apn')}</p>` + 
+          mapRef.current?.removeLayer(parcelLayerRef.current);
-		`<p>Legldesc ${feature.get('legldesc')}</p>` + 
+        }
-		`<p>x \& y coord${feature.get('x_coord')} / ${feature.get('y_coord')}</p>` + 
-		`<p>${feature.get('situs_address')} ${feature.get('situs_street')}  ${feature.get('situs_suffix')} ${feature.get('situs_community')} ${feature.get('situs_zip')}</p>` + 
-		`<p> Unit Qty ${feature.get('unitqty')}</p>` + 
-		`<p> Usable sq ft. ${feature.get('usable_sq_feet')}</p>` + 
-		`<p> total lvg area ${feature.get('total_lvg_area')}</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>` + 
+        const parcelSource = new VectorSource({
-		`<p>${feature.get('addrzip')}</p>` + 
+          features: new GeoJSON().readFeatures(parcelData, {
-		`<p>${feature.get('community')}</p>` + 
+            featureProjection: 'EPSG:3857',
-		 `</code>`;
+          }),
-      }
-  }
-  else{
-      if (popupmef.current) {
-        popupRef.current.innerHTML = `<p>You clicked here:</p><code>` +
-		`<p>Not a parcel or Address Point</p>` + 
-		 `</code>`;
-      }
-
-
-  }
-      
-      overlay.setPosition(coordinate)
         });
 
+        const parcelLayer = new VectorLayer({
+          source: parcelSource,
+          style: new Style({
+            stroke: new Stroke({ color: 'green', width: 1.5 }),
+            fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' }),
+          }),
+        });
 
-    // Converting lat long to mercator projection
+        mapRef.current?.addLayer(parcelLayer);
- 
+        parcelLayerRef.current = parcelLayer;
-    // Zoom to lat lon
+      });
-    if(address){
-	    console.log("asdf" + address[0].lat)
 
-var ar = [address[0].lat, address[0].lon]
+    fetch(sewerUrl)
-    var proj_lat_long = fromLonLat(ar);
+      .then((res) => res.json())
-    map.setView(
+      .then((sewerData) => {
-        new View({
+        if (sewerLayerRef.current) {
-        center: proj_lat_long,
+          mapRef.current?.removeLayer(sewerLayerRef.current);
-        zoom: 17
+        }
-	})
-    )
-    }
- // fit view to geometry of geojson feature with padding
-    //def_view.fit(geoJSONFeatures[0].getGeometry().getExtent(), { padding: [100, 100, 100, 100]});
 
-        return () => map.setTarget(undefined);
+        const sewerSource = new VectorSource({
-    }, [address]);
+          features: new GeoJSON().readFeatures(sewerData, {
+            featureProjection: 'EPSG:3857',
+          }),
+        });
 
-    return (
+        const sewerLayer = new VectorLayer({
-        <>
+          source: sewerSource,
-            <div ref={mapDivRef} className='map'>
+          style: new Style({
-    <div className="container">
+            stroke: new Stroke({ color: 'blue', width: 2 }),
-      <form onSubmit={submitForm}>
+          }),
-        <input
+        });
-          value={term}
+
-          onChange={(e) => setTerm(e.target.value)}
+        mapRef.current?.addLayer(sewerLayer);
-          type="text"
+        sewerLayerRef.current = sewerLayer;
-          placeholder="Enter a term"
+      });
-          className="input"
+  }
-        />
+}, [address]);
-        <button type="submit" className="btn">Submit</button>
+
-      </form>
+
-    </div>
+  //UI Downstairs
-<div ref={popupRef} className="ol-popup"/>
+  return (
-	    </div>
+    <>
-            {clickedCoordinate && (
+      <div ref={mapDivRef} className='map'>
-                <span className='coordinates-container'>
+        <div className="container">
-                    You clicked at: {clickedCoordinate[0]} /{' '} {clickedCoordinate[1]}
+          <form onSubmit={submitForm}>
-                </span>
+            <input
-            )}
+              value={term}
-        </>
+              onChange={(e) => setTerm(e.target.value)}
-    );
+              type="text"
+              placeholder="Enter a term"
+              className="input"
+            />
+            <button type="submit" className="btn">Submit</button>
+          </form>
+        </div>
+      </div>
+      {clickedCoordinate && (
+        <span className='coordinates-container'>
+          You clicked at: {clickedCoordinate[0]} /{' '} {clickedCoordinate[1]}
+        </span>
+      )}
+    </>
+  );
 };
 
 export default OpenLayersMap;

src/components/SearchBar.tsx

@@ -14,7 +14,7 @@ const SearchBar = () => {
     console.log("print");
   fetch(`https://nominatim.openstreetmap.org/search?q=${term}&format=json&polygon=1&addressdetails=1`)
   .then(response => response.json())
-  .then(respone => console.log("printed address: " + response))
+  .then(response => console.log("printed address: " + response))
   }
 
     useEffect(() => {
@@ -34,7 +34,7 @@ const SearchBar = () => {
           placeholder="Enter a term"
           className="input"
         />
-        <button type="submit" className="btn">Submi/button>
+        <button type="submit" className="btn">Submit</button>
       </form>
     </div>
   );