diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 33bd0ef..0aeb0dc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,9 @@
         "@fortawesome/fontawesome-free": "^6.2.0",
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "@tsconfig/svelte": "^3.0.0",
+        "@types/ol": "^6.5.3",
         "bulma": "^0.9.4",
+        "ol": "^7.1.0",
         "sass": "^1.53.0",
         "svelte": "^3.49.0",
         "svelte-check": "^2.8.0",
@@ -73,6 +75,49 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-style-spec": {
+      "version": "13.26.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.26.0.tgz",
+      "integrity": "sha512-Ya1WiNz1qYau7xPYPQUbionrw9pjgZAIebGQdDXgwJuSAWeVCr02P7rqbYFHbXqX5TeAaq4qVpcaJb9oZtgaVQ==",
+      "dev": true,
+      "dependencies": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      },
+      "bin": {
+        "gl-style-composite": "bin/gl-style-composite.js",
+        "gl-style-format": "bin/gl-style-format.js",
+        "gl-style-migrate": "bin/gl-style-migrate.js",
+        "gl-style-validate": "bin/gl-style-validate.js"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==",
+      "dev": true
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==",
+      "dev": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -108,6 +153,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@petamoriken/float16": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
+      "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg==",
+      "dev": true
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -154,18 +205,48 @@
       "integrity": "sha512-pYrtLtOwku/7r1i9AMONsJMVYAtk3hzOfiGNekhtq5tYBGA7unMve8RvUclKLMT3PrihvJqUmzsRGh0RP84hKg==",
       "dev": true
     },
+    "node_modules/@types/arcgis-rest-api": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/@types/arcgis-rest-api/-/arcgis-rest-api-10.4.5.tgz",
+      "integrity": "sha512-MhpTj3aaURIFhK6pBRF50yCHW5TpbeuC1E81juovfNesSOshsQnCzludhpBhIr2pNzplTBlfzrT7RKiLZ5F3Tw==",
+      "dev": true
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "18.7.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.14.tgz",
       "integrity": "sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA==",
       "dev": true
     },
+    "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,
+      "dependencies": {
+        "@types/arcgis-rest-api": "*",
+        "@types/geojson": "*",
+        "@types/rbush": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
     "node_modules/@types/pug": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
       "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
       "dev": true
     },
+    "node_modules/@types/rbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-3.0.0.tgz",
+      "integrity": "sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg==",
+      "dev": true
+    },
     "node_modules/@types/sass": {
       "version": "1.43.1",
       "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
@@ -175,6 +256,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/topojson-specification": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.2.tgz",
+      "integrity": "sha512-SGc1NdX9g3UGDp6S+p+uyG+Z8CehS51sUJ9bejA25Xgn2kkAguILk6J9nxXK+0M/mbTBN7ypMA7+4HVLNMJ8ag==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -282,6 +372,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
+      "dev": true
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -323,6 +419,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "dev": true
+    },
     "node_modules/es6-promise": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -754,6 +856,25 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "node_modules/geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "dev": true,
+      "dependencies": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      },
+      "engines": {
+        "browsers": "defaults",
+        "node": ">=10.19"
+      }
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -804,6 +925,26 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -896,6 +1037,12 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
+      "dev": true
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
@@ -905,6 +1052,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
+      "dev": true
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -914,6 +1067,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.26.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.3.tgz",
@@ -926,6 +1091,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/mapbox-to-css-font": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
+      "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow==",
+      "dev": true
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1033,6 +1204,33 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ol": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.1.0.tgz",
+      "integrity": "sha512-mAeV5Ca4mFhYaJoGWNZnIMN5VNnFTf63FgZjBiYu/DjQDGKNsD5QyvvqVziioVdOOgl6b8rPB/ypj2XNBinPwA==",
+      "dev": true,
+      "dependencies": {
+        "earcut": "^2.2.3",
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "9.1.0",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/openlayers"
+      }
+    },
+    "node_modules/ol-mapbox-style": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz",
+      "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==",
+      "dev": true,
+      "dependencies": {
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1042,6 +1240,12 @@
         "wrappy": "1"
       }
     },
+    "node_modules/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==",
+      "dev": true
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -1054,6 +1258,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==",
+      "dev": true
+    },
     "node_modules/pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -1079,6 +1289,19 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dev": true,
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -1121,6 +1344,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+      "dev": true
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1141,6 +1370,21 @@
         }
       ]
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "dev": true
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dev": true,
+      "dependencies": {
+        "quickselect": "^2.0.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1179,6 +1423,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dev": true,
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -1239,6 +1492,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "dev": true
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -1295,6 +1554,37 @@
         "sorcery": "bin/index.js"
       }
     },
+    "node_modules/sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "dev": true,
+      "dependencies": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -1551,11 +1841,29 @@
         }
       }
     },
+    "node_modules/web-worker": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
+      "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==",
+      "dev": true
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
+    },
+    "node_modules/xml-utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.2.0.tgz",
+      "integrity": "sha512-z4unVPZruEDC3tfyd7wvWfjclnMz34iwQpv8H28H+qREpjKkR083MBvcrWXfJrIcrSmHR5ghguOcgQqWdnBpVA==",
+      "dev": true
+    },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     }
   },
   "dependencies": {
@@ -1594,6 +1902,40 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "dev": true
+    },
+    "@mapbox/mapbox-gl-style-spec": {
+      "version": "13.26.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.26.0.tgz",
+      "integrity": "sha512-Ya1WiNz1qYau7xPYPQUbionrw9pjgZAIebGQdDXgwJuSAWeVCr02P7rqbYFHbXqX5TeAaq4qVpcaJb9oZtgaVQ==",
+      "dev": true,
+      "requires": {
+        "@mapbox/jsonlint-lines-primitives": "~2.0.2",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/unitbezier": "^0.0.0",
+        "csscolorparser": "~1.0.2",
+        "json-stringify-pretty-compact": "^2.0.0",
+        "minimist": "^1.2.6",
+        "rw": "^1.3.3",
+        "sort-object": "^0.3.2"
+      }
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==",
+      "dev": true
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==",
+      "dev": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1620,6 +1962,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@petamoriken/float16": {
+      "version": "3.6.6",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.6.6.tgz",
+      "integrity": "sha512-3MUulwMtsdCA9lw8a/Kc0XDBJJVCkYTQ5aGd+///TbfkOMXoOGAzzoiYKwPEsLYZv7He7fKJ/mCacqKOO7REyg==",
+      "dev": true
+    },
     "@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -1650,18 +1998,48 @@
       "integrity": "sha512-pYrtLtOwku/7r1i9AMONsJMVYAtk3hzOfiGNekhtq5tYBGA7unMve8RvUclKLMT3PrihvJqUmzsRGh0RP84hKg==",
       "dev": true
     },
+    "@types/arcgis-rest-api": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/@types/arcgis-rest-api/-/arcgis-rest-api-10.4.5.tgz",
+      "integrity": "sha512-MhpTj3aaURIFhK6pBRF50yCHW5TpbeuC1E81juovfNesSOshsQnCzludhpBhIr2pNzplTBlfzrT7RKiLZ5F3Tw==",
+      "dev": true
+    },
+    "@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
     "@types/node": {
       "version": "18.7.14",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.7.14.tgz",
       "integrity": "sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA==",
       "dev": true
     },
+    "@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,
+      "requires": {
+        "@types/arcgis-rest-api": "*",
+        "@types/geojson": "*",
+        "@types/rbush": "*",
+        "@types/topojson-specification": "*"
+      }
+    },
     "@types/pug": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
       "integrity": "sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==",
       "dev": true
     },
+    "@types/rbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-3.0.0.tgz",
+      "integrity": "sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg==",
+      "dev": true
+    },
     "@types/sass": {
       "version": "1.43.1",
       "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
@@ -1671,6 +2049,15 @@
         "@types/node": "*"
       }
     },
+    "@types/topojson-specification": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/topojson-specification/-/topojson-specification-1.0.2.tgz",
+      "integrity": "sha512-SGc1NdX9g3UGDp6S+p+uyG+Z8CehS51sUJ9bejA25Xgn2kkAguILk6J9nxXK+0M/mbTBN7ypMA7+4HVLNMJ8ag==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
     "anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -1752,6 +2139,12 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
+      "dev": true
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1779,6 +2172,12 @@
       "integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
       "dev": true
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "dev": true
+    },
     "es6-promise": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
@@ -2010,6 +2409,21 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "geotiff": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
+      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "dev": true,
+      "requires": {
+        "@petamoriken/float16": "^3.4.7",
+        "lerc": "^3.0.0",
+        "lru-cache": "^6.0.0",
+        "pako": "^2.0.4",
+        "parse-headers": "^2.0.2",
+        "web-worker": "^1.2.0",
+        "xml-utils": "^1.0.2"
+      }
+    },
     "glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2048,6 +2462,12 @@
         "function-bind": "^1.1.1"
       }
     },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "dev": true
+    },
     "immutable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
@@ -2119,12 +2539,24 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
+      "dev": true
+    },
     "kleur": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
       "dev": true
     },
+    "lerc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
+      "dev": true
+    },
     "lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -2134,6 +2566,15 @@
         "tslib": "^2.0.3"
       }
     },
+    "lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "requires": {
+        "yallist": "^4.0.0"
+      }
+    },
     "magic-string": {
       "version": "0.26.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.3.tgz",
@@ -2143,6 +2584,12 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "mapbox-to-css-font": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.1.tgz",
+      "integrity": "sha512-QQ/iKiM43DM9+aujTL45Iz5o7gDeSFmy4LPl3HZmNcwCE++NxGazf+yFpY+wCb+YS23sDa1ghpo3zrNFOcHlow==",
+      "dev": true
+    },
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2223,6 +2670,29 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
+    "ol": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-7.1.0.tgz",
+      "integrity": "sha512-mAeV5Ca4mFhYaJoGWNZnIMN5VNnFTf63FgZjBiYu/DjQDGKNsD5QyvvqVziioVdOOgl6b8rPB/ypj2XNBinPwA==",
+      "dev": true,
+      "requires": {
+        "earcut": "^2.2.3",
+        "geotiff": "2.0.4",
+        "ol-mapbox-style": "9.1.0",
+        "pbf": "3.2.1",
+        "rbush": "^3.0.1"
+      }
+    },
+    "ol-mapbox-style": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-9.1.0.tgz",
+      "integrity": "sha512-R/XE6FdviaXNdnSw6ItHSEreMtQU68cwQCGv4Kl8yG0V1dZhnI5JWr8IOphJwffPVxfWTCnJb5aALGSB89MvhA==",
+      "dev": true,
+      "requires": {
+        "@mapbox/mapbox-gl-style-spec": "^13.23.1",
+        "mapbox-to-css-font": "^2.4.1"
+      }
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2232,6 +2702,12 @@
         "wrappy": "1"
       }
     },
+    "pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg==",
+      "dev": true
+    },
     "parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2241,6 +2717,12 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-headers": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==",
+      "dev": true
+    },
     "pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -2263,6 +2745,16 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dev": true,
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2286,12 +2778,33 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+      "dev": true
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "dev": true
+    },
+    "rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dev": true,
+      "requires": {
+        "quickselect": "^2.0.0"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2318,6 +2831,15 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dev": true,
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -2351,6 +2873,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "dev": true
+    },
     "sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -2395,6 +2923,28 @@
         "sourcemap-codec": "^1.3.0"
       }
     },
+    "sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha512-jBgdDd+rQ+HkZF2/OHCmace5dvpos/aWQpcxuyRs9QUbPRnkEJmYVo81PIGpjIdpOcsnJ4rGjStfDHsbn+UVyw==",
+      "dev": true
+    },
+    "sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha512-jfZacW5SKOP97BF5rX5kQfJmRVZP5/adDUTY8fCSPvNcXDVpUEe2pr/iKGlcyZzchRJZrswnp68fgk3qBXgkJw==",
+      "dev": true
+    },
+    "sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha512-aAQiEdqFTTdsvUFxXm3umdo04J7MRljoVGbBlkH7BgNsMvVNAJyGj7C/wV1A8wHWAJj/YikeZbfuCKqhggNWGA==",
+      "dev": true,
+      "requires": {
+        "sort-asc": "^0.1.0",
+        "sort-desc": "^0.1.1"
+      }
+    },
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -2529,11 +3079,29 @@
         "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
       }
     },
+    "web-worker": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
+      "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==",
+      "dev": true
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
+    },
+    "xml-utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.2.0.tgz",
+      "integrity": "sha512-z4unVPZruEDC3tfyd7wvWfjclnMz34iwQpv8H28H+qREpjKkR083MBvcrWXfJrIcrSmHR5ghguOcgQqWdnBpVA==",
+      "dev": true
+    },
+    "yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 5564b0a..352ff29 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,7 +13,9 @@
     "@fortawesome/fontawesome-free": "^6.2.0",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
+    "@types/ol": "^6.5.3",
     "bulma": "^0.9.4",
+    "ol": "^7.1.0",
     "sass": "^1.53.0",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 310bb22..f6913ef 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -5,6 +5,10 @@
   import { user } from "./stores";
 
   import Navbar from "./Navbar.svelte";
+  import P404 from "./pages/P404.svelte";
+  import Mining from "./pages/mining/Mining.svelte";
+  import Footer from "./Footer.svelte";
+  import BaseLayout from "./BaseLayout.svelte";
 
   onMount(async () => {
     const res = await fetch("/user/me");
@@ -13,16 +17,16 @@
 </script>
 
 <Router>
-  <Navbar />
-
-  <div class="is-flex-grow-1">
-    <Route path="/">
+  <Route path="/">
+    <BaseLayout>
       <section class="section">
         <p>Hallo i bims 1 frontend</p>
       </section>
-    </Route>
+    </BaseLayout>
+  </Route>
 
-    <Route path="/foo">
+  <Route path="/foo">
+    <BaseLayout>
       <section class="hero is-danger is-fullheight">
         <div class="hero-body">
           <div class="">
@@ -31,35 +35,26 @@
           </div>
         </div>
       </section>
-    </Route>
+    </BaseLayout>
+  </Route>
 
-    <Route path="/bar">bar</Route>
+  <Route path="/bar">
+    <BaseLayout>bar</BaseLayout>
+  </Route>
 
-    <Route path="/monitoring">monitoring</Route>
+  <Route path="/monitoring">
+    <BaseLayout>monitoring</BaseLayout>
+  </Route>
 
-    <Route path="/mining">mining</Route>
+  <Route path="/mining">
+    <Mining />
+  </Route>
 
-    <Route path="/stats">stats</Route>
+  <Route path="/stats">
+    <BaseLayout>stats</BaseLayout>
+  </Route>
 
-    <Route>
-      <section class="section">
-        <div class="container has-text-centered">
-          <h1 class="title is-1">404</h1>
-          <h2 class="subtitle is-5">
-            The page you are trying to reach either
-            <strong>does not exist</strong>
-            or
-            <strong>you are not authorized</strong>
-            to view it.
-          </h2>
-        </div>
-      </section>
-    </Route>
-  </div>
-
-  <footer class="footer">
-    <div class="has-text-centered">
-      Test footer please ignore
-    </div>
-  </footer>
+  <Route>
+    <BaseLayout><P404 /></BaseLayout>
+  </Route>
 </Router>
diff --git a/frontend/src/BaseLayout.svelte b/frontend/src/BaseLayout.svelte
new file mode 100644
index 0000000..1513732
--- /dev/null
+++ b/frontend/src/BaseLayout.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import Footer from "./Footer.svelte";
+    import Navbar from "./Navbar.svelte";
+</script>
+
+<div class="main-container">
+    <Navbar />
+    <div class="is-flex-grow-1">
+        <slot />
+    </div>
+    <Footer />
+</div>
+
+<style>
+    .main-container {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+    }
+</style>
diff --git a/frontend/src/Footer.svelte b/frontend/src/Footer.svelte
new file mode 100644
index 0000000..cf23763
--- /dev/null
+++ b/frontend/src/Footer.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { useLocation } from "svelte-navigator";
+    const location = useLocation();
+</script>
+
+{#if $location.pathname !== "/mining"}
+<footer class="footer">
+    <div class="has-text-centered">
+        <p>Test footer please ignore</p>
+        <p>location: {$location.pathname}</p>
+    </div>
+</footer>
+{/if}
\ No newline at end of file
diff --git a/frontend/src/app.scss b/frontend/src/app.scss
index e8cb75a..53bb026 100644
--- a/frontend/src/app.scss
+++ b/frontend/src/app.scss
@@ -17,12 +17,6 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "@fortawesome/fontawesome-free/scss/brands.scss";
 @import "@fortawesome/fontawesome-free/scss/v4-shims.scss";
 
-body {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
 // https://github.com/mefechoel/svelte-navigator#what-are-the-weird-rectangles-around-the-headings-in-my-app
 h1:focus {
     outline: none;
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 7e2d26a..7ba4451 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,6 +1,8 @@
 import 'vite/modulepreload-polyfill'
 
+import "ol/ol.css";
 import "./app.scss";
+
 import App from "./App.svelte";
 
 const app = new App({
diff --git a/frontend/src/pages/P404.svelte b/frontend/src/pages/P404.svelte
new file mode 100644
index 0000000..4965aa6
--- /dev/null
+++ b/frontend/src/pages/P404.svelte
@@ -0,0 +1,12 @@
+<section class="section">
+    <div class="container has-text-centered">
+        <h1 class="title is-1">404</h1>
+        <h2 class="subtitle is-5">
+            The page you are trying to reach either
+            <strong>does not exist</strong>
+            or
+            <strong>you are not authorized</strong>
+            to view it.
+        </h2>
+    </div>
+</section>
diff --git a/frontend/src/pages/mining/Mining.svelte b/frontend/src/pages/mining/Mining.svelte
new file mode 100644
index 0000000..b8d8ae7
--- /dev/null
+++ b/frontend/src/pages/mining/Mining.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+    import Navbar from "../../Navbar.svelte";
+
+    import {
+        Unmined,
+        type UnminedOptions,
+        type UnminedRegions,
+    } from "./unmined";
+
+    export let id = "map";
+
+    let unmined = new Unmined();
+
+    type Metadata = {
+        properties: UnminedOptions;
+        regions: UnminedRegions;
+    };
+
+    async function get_metadata() {
+        let resp = await fetch("map/metadata.js");
+        let code = await resp.text();
+        let meta = Function(code).call({}); // TODO possibly vulnerable to prototype pollution
+        return meta;
+    }
+
+    function setupMap(node: HTMLDivElement, metadata: Metadata) {
+        unmined.map(node.id, metadata.properties, metadata.regions);
+
+        return {
+            destroy() {
+                if (unmined.openlayersMap) {
+                    unmined.openlayersMap.setTarget(null);
+                    unmined.openlayersMap = null;
+                }
+            },
+        };
+    }
+</script>
+
+<div class="map-outer">
+    <Navbar />
+    {#await get_metadata() then metadata}
+        <div class="map-target" {id} use:setupMap={metadata} />
+    {:catch err}
+        <div class="container">
+            <article class="message is-danger mt-5">
+                <div class="message-header">
+                    <p>Error loading map</p>
+                </div>
+                <div class="message-body">
+                    <p>Something went wrong:</p>
+                    <figure>
+                        <pre>{err}</pre>
+                    </figure>
+                </div>
+            </article>
+        </div>
+    {/await}
+</div>
+
+<style>
+    .map-outer {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+    .map-target {
+        flex-grow: 1;
+        background-color: #e2e2e2;
+    }
+</style>
diff --git a/frontend/src/pages/mining/unmined.ts b/frontend/src/pages/mining/unmined.ts
new file mode 100644
index 0000000..5fb3693
--- /dev/null
+++ b/frontend/src/pages/mining/unmined.ts
@@ -0,0 +1,256 @@
+import { boundingExtent } from "ol/extent";
+import { addCoordinateTransforms, Projection, transform } from "ol/proj";
+import TileGrid from "ol/tilegrid/TileGrid";
+import { Tile } from "ol/layer";
+import XYZ from "ol/source/XYZ";
+import MousePosition from "ol/control/MousePosition";
+import { createStringXY } from "ol/coordinate";
+import OlMap from "ol/Map";
+import { defaults as controlDefaults } from "ol/control/defaults";
+import { Feature, View } from "ol";
+import { Point } from "ol/geom";
+import Style from "ol/style/Style";
+import Icon from "ol/style/Icon";
+import Text from "ol/style/Text";
+import Fill from "ol/style/Fill";
+import SourceVector from "ol/source/Vector";
+import LayerVector from "ol/layer/Vector";
+
+export type UnminedOptions = {
+    minZoom: number;
+    maxZoom: number;
+    defaultZoom: number;
+    imageFormat: string;
+    minRegionX: number;
+    minRegionZ: number;
+    maxRegionX: number;
+    maxRegionZ: number;
+    worldName: string;
+    background: string;
+    markers: Array<any>;
+}
+
+export type UnminedRegions = {}[];
+
+export class Unmined {
+    
+    openlayersMap: OlMap;
+
+    map(mapId: string, options: UnminedOptions, regions: any[]) {
+        const dpiScale = window.devicePixelRatio ?? 1.0;
+
+        const worldMinX = options.minRegionX * 512;
+        const worldMinY = options.minRegionZ * 512;
+        const worldWidth = (options.maxRegionX + 1 - options.minRegionX) * 512;
+        const worldHeight = (options.maxRegionZ + 1 - options.minRegionZ) * 512;
+
+        const worldTileSize = 256;
+
+        const worldMaxZoomFactor = Math.pow(2, options.maxZoom);
+
+        // left, bottom, right, top, Y is negated
+        var mapExtent = boundingExtent([
+            [worldMinX * worldMaxZoomFactor, -(worldMinY + worldHeight) * worldMaxZoomFactor],
+            [(worldMinX + worldWidth) * worldMaxZoomFactor, -worldMinY * worldMaxZoomFactor]]);
+
+        var viewProjection = new Projection({
+            code: 'VIEW',
+            units: 'pixels',
+        });
+
+        var dataProjection = new Projection({
+            code: 'DATA',
+            units: 'pixels',
+        });
+
+        // Coordinate transformation between view and data
+        // OpenLayers Y is positive up, world Y is positive down
+        addCoordinateTransforms(viewProjection, dataProjection,
+            function (coordinate) {
+                return [coordinate[0], -coordinate[1]];
+            },
+            function (coordinate) {
+                return [coordinate[0], -coordinate[1]];
+            });
+
+        const mapZoomLevels = options.maxZoom - options.minZoom;
+        // Resolution for each OpenLayers zoom level        
+        var resolutions = new Array(mapZoomLevels + 1);
+        for (let z = 0; z < mapZoomLevels + 1; ++z) {
+            resolutions[mapZoomLevels - z] = Math.pow(2, z) * dpiScale / worldMaxZoomFactor;
+        }
+
+        var tileGrid = new TileGrid({
+            extent: mapExtent,
+            origin: [0, 0],
+            resolutions: resolutions,
+            tileSize: worldTileSize / dpiScale
+        });
+
+        var unminedLayer =
+            new Tile({
+                source: new XYZ({
+                    projection: viewProjection,
+                    tileGrid: tileGrid,
+                    tilePixelRatio: dpiScale,
+                    tileSize: worldTileSize / dpiScale,
+
+                    tileUrlFunction: function (coordinate) {
+                        const worldZoom = -(mapZoomLevels - coordinate[0]) + options.maxZoom;
+                        const worldZoomFactor = Math.pow(2, worldZoom);
+
+                        const minTileX = Math.floor(worldMinX * worldZoomFactor / worldTileSize);
+                        const minTileY = Math.floor(worldMinY * worldZoomFactor / worldTileSize);
+                        const maxTileX = Math.ceil((worldMinX + worldWidth) * worldZoomFactor / worldTileSize) - 1;
+                        const maxTileY = Math.ceil((worldMinY + worldHeight) * worldZoomFactor / worldTileSize) - 1;
+
+                        const tileX = coordinate[1];
+                        const tileY = coordinate[2];
+
+                        const tileBlockSize = worldTileSize / worldZoomFactor;
+                        const tileBlockPoint = {
+                            x: tileX * tileBlockSize,
+                            z: tileY * tileBlockSize
+                        };
+
+                        const hasTile = function () {
+                            const tileRegionPoint = {
+                                x: Math.floor(tileBlockPoint.x / 512),
+                                z: Math.floor(tileBlockPoint.z / 512)
+                            };
+                            const tileRegionSize = Math.ceil(tileBlockSize / 512);
+
+                            for (let x = tileRegionPoint.x; x < tileRegionPoint.x + tileRegionSize; x++) {
+                                for (let z = tileRegionPoint.z; z < tileRegionPoint.z + tileRegionSize; z++) {
+                                    const group = {
+                                        x: Math.floor(x / 32),
+                                        z: Math.floor(z / 32)
+                                    };
+                                    const regionMap = regions.find(e => e.x == group.x && e.z == group.z);
+                                    if (regionMap) {
+                                        const relX = x - group.x * 32;
+                                        const relZ = z - group.z * 32;
+                                        const inx = relZ * 32 + relX;
+                                        var b = regionMap.m[Math.floor(inx / 32)];
+                                        var bit = inx % 32;
+                                        var found = (b & (1 << bit)) != 0;
+                                        if (found) return true;
+                                    }
+                                }
+                            }
+                            return false;
+                        };
+
+                        if (tileX >= minTileX
+                            && tileY >= minTileY
+                            && tileX <= maxTileX
+                            && tileY <= maxTileY
+                            && hasTile()) {
+                            const z = worldZoom,
+                                yd = Math.floor(tileY / 10),
+                                xd = Math.floor(tileX / 10),
+                                y = tileY,
+                                x = tileX
+                            const url = `map/tiles/zoom.${z}/${xd}/${yd}/tile.${x}.${y}.${options.imageFormat}`
+                            return url;
+                        }
+                        else
+                            return undefined;
+                    }
+                })
+            });
+
+        var mousePositionControl = new MousePosition({
+            coordinateFormat: createStringXY(0),
+            projection: dataProjection
+        });
+
+        var map = new OlMap({
+            target: mapId,
+            controls: controlDefaults().extend([
+                mousePositionControl
+            ]),
+            layers: [
+                unminedLayer,
+                /*
+                new ol.layer.Tile({
+                    source: new ol.source.TileDebug({
+                        tileGrid: unminedTileGrid,
+                        projection: viewProjection
+                    })
+                })
+                */
+
+            ],
+            view: new View({
+                center: [0, 0],
+                extent: mapExtent,
+                projection: viewProjection,
+                resolutions: tileGrid.getResolutions(),
+                maxZoom: mapZoomLevels,
+                zoom: mapZoomLevels - options.maxZoom,
+                constrainResolution: true,
+                showFullExtent: true,
+                constrainOnlyCenter: true
+            })
+        });
+
+        if (options.markers) {
+            var markersLayer = this.createMarkersLayer(options.markers, dataProjection, viewProjection);
+            map.addLayer(markersLayer);
+        }
+
+        if (options.background) {
+            document.getElementById(mapId).style.backgroundColor = options.background;
+
+        }
+
+        this.openlayersMap = map;
+    }
+
+    createMarkersLayer(markers, dataProjection, viewProjection) {
+        var features = [];
+
+        for (var i = 0; i < markers.length; i++) {
+            var item = markers[i];
+            var longitude = item.x;
+            var latitude = item.z;
+
+            var feature = new Feature({
+                geometry: new Point(transform([longitude, latitude], dataProjection, viewProjection))
+            });
+
+            var style = new Style();
+            if (item.image)
+                style.setImage(new Icon({
+                    src: item.image,
+                    anchor: item.imageAnchor,
+                    scale: item.imageScale
+                }));
+
+            if (item.text)
+                style.setText(new Text({
+                    text: item.text,
+                    font: item.font,
+                    offsetX: item.offsetX,
+                    offsetY: item.offsetY,
+                    fill: new Fill({
+                        color: item.textColor
+                    })
+                }));
+
+            feature.setStyle(style);
+
+            features.push(feature);
+        }
+
+        var vectorSource = new SourceVector({
+            features: features
+        });
+
+        var vectorLayer = new LayerVector({
+            source: vectorSource
+        });
+        return vectorLayer;
+    }
+}
\ No newline at end of file
diff --git a/server/.gitignore b/server/.gitignore
index 92d32d8..20471dc 100644
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -1,4 +1,4 @@
 .venv
 secret.env
-tiles
+unmined-out
 **/__pycache__
diff --git a/server/server/__init__.py b/server/server/__init__.py
index 7366b05..047e917 100644
--- a/server/server/__init__.py
+++ b/server/server/__init__.py
@@ -1,14 +1,18 @@
 import json
 from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse
-from jinja2 import Environment, FileSystemLoader, select_autoescape
 
 from .settings import settings
 from .user import user_auth
+from .map_tiles import map_tiles
+from .templates import j2env
 
 app = FastAPI()
 
 app.mount("/user/", user_auth)
+app.mount("/map/", map_tiles)
+
+frontend = FastAPI()
 
 manifest = dict()
 if not settings.dev_mode:
@@ -18,17 +22,13 @@ if not settings.dev_mode:
         manifest = json.load(f)
 
 
-j2env = Environment(
-    loader=FileSystemLoader("templates"),
-    autoescape=select_autoescape(),
-)
 index = j2env.get_template("index.html").render(
     dev_mode=settings.dev_mode,
     manifest=manifest,
 )
 
 
-@app.middleware("http")
+@frontend.middleware("http")
 async def index_catch_all(request: Request, call_next):
     response = await call_next(request)
 
@@ -39,4 +39,6 @@ async def index_catch_all(request: Request, call_next):
 
 
 if not settings.dev_mode:
-    app.mount("/", StaticFiles(directory=settings.frontend_path))
+    frontend.mount("/", StaticFiles(directory=settings.frontend_path))
+
+app.mount("/", frontend)
diff --git a/server/server/map_tiles.py b/server/server/map_tiles.py
new file mode 100644
index 0000000..adb8345
--- /dev/null
+++ b/server/server/map_tiles.py
@@ -0,0 +1,37 @@
+from fastapi import FastAPI, Response
+from fastapi.staticfiles import StaticFiles
+
+from .settings import settings
+from .templates import j2env
+
+map_tiles = FastAPI()
+
+map_tiles.mount("/tiles/", StaticFiles(directory=f"{settings.unmined_out_path}/tiles"))
+
+
+class MetadataJsResponse(Response):
+    media_type = "text/javascript"
+
+
+MAP_PROPS_FILE = f"{settings.unmined_out_path}/unmined.map.properties.js"
+MAP_REGIONS_FILE = f"{settings.unmined_out_path}/unmined.map.regions.js"
+
+
+def parse_metadata():
+    with open(MAP_PROPS_FILE, "r") as f:
+        map_props = f.read()
+    with open(MAP_REGIONS_FILE, "r") as f:
+        map_regions = f.read()
+
+    return j2env.get_template("metadata.js").render(
+        props_file=MAP_PROPS_FILE,
+        map_props=map_props,
+        regions_file=MAP_REGIONS_FILE,
+        map_regions=map_regions,
+    )
+
+
+@map_tiles.get("/metadata.js", response_class=MetadataJsResponse)
+async def get_metadata():
+    # TODO cache
+    return parse_metadata()
diff --git a/server/server/settings.py b/server/server/settings.py
index 6674a9c..6191c93 100644
--- a/server/server/settings.py
+++ b/server/server/settings.py
@@ -6,6 +6,7 @@ class Settings(BaseSettings):
     dev_npm_port: int = 5173
 
     frontend_path: str = "frontend"
+    unmined_out_path: str = "unmined-out"
 
 
 settings = Settings()
diff --git a/server/server/templates.py b/server/server/templates.py
new file mode 100644
index 0000000..fb134e6
--- /dev/null
+++ b/server/server/templates.py
@@ -0,0 +1,6 @@
+from jinja2 import Environment, FileSystemLoader, select_autoescape
+
+j2env = Environment(
+    loader=FileSystemLoader("templates"),
+    autoescape=select_autoescape(),
+)
\ No newline at end of file
diff --git a/server/templates/metadata.js b/server/templates/metadata.js
new file mode 100644
index 0000000..619cafe
--- /dev/null
+++ b/server/templates/metadata.js
@@ -0,0 +1,10 @@
+/* {{props_file}} */
+{{map_props}}
+
+/* {{regions_file}} */
+{{map_regions}}
+
+return {
+    properties: UnminedMapProperties,
+    regions: UnminedRegions,
+}
\ No newline at end of file