Add .gitignore

.gitignore

@@ -10,6 +10,7 @@ html/norton*.html
 .vscode
 
 # Data
+etl/
 etl/cache/*
 etl/images/*
 etl/*.geojson
@@ -35,3 +36,4 @@ TODO
 
 # VM
 .vagrant
+README.md.save

app/package-lock.json

@@ -25,7 +25,6 @@
         "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",
@@ -2557,42 +2556,6 @@
         "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",
@@ -2612,11 +2575,6 @@
         "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",
@@ -2628,32 +2586,6 @@
         "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",
@@ -5746,11 +5678,6 @@
         "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",
@@ -6651,11 +6578,6 @@
       "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",
@@ -8342,11 +8264,6 @@
         "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",
@@ -8423,11 +8340,6 @@
       "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",
@@ -8538,11 +8450,6 @@
       "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",
@@ -10635,11 +10542,6 @@
         "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",
@@ -10894,35 +10796,6 @@
         "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",
@@ -11412,11 +11285,6 @@
       "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",
@@ -12375,18 +12243,6 @@
         "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",
@@ -14295,11 +14151,6 @@
         "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",
@@ -14444,11 +14295,6 @@
         "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",
@@ -14582,11 +14428,6 @@
         }
       ]
     },
-    "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",
@@ -15957,14 +15798,6 @@
       "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",
@@ -16095,11 +15928,6 @@
       "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",
@@ -17741,14 +17569,6 @@
         "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",
@@ -18404,11 +18224,6 @@
       "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",
@@ -19064,16 +18879,6 @@
         "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",
@@ -22325,32 +22130,6 @@
         "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",
@@ -22367,39 +22146,11 @@
         "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",
@@ -24879,11 +24630,6 @@
       "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",
@@ -25577,11 +25323,6 @@
       "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",
@@ -26877,11 +26618,6 @@
       "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",
@@ -26934,11 +26670,6 @@
       "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",
@@ -27024,11 +26755,6 @@
       "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",
@@ -28637,11 +28363,6 @@
         "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",
@@ -28843,35 +28564,6 @@
         "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",
@@ -29245,11 +28937,6 @@
       "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",
@@ -29977,15 +29664,6 @@
         "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",
@@ -31430,11 +31108,6 @@
         "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",
@@ -31553,11 +31226,6 @@
         "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",
@@ -31645,11 +31313,6 @@
       "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",
@@ -32697,14 +32360,6 @@
       "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",
@@ -32797,11 +32452,6 @@
         }
       }
     },
-    "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",
@@ -34126,14 +33776,6 @@
         }
       }
     },
-    "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",
@@ -34670,11 +34312,6 @@
       "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",
@@ -35191,16 +34828,6 @@
       "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,7 +29,6 @@
     "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": "#ffffff"
+    "theme_color": "#fffff"
 }

app/src/cc-config.json

@@ -1,12 +1,12 @@
 {
-    "cityName": "Montreal",
+    "cityName": "Cities",
-    "projectBlurb": "Colouring Montreal is a part of Colouring Cities.",
+    "projectBlurb": "Colouring {City Name} is part Colouring Cities.",
     
-    "githubURL": "https://github.com/colouring-cities/colouring-montreal/",
+    "githubURL": "https://github.com/colouring-cities/colouring-core",
     "manualURL": "https://github.com/colouring-cities/manual/wiki/M3.-COLOURING-BRITAIN",
     "privacyStatement": "{Privacy statement goes here}",
 
-    "initialMapPosition": [ 45.4962261, -73.5801403 ],
+    "initialMapPosition": [ 51.5245255, -0.1338422 ],
     "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: 'Test MTL', //Residential building
+                title: 'Residential building',
                 elements: [
-                    { color: '#f7ec25', text: 'Test' }, //Residential
+                    { color: '#f7ec25', text: 'Residential' },
                     { color: '#fc9b2a', text: 'Mixed' },
                     { color: '#ff2121', text: 'Non-residential' },
                 ]

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

@@ -1,31 +1,38 @@
-import React, { useEffect } from 'react';
+import * as React from 'react';
-import mapboxgl from 'mapbox-gl';
+import { TileLayer } from 'react-leaflet';
 
-// Set your Mapbox access token
+import { MapTheme } from '../../config/map-config';
-mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg';
+
+const OS_API_KEY = 'UVWEspgInusDKKYANE5bmyddoEmCSD4r';
 
 /**
- * Component to display a Mapbox map.
+ * Base raster layer for the map.
+ * @param theme map theme
  */
-export function CityMap() {
+export function CityBaseMapLayer({ theme }: { theme: MapTheme }) {
-  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;
 
-    // Cleanup the map when the component unmounts
+    // Note that OS APIs does not provide dark theme
-    return () => map.remove();
+    const layer = 'Light_3857';
-  }, []);
 
-  return (
+    // In either theme case, we will use OS's light theme, but add our own filter
-    <div id="map" style={{ width: '100%', height: '100vh' }}></div>
+    const theme_class = theme === 'light' ? "light-theme" : "night-theme";
-    
+
-  );
+    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: 100px;
+    top: 77px;
 }
 .theme-switcher .btn {
     min-width: 340px;
 }
 
 .data-switcher {
-    top: 140px;
+    top: 117px;
 }
 .data-switcher .btn {
     min-width: 340px;

app/src/frontend/map/map.css

@@ -1,9 +1,10 @@
 .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 {
@@ -11,7 +12,8 @@
         left: 470px;
     }
 }
-.leaflet-container {height: 100%;
+.leaflet-container {
+    height: 100%;
     width: 100%;
 }
 .leaflet-container .leaflet-control-zoom {
@@ -32,4 +34,3 @@
         display: block;
     }
 }
-

app/src/frontend/map/map.tsx

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

app/src/frontendRoute.tsx

@@ -93,7 +93,6 @@ function renderHTML(context, data, req, res) {
             `<!doctype html>
     <html lang="">
     <head>
-
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta charset="utf-8" />
 
@@ -128,8 +127,6 @@ 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}">`
@@ -140,7 +137,6 @@ 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,8 +2,6 @@
  * Load server and listen
  *
  */
-
-
 import http from 'http';
 
 import app from './server';

etl/get_test_polygons.py

@@ -18,9 +18,8 @@ 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
-# Latitude and longitude of the ER building:
+point = (51.524498, -0.133874)
-point = (45.4962261, -73.5801403)
 dist = 612
 tags = {"building": True}
 gdf = osmnx.features_from_point(point, tags, dist=dist)

html/index.html

@@ -6,9 +6,6 @@
     <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

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