Skip to content

Commit

Permalink
Add search functionality to the map
Browse files Browse the repository at this point in the history 
This uses Maptiler's Geocoding control, and all the behaviour and styling is handled by Maptiler.

Search is restricted to the UK. We could restrict further to roughly Airtext's coverage, but that requires more complex bounding boxes. Instead I've used the proximity setting to make it prefer results that are near London.
  • Loading branch information
@jdudley1123
jdudley1123 committed Nov 15, 2024
1 parent bad1f96 commit 3ee858e
Show file tree
Hide file tree
Showing 4 changed files with 140 additions and 2 deletions.
1 change: 1 addition & 0 deletions app/assets/stylesheets/application.tailwind.css.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "leaflet/dist/leaflet.css";
@import "@maptiler/geocoding-control/style.css";
@import "leaflet.scss"; /* stylelint-disable-line scss/load-partial-extension */

@tailwind base;
Expand Down
31 changes: 30 additions & 1 deletion app/javascript/controllers/map_controller.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Controller } from "@hotwired/stimulus";
import L from "leaflet";
import "@maptiler/leaflet-maptilersdk";
import "@maptiler/geocoding-control/leaflet";
import * as zones from "../zone_boundaries/zone-boundaries";

export default class MapController extends Controller {
Expand All @@ -11,7 +12,7 @@ export default class MapController extends Controller {
defaultMapSettings = {
pollutant: "Total",
date: new Date().toJSON().slice(0, 10),
center: [51.510357, -0.116773], // Big Ben
center: [51.510357, -0.116773], // Big Ben, lat lng
zoom: 8,
maptilerApiKey: document
.getElementById("map")
Expand All @@ -29,6 +30,8 @@ export default class MapController extends Controller {
zoom: this.settings.zoom,
});

this.addSearchControl();

this.map.createPane("street-map");
this.addStreetMapLayer();

Expand All @@ -52,6 +55,32 @@ export default class MapController extends Controller {
L.control.layers(streetMaps, null, { collapsed: false }).addTo(this.map);
}

addSearchControl() {
L.control
.maptilerGeocoding({
apiKey: this.settings.maptilerApiKey,
country: ["GB"],
proximity: [-0.116773, 51.510357], // Big Ben, lng lat
types: [
"region",
"subregion",
"county",
"joint_municipality",
"joint_submunicipality",
"municipality",
"municipal_district",
"locality",
"neighbourhood",
"place",
"postal_code",
"address",
"road",
"poi",
],
})
.addTo(this.map);
}

streetMaps() {
const tonerLite = new L.MaptilerLayer({
apiKey: this.settings.maptilerApiKey,
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"dependencies": {
"@hotwired/stimulus": "^3.2.2",
"@hotwired/turbo-rails": "^8.0.10",
"@maptiler/geocoding-control": "^1.4.1",
"depcheck": "^1.4.7",
"tailwindcss": "^3.4.13"
}
Expand Down
109 changes: 108 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -449,6 +449,18 @@
dependencies:
quick-lru "^7.0.0"

"@maptiler/geocoding-control@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@maptiler/geocoding-control/-/geocoding-control-1.4.1.tgz#4cba09f5e6cb0a4c792b00ec48e9bd2991ee68b7"
integrity sha512-/NMM8oaKKAdF36KbJuucJc18RaY+VpwkJ2V098yoG7H+9K7Rkyen+XKuLDA8gmvrgTeX1m48Pb9RP+e5zCrRvA==
dependencies:
"@turf/bbox" "^7.1.0"
"@turf/clone" "^7.1.0"
"@turf/difference" "^7.1.0"
"@turf/flatten" "^7.1.0"
"@turf/union" "^7.1.0"
geo-coordinates-parser "^1.7.3"

"@maptiler/leaflet-maptilersdk@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@maptiler/leaflet-maptilersdk/-/leaflet-maptilersdk-2.0.0.tgz#ebc4fd048ea57c5f3876cf6baf2f6081d1344c0d"
Expand Down Expand Up @@ -499,12 +511,79 @@
resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.2.101.tgz#d0544b1bc51d420c1bb27f3281ccae54945e70f6"
integrity sha512-YgFCyD+9mBhpJdfgf4QtJwk+vZbByVMXsEGREM6GrPk9A1pYXkkIpzYd3+843E+33e3S81yywhqZc3DyrZGPSg==

"@turf/bbox@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/bbox/-/bbox-7.1.0.tgz#45a9287c084f7b79577ee88b7b539d83562b923b"
integrity sha512-PdWPz9tW86PD78vSZj2fiRaB8JhUHy6piSa/QXb83lucxPK+HTAdzlDQMTKj5okRCU8Ox/25IR2ep9T8NdopRA==
dependencies:
"@turf/helpers" "^7.1.0"
"@turf/meta" "^7.1.0"
"@types/geojson" "^7946.0.10"
tslib "^2.6.2"

"@turf/clone@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/clone/-/clone-7.1.0.tgz#b0cbf60b84fadd30ae8411f12d3bdcd3e773577f"
integrity sha512-5R9qeWvL7FDdBIbEemd0eCzOStr09oburDvJ1hRiPCFX6rPgzcZBQ0gDmZzoF4AFcNLb5IwknbLZjVLaUGWtFA==
dependencies:
"@turf/helpers" "^7.1.0"
"@types/geojson" "^7946.0.10"
tslib "^2.6.2"

"@turf/difference@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/difference/-/difference-7.1.0.tgz#c69b56bf16d3642fc35f5432f829d2e9589f7fd8"
integrity sha512-+JVzdskICQ8ULKQ9CpWUM5kBvoXxN4CO78Ez/Ki3/7NXl7+HM/nb12B0OyM8hkJchpb8TsOi0YwyJiKMqEpTBA==
dependencies:
"@turf/helpers" "^7.1.0"
"@turf/meta" "^7.1.0"
"@types/geojson" "^7946.0.10"
polygon-clipping "^0.15.3"
tslib "^2.6.2"

"@turf/flatten@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/flatten/-/flatten-7.1.0.tgz#db1353e6dd9aafc414422a7ef028a37e0d6b1c50"
integrity sha512-Kb23pqEarcLsdBqnQcK0qTrSMiWNTVb9tOFrNlZc66DIhDLAdpOKG4eqk00CMoUzWTixlnawDgJRqcStRrR4WA==
dependencies:
"@turf/helpers" "^7.1.0"
"@turf/meta" "^7.1.0"
"@types/geojson" "^7946.0.10"
tslib "^2.6.2"

"@turf/helpers@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/helpers/-/helpers-7.1.0.tgz#eb734e291c9c205822acdd289fe20e91c3cb1641"
integrity sha512-dTeILEUVeNbaEeoZUOhxH5auv7WWlOShbx7QSd4s0T4Z0/iz90z9yaVCtZOLbU89umKotwKaJQltBNO9CzVgaQ==
dependencies:
"@types/geojson" "^7946.0.10"
tslib "^2.6.2"

"@turf/meta@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/meta/-/meta-7.1.0.tgz#b2af85afddd0ef08aeae8694a12370a4f06b6d13"
integrity sha512-ZgGpWWiKz797Fe8lfRj7HKCkGR+nSJ/5aKXMyofCvLSc2PuYJs/qyyifDPWjASQQCzseJ7AlF2Pc/XQ/3XkkuA==
dependencies:
"@turf/helpers" "^7.1.0"
"@types/geojson" "^7946.0.10"

"@turf/union@^7.1.0":
version "7.1.0"
resolved "https://registry.yarnpkg.com/@turf/union/-/union-7.1.0.tgz#7b8f0cc7fd24c1269224eaa5f76946458bbb9c01"
integrity sha512-7VI8jONdBg9qmbfNlLQycPr93l5aU9HGMgWI9M6pb4ERuU2+p8KgffCgs2NyMtP2HxPrKSybzj31g7bnbEKofQ==
dependencies:
"@turf/helpers" "^7.1.0"
"@turf/meta" "^7.1.0"
"@types/geojson" "^7946.0.10"
polygon-clipping "^0.15.3"
tslib "^2.6.2"

"@types/estree@^1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==

"@types/geojson@*", "@types/geojson@^7946.0.13":
"@types/geojson@*", "@types/geojson@^7946.0.10", "@types/geojson@^7946.0.13":
version "7946.0.14"
resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
Expand Down Expand Up @@ -1362,6 +1441,11 @@ function-bind@^1.1.2:
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==

geo-coordinates-parser@^1.7.3:
version "1.7.4"
resolved "https://registry.yarnpkg.com/geo-coordinates-parser/-/geo-coordinates-parser-1.7.4.tgz#b9c45ee188cc5bdd7b29f82601e6e6d7b566ac9c"
integrity sha512-gVGxBW+s1csexXVMf5bIwz3TH9n4sCEglOOOqmrPk8YazUI5f79jCowKjTw05m/0h1//3+Z2m/nv8IIozgZyUw==

geojson-vt@^3.2.1:
version "3.2.1"
resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
Expand Down Expand Up @@ -2072,6 +2156,14 @@ please-upgrade-node@^3.2.0:
dependencies:
semver-compare "^1.0.0"

polygon-clipping@^0.15.3:
version "0.15.7"
resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.7.tgz#3823ca1e372566f350795ce9dd9a7b19e97bdaad"
integrity sha512-nhfdr83ECBg6xtqOAJab1tbksbBAOMUltN60bU+llHVOL0e5Onm1WpAXXWXVB39L8AJFssoIhEVuy/S90MmotA==
dependencies:
robust-predicates "^3.0.2"
splaytree "^3.1.0"

postcss-import@^15.1.0:
version "15.1.0"
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
Expand Down Expand Up @@ -2263,6 +2355,11 @@ reusify@^1.0.4:
resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==

robust-predicates@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==

run-parallel@^1.1.9:
version "1.2.0"
resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
Expand Down Expand Up @@ -2367,6 +2464,11 @@ source-map-js@^1.0.1, source-map-js@^1.2.0, source-map-js@^1.2.1:
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==

splaytree@^3.1.0:
version "3.1.2"
resolved "https://registry.yarnpkg.com/splaytree/-/splaytree-3.1.2.tgz#d1db2691665a3c69d630de98d55145a6546dc166"
integrity sha512-4OM2BJgC5UzrhVnnJA4BkHKGtjXNzzUfpQjCO8I05xYPsfS/VuQDwjCGGMi8rYQilHEV4j8NBqTFbls/PZEE7A==

split-string@^3.0.1:
version "3.1.0"
resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
Expand Down Expand Up @@ -2650,6 +2752,11 @@ ts-interface-checker@^0.1.9:
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==

tslib@^2.6.2:
version "2.8.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==

type-check@^0.4.0, type-check@~0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
Expand Down

0 comments on commit 3ee858e

Please sign in to comment.