Improve

.gitignore

@@ -10,7 +10,6 @@ html/norton*.html
 .vscode
 
 # Data
-etl/
 etl/cache/*
 etl/images/*
 etl/*.geojson

app/package-lock.json

@@ -25,6 +25,7 @@
         "geojson": "^0.5.0",
         "leaflet": "^1.7.1",
         "lodash": "^4.17.21",
+        "mapbox-gl": "^2.15.0",
         "mapnik": "^4.5.9",
         "markdown-to-jsx": "^7.1.3",
         "node-fs": "^0.1.7",
@@ -2556,6 +2557,42 @@
         "react": ">=16.3.0"
       }
     },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/geojson-rewind/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.8.tgz",
@@ -2575,6 +2612,11 @@
         "node-pre-gyp": "bin/node-pre-gyp"
       }
     },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ=="
+    },
     "node_modules/@mapbox/sphericalmercator": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@mapbox/sphericalmercator/-/sphericalmercator-1.2.0.tgz",
@@ -2586,6 +2628,32 @@
         "xyz": "bin/xyz.js"
       }
     },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -5678,6 +5746,11 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6578,6 +6651,11 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -8264,6 +8342,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -8340,6 +8423,11 @@
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
       "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "node_modules/glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -8450,6 +8538,11 @@
       "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
       "dev": true
     },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "node_modules/growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -10542,6 +10635,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
     "node_modules/killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -10796,6 +10894,35 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/mapbox-gl": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
+      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.4",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.4.3",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.1",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^8.0.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "node_modules/mapnik": {
       "version": "4.5.9",
       "resolved": "https://registry.npmjs.org/mapnik/-/mapnik-4.5.9.tgz",
@@ -11285,6 +11412,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
     "node_modules/mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -12243,6 +12375,18 @@
         "through": "~2.3"
       }
     },
+    "node_modules/pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/pg": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.7.1.tgz",
@@ -14151,6 +14295,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
@@ -14295,6 +14444,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "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=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -14428,6 +14582,11 @@
         }
       ]
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
     "node_modules/random-bytes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
@@ -15798,6 +15957,14 @@
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
       "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
+    "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==",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -15928,6 +16095,11 @@
       "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
       "dev": true
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "node_modules/rxjs": {
       "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@@ -17569,6 +17741,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "dependencies": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -18224,6 +18404,11 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -18879,6 +19064,16 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -22130,6 +22325,32 @@
         "react-is": "^16.12.0"
       }
     },
+    "@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "requires": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+        }
+      }
+    },
+    "@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=="
+    },
+    "@mapbox/mapbox-gl-supported": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-2.0.1.tgz",
+      "integrity": "sha512-HP6XvfNIzfoMVfyGjBckjiAOQK9WfX0ywdLubuPMPv+Vqf5fj0uCbgBQYpiqcWZT6cbyyRnTSXDheT1ugvF6UQ=="
+    },
     "@mapbox/node-pre-gyp": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.8.tgz",
@@ -22146,11 +22367,39 @@
         "tar": "^6.1.11"
       }
     },
+    "@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=="
+    },
     "@mapbox/sphericalmercator": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@mapbox/sphericalmercator/-/sphericalmercator-1.2.0.tgz",
       "integrity": "sha512-ZTOuuwGuMOJN+HEmG/68bSEw15HHaMWmQ5gdTsWdWsjDe56K1kGvLOK6bOSC8gWgIvEO0w6un/2Gvv1q5hJSkQ=="
     },
+    "@mapbox/tiny-sdf": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.0.6.tgz",
+      "integrity": "sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA=="
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.1.tgz",
+      "integrity": "sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw=="
+    },
+    "@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "requires": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -24630,6 +24879,11 @@
       "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
       "dev": true
     },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w=="
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -25323,6 +25577,11 @@
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
+    "earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -26618,6 +26877,11 @@
       "resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",
       "integrity": "sha1-PNbJY5m+ZbVu5VWWEW/pGRznAcA="
     },
+    "geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -26670,6 +26934,11 @@
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
       "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="
     },
+    "gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
     "glob": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
@@ -26755,6 +27024,11 @@
       "integrity": "sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==",
       "dev": true
     },
+    "grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA=="
+    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -28363,6 +28637,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "kdbush": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
+      "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -28564,6 +28843,35 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mapbox-gl": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-2.15.0.tgz",
+      "integrity": "sha512-fjv+aYrd5TIHiL7wRa+W7KjtUqKWziJMZUkK5hm8TvJ3OLeNPx4NmW/DgfYhd/jHej8wWL+QJBDbdMMAKvNC0A==",
+      "requires": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^2.0.1",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.4",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.4.3",
+        "grid-index": "^1.1.0",
+        "kdbush": "^4.0.1",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^2.0.0",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^8.0.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.3"
+      }
+    },
     "mapnik": {
       "version": "4.5.9",
       "resolved": "https://registry.npmjs.org/mapnik/-/mapnik-4.5.9.tgz",
@@ -28937,6 +29245,11 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw=="
+    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -29664,6 +29977,15 @@
         "through": "~2.3"
       }
     },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "requires": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      }
+    },
     "pg": {
       "version": "8.7.1",
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.7.1.tgz",
@@ -31108,6 +31430,11 @@
         "xtend": "^4.0.0"
       }
     },
+    "potpack": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-2.0.0.tgz",
+      "integrity": "sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw=="
+    },
     "prebuild-install": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
@@ -31226,6 +31553,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "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=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -31313,6 +31645,11 @@
       "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=="
+    },
     "random-bytes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
@@ -32360,6 +32697,14 @@
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
       "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
+    "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==",
+      "requires": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -32452,6 +32797,11 @@
         }
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
     "rxjs": {
       "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
@@ -33776,6 +34126,14 @@
         }
       }
     },
+    "supercluster": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
+      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
+      "requires": {
+        "kdbush": "^4.0.2"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -34312,6 +34670,11 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -34828,6 +35191,16 @@
       "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
       "dev": true
     },
+    "vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "requires": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

app/package.json

@@ -29,6 +29,7 @@
     "geojson": "^0.5.0",
     "leaflet": "^1.7.1",
     "lodash": "^4.17.21",
+    "mapbox-gl": "^2.15.0",
     "mapnik": "^4.5.9",
     "markdown-to-jsx": "^7.1.3",
     "node-fs": "^0.1.7",

app/public/site.webmanifest

@@ -10,5 +10,5 @@
     ],
     "start_url": "/",
     "background_color": "#ffffff",
-    "theme_color": "#fffff"
+    "theme_color": "#ffffff"
 }

app/src/cc-config.json

@@ -1,12 +1,12 @@
 {
-    "cityName": "Cities",
+    "cityName": "Montreal",
-    "projectBlurb": "Colouring {City Name} is part Colouring Cities.",
+    "projectBlurb": "Colouring Montreal is a part of Colouring Cities.",
     
-    "githubURL": "https://github.com/colouring-cities/colouring-core",
+    "githubURL": "https://github.com/colouring-cities/colouring-montreal/",
     "manualURL": "https://github.com/colouring-cities/manual/wiki/M3.-COLOURING-BRITAIN",
     "privacyStatement": "{Privacy statement goes here}",
 
-    "initialMapPosition": [ 51.5245255, -0.1338422 ],
+    "initialMapPosition": [ 45.4962261, -73.5801403 ],
     "initialZoomLevel": 16,
 
     "postcode": "Postcode",

app/src/frontend/config/category-maps-config.ts

@@ -430,9 +430,9 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
         {
             mapStyle: 'is_domestic',
             legend: {
-                title: 'Residential building',
+                title: 'Test MTL', //Residential building
                 elements: [
-                    { color: '#f7ec25', text: 'Residential' },
+                    { color: '#f7ec25', text: 'Test' }, //Residential
                     { color: '#fc9b2a', text: 'Mixed' },
                     { color: '#ff2121', text: 'Non-residential' },
                 ]

app/src/frontend/map/layers/city-base-map-layer.tsx

@@ -1,38 +1,31 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
-import { TileLayer } from 'react-leaflet';
+import mapboxgl from 'mapbox-gl';
 
-import { MapTheme } from '../../config/map-config';
+// Set your Mapbox access token
-
+mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg';
-const OS_API_KEY = 'UVWEspgInusDKKYANE5bmyddoEmCSD4r';
 
 /**
- * Base raster layer for the map.
+ * Component to display a Mapbox map.
- * @param theme map theme
  */
-export function CityBaseMapLayer({ theme }: { theme: MapTheme }) {
+export function CityMap() {
+  useEffect(() => {
+    const map = new mapboxgl.Map({
+      container: 'map', // container ID
+      style: 'mapbox://styles/mapbox/streets-v12', // style URL
+      center: [-73.5801403, 45.4962261], // starting position [lng, lat]
+      zoom: 15, // starting zoom
+    });
 
-    /**
+    // Optionally, you can add more configuration options or features to your map here.
-     * Ordnance Survey maps - UK / London specific
-     * (replace with appropriate base map for other cities/countries)
-     */
-    const apiKey = OS_API_KEY;
 
-    // Note that OS APIs does not provide dark theme
+    // Cleanup the map when the component unmounts
-    const layer = 'Light_3857';
+    return () => map.remove();
+  }, []);
 
-    // In either theme case, we will use OS's light theme, but add our own filter
+  return (
-    const theme_class = theme === 'light' ? "light-theme" : "night-theme";
+    <div id="map" style={{ width: '100%', height: '100vh' }}></div>
     
-    const baseUrl = `https://api.os.uk/maps/raster/v1/zxy/${layer}/{z}/{x}/{y}.png?key=${apiKey}`;
+  );
-    const attribution = `Building attribute data is © Colouring Cities contributors. Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines. <a href=/ordnance-survey-licence.html>OS licence</a>`;
-
-    return <TileLayer
-        url={baseUrl}
-        attribution={attribution}
-        maxNativeZoom={18}
-        maxZoom={19}
-        detectRetina={false}
-        className={theme_class}
-    />;
 }
 
+export default CityMap;

app/src/frontend/map/map-button.css

@@ -73,14 +73,14 @@
 }
 
 .theme-switcher {
-    top: 77px;
+    top: 100px;
 }
 .theme-switcher .btn {
     min-width: 340px;
 }
 
 .data-switcher {
-    top: 117px;
+    top: 140px;
 }
 .data-switcher .btn {
     min-width: 340px;

app/src/frontend/map/map.css

@@ -1,10 +1,9 @@
 .map-container {
     position: absolute;
-    top: 76px; /* sync with header positioning */
+    top: 76px; /* sync with header positioning*/
     bottom: 0;
     left: 0;
     right: 0;
-    min-width: 320px;
 }
 @media (min-width: 990px) {
     .map-container {
@@ -12,8 +11,7 @@
         left: 470px;
     }
 }
-.leaflet-container {
+.leaflet-container {height: 100%;
-    height: 100%;
     width: 100%;
 }
 .leaflet-container .leaflet-control-zoom {
@@ -34,3 +32,4 @@
         display: block;
     }
 }
+

app/src/frontend/map/map.tsx

@@ -1,59 +1,83 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
-import { AttributionControl, MapContainer, ZoomControl, useMapEvent, Pane, useMap } from 'react-leaflet';
+  FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+} from "react";
+import {
+  AttributionControl,
+  MapContainer,
+  ZoomControl,
+  useMapEvent,
+  Pane,
+  useMap,
+} from "react-leaflet";
 
-import 'leaflet/dist/leaflet.css';
+import "leaflet/dist/leaflet.css";
-import './map.css';
+import "./map.css";
 
-import { apiGet } from '../apiHelpers';
+import { apiGet } from "../apiHelpers";
-import { initialMapViewport, mapBackgroundColor, MapTheme, LayerEnablementState } from '../config/map-config';
+import {
+  initialMapViewport,
+  mapBackgroundColor,
+  MapTheme,
+  LayerEnablementState,
+} from "../config/map-config";
 
-import { Building } from '../models/building';
+import mapboxgl from "mapbox-gl";
 
-import { CityBaseMapLayer } from './layers/city-base-map-layer';
+import { Building } from "../models/building";
-import { CityBoundaryLayer } from './layers/city-boundary-layer';
-import { BoroughBoundaryLayer } from './layers/borough-boundary-layer';
-import { BoroughLabelLayer } from './layers/borough-label-layer';
-import { ParcelBoundaryLayer } from './layers/parcel-boundary-layer';
-import { HistoricDataLayer } from './layers/historic-data-layer';
-import { HistoricMapLayer } from './layers/historic-map-layer';
-import { FloodBoundaryLayer } from './layers/flood-boundary-layer';
-import { ConservationAreaBoundaryLayer } from './layers/conservation-boundary-layer';
-import { VistaBoundaryLayer } from './layers/vista-boundary-layer';
-import { HousingBoundaryLayer } from './layers/housing-boundary-layer';
-import { CreativeBoundaryLayer } from './layers/creative-boundary-layer';
-import { BuildingBaseLayer } from './layers/building-base-layer';
-import { BuildingDataLayer } from './layers/building-data-layer';
-import { BuildingNumbersLayer } from './layers/building-numbers-layer';
-import { BuildingHighlightLayer } from './layers/building-highlight-layer';
 
-import { Legend } from './legend';
+import { CityMap } from "./layers/city-base-map-layer";
-import SearchBox from './search-box';
+import { CityBoundaryLayer } from "./layers/city-boundary-layer";
-import ThemeSwitcher from './theme-switcher';
+import { BoroughBoundaryLayer } from "./layers/borough-boundary-layer";
-import DataLayerSwitcher from './data-switcher';
+import { BoroughLabelLayer } from "./layers/borough-label-layer";
-import { BoroughSwitcher } from './borough-switcher';
+import { ParcelBoundaryLayer } from "./layers/parcel-boundary-layer";
-import { ParcelSwitcher } from './parcel-switcher';
+import { HistoricDataLayer } from "./layers/historic-data-layer";
-import { FloodSwitcher } from './flood-switcher';
+import { HistoricMapLayer } from "./layers/historic-map-layer";
-import { ConservationAreaSwitcher } from './conservation-switcher';
+import { FloodBoundaryLayer } from "./layers/flood-boundary-layer";
-import { HistoricDataSwitcher } from './historic-data-switcher';
+import { ConservationAreaBoundaryLayer } from "./layers/conservation-boundary-layer";
-import { HistoricMapSwitcher } from './historic-map-switcher';
+import { VistaBoundaryLayer } from "./layers/vista-boundary-layer";
-import { VistaSwitcher } from './vista-switcher';
+import { HousingBoundaryLayer } from "./layers/housing-boundary-layer";
-import { CreativeSwitcher } from './creative-switcher';
+import { CreativeBoundaryLayer } from "./layers/creative-boundary-layer";
-import { HousingSwitcher } from './housing-switcher';
+import { BuildingBaseLayer } from "./layers/building-base-layer";
-import { BuildingMapTileset } from '../config/tileserver-config';
+import { BuildingDataLayer } from "./layers/building-data-layer";
-import { useDisplayPreferences } from '../displayPreferences-context';
+import { BuildingNumbersLayer } from "./layers/building-numbers-layer";
-import { CategoryMapDefinition } from '../config/category-maps-config';
+import { BuildingHighlightLayer } from "./layers/building-highlight-layer";
+
+import { Legend } from "./legend";
+import SearchBox from "./search-box";
+import ThemeSwitcher from "./theme-switcher";
+import DataLayerSwitcher from "./data-switcher";
+import { BoroughSwitcher } from "./borough-switcher";
+import { ParcelSwitcher } from "./parcel-switcher";
+import { FloodSwitcher } from "./flood-switcher";
+import { ConservationAreaSwitcher } from "./conservation-switcher";
+import { HistoricDataSwitcher } from "./historic-data-switcher";
+import { HistoricMapSwitcher } from "./historic-map-switcher";
+import { VistaSwitcher } from "./vista-switcher";
+import { CreativeSwitcher } from "./creative-switcher";
+import { HousingSwitcher } from "./housing-switcher";
+import { BuildingMapTileset } from "../config/tileserver-config";
+import { useDisplayPreferences } from "../displayPreferences-context";
+import { CategoryMapDefinition } from "../config/category-maps-config";
+
+mapboxgl.accessToken =
+  "pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg";
 
 interface ColouringMapProps {
   selectedBuildingId: number;
-    mode: 'basic' | 'view' | 'edit' | 'multi-edit';
+  mode: "basic" | "view" | "edit" | "multi-edit";
   revisionId: string;
   onBuildingAction: (building: Building) => void;
   mapColourScale: BuildingMapTileset;
   onMapColourScale: (x: BuildingMapTileset) => void;
-    categoryMapDefinitions: CategoryMapDefinition[]
+  categoryMapDefinitions: CategoryMapDefinition[];
 }
 
-export const ColouringMap : FC<ColouringMapProps> = ({
+export const ColouringMap: FC<ColouringMapProps> = ({
   mode,
   revisionId,
   onBuildingAction,
@@ -61,139 +85,105 @@ export const ColouringMap : FC<ColouringMapProps> = ({
   mapColourScale,
   onMapColourScale,
   categoryMapDefinitions,
-    children
+  children,
 }) => {
-    const { darkLightTheme, darkLightThemeSwitch, showLayerSelection } = useDisplayPreferences();
+  const { darkLightTheme, darkLightThemeSwitch, showLayerSelection } =
+    useDisplayPreferences();
   const [position, setPosition] = useState(initialMapViewport.position);
   const [zoom, setZoom] = useState(initialMapViewport.zoom);
 
-
+  const handleLocate = useCallback((lat: number, lng: number, zoom: number) => {
-    const handleLocate = useCallback(
-        (lat: number, lng: number, zoom: number) => {
     setPosition([lat, lng]);
     setZoom(zoom);
-        },
+  }, []);
-        []
-    );
 
   const handleClick = useCallback(
     async (e) => {
-            const {lat, lng} = e.latlng;
+      const { lat, lng } = e.latlng;
       const data = await apiGet(`/api/buildings/locate?lat=${lat}&lng=${lng}`);
       const building = data?.[0];
       onBuildingAction(building);
     },
-        [onBuildingAction],
+    [onBuildingAction]
-    )
+  );
+
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+  const [lng, setLng] = useState(-73.5801403);
+  const [lat, setLat] = useState(45.4962261);
+
+  useEffect(() => {
+    if (map.current) return; // initialize map only once
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: "mapbox://styles/mapbox/streets-v12",
+      center: [lng, lat],
+      zoom: zoom,
+    });
+
+    map.current.addControl(new mapboxgl.NavigationControl());
+
+    map.current.on("move", () => {
+      setLng(map.current.getCenter().lng.toFixed(4));
+      setLat(map.current.getCenter().lat.toFixed(4));
+      setZoom(map.current.getZoom().toFixed(2));
+    });
+  }, []);
 
   return (
-        <div className="map-container">
+    <div
-            <MapContainer
+      ref={mapContainer}
-                center={initialMapViewport.position}
+      className="map-container"
-                zoom={initialMapViewport.zoom}
+      style={{
-                minZoom={9}
+        position: "absolute",
-                maxZoom={18}
+        top: "0",
-                doubleClickZoom={false}
+        bottom: "0",
-                zoomControl={false}
+        left: "0",
-                attributionControl={false}
+        right: "0",
+      }}
     >
-                <ClickHandler onClick={handleClick} />
+      {mode !== "basic" && (
-                <MapBackgroundColor theme={darkLightTheme} />
-                <MapViewport position={position} zoom={zoom} />
-
-                <Pane
-                    key={darkLightTheme}
-                    name={'cc-base-pane'}
-                    style={{zIndex: 50}}
-                >
-                    <CityBaseMapLayer theme={darkLightTheme} />
-                    <BuildingBaseLayer theme={darkLightTheme} />
-                </Pane>
-
-                <Pane
-                    name='cc-overlay-pane-shown-behind-buildings'
-                    style={{zIndex: 199}}
-                >
-                    <ConservationAreaBoundaryLayer/>
-                </Pane>
-
-                {
-                    mapColourScale &&
-                        <BuildingDataLayer
-                            tileset={mapColourScale}
-                            revisionId={revisionId}
-                        />
-                }
-
-                <Pane
-                    name='cc-overlay-pane'
-                    style={{zIndex: 300}}
-                >
-                    <CityBoundaryLayer/>
-                    <HistoricDataLayer revisionId={revisionId} />
-                    <HistoricMapLayer revisionId={revisionId} />
-                    <BoroughBoundaryLayer/>
-                    <ParcelBoundaryLayer/>
-                    <FloodBoundaryLayer/>
-                    <VistaBoundaryLayer/>
-                    <HousingBoundaryLayer/>
-                    <CreativeBoundaryLayer/>
-                    <BuildingNumbersLayer revisionId={revisionId} />
-                    {
-                        selectedBuildingId &&
-                            <BuildingHighlightLayer
-                                selectedBuildingId={selectedBuildingId}
-                                baseTileset={mapColourScale} 
-                            />
-                    }
-                </Pane>
-                <Pane
-                    name='cc-label-overlay-pane'
-                    style={{zIndex: 1000}}
-                >
-                    <BoroughLabelLayer/>
-                </Pane>
-
-                <ZoomControl position="topright" />
-                <AttributionControl prefix=""/>
-            </MapContainer>
-            {
-                mode !== 'basic' &&
         <>
-                    <Legend mapColourScaleDefinitions={categoryMapDefinitions} mapColourScale={mapColourScale} onMapColourScale={onMapColourScale}/>
+          <Legend
-                    <ThemeSwitcher onSubmit={darkLightThemeSwitch} currentTheme={darkLightTheme} />
+            mapColourScaleDefinitions={categoryMapDefinitions}
+            mapColourScale={mapColourScale}
+            onMapColourScale={onMapColourScale}
+          />
+          <ThemeSwitcher
+            onSubmit={darkLightThemeSwitch}
+            currentTheme={darkLightTheme}
+          />
           <DataLayerSwitcher />
-                    {
+          {showLayerSelection == "enabled" ? (
-                        (showLayerSelection == "enabled") ?
             <>
-                            <BoroughSwitcher/>
+              <BoroughSwitcher />
-                            <ParcelSwitcher/>
+              <ParcelSwitcher />
-                            <FloodSwitcher/>
+              <FloodSwitcher />
-                            <ConservationAreaSwitcher/>
+              <ConservationAreaSwitcher />
-                            <HistoricMapSwitcher/>
+              <HistoricMapSwitcher />
-                            <HistoricDataSwitcher/>
+              <HistoricDataSwitcher />
               <VistaSwitcher />
               <HousingSwitcher />
               <CreativeSwitcher />
-                            
             </>
-                        : <></>
+          ) : (
-                    }
+            <></>
+          )}
           {/* TODO change remaining ones*/}
           <SearchBox onLocate={handleLocate} />
         </>
-            }
+      )}
     </div>
   );
-}
+};
 
-function ClickHandler({ onClick }: {onClick: (e) => void}) {
+function ClickHandler({ onClick }: { onClick: (e) => void }) {
-    useMapEvent('click', (e) => onClick(e));
+  useMapEvent("click", (e) => onClick(e));
 
   return null;
 }
 
-function MapBackgroundColor({ theme}: {theme: MapTheme}) {
+function MapBackgroundColor({ theme }: { theme: MapTheme }) {
   const map = useMap();
   useEffect(() => {
     map.getContainer().style.backgroundColor = mapBackgroundColor[theme];
@@ -204,7 +194,7 @@ function MapBackgroundColor({ theme}: {theme: MapTheme}) {
 
 function MapViewport({
   position,
-    zoom
+  zoom,
 }: {
   position: [number, number];
   zoom: number;
@@ -212,7 +202,7 @@ function MapViewport({
   const map = useMap();
 
   useEffect(() => {
-        map.setView(position, zoom)
+    map.setView(position, zoom);
   }, [position, zoom]);
 
   return null;

app/src/frontendRoute.tsx

@@ -93,6 +93,7 @@ function renderHTML(context, data, req, res) {
             `<!doctype html>
     <html lang="">
     <head>
+
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta charset="utf-8" />
 
@@ -127,6 +128,8 @@ function renderHTML(context, data, req, res) {
             font-style: normal;
           }
         </style>
+        <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
+        <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
         ${
             assets.client.css
                 ? `<link rel="stylesheet" href="${assets.client.css}">`
@@ -137,6 +140,7 @@ function renderHTML(context, data, req, res) {
                 ? `<script src="${assets.client.js}" defer></script>`
                 : `<script src="${assets.client.js}" defer crossorigin></script>`
             }
+        
     </head>
     <body>
         <div id="root">${markup}</div>

app/src/index.ts

@@ -2,6 +2,8 @@
  * Load server and listen
  *
  */
+
+
 import http from 'http';
 
 import app from './server';

etl/get_test_polygons.py

@@ -18,8 +18,9 @@ osmnx.config(log_console=True, use_cache=True)
 # configure the image display
 size = 256
 
-# load buildings from about 1.5km² around UCL
+# (load buildings from about 1.5km² around UCL)
-point = (51.524498, -0.133874)
+# Latitude and longitude of the ER building:
+point = (45.4962261, -73.5801403)
 dist = 612
 tags = {"building": True}
 gdf = osmnx.features_from_point(point, tags, dist=dist)

html/index.html

@@ -6,6 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Colouring London</title>
     <link rel="stylesheet" href="main.css?v=5ed692a6">
+    
+    
+
 </head>
 <body>
 

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "colouring-montreal",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}