Update forecast when map panned or zoomed

When the map is panned or zoomed, get the new centre coordinates and look them up in the zone polygons. This may return more than one zone where there are overlapping zones of different levels. We choose between them using the zoom.

The forecast is then updated to match that zone.

app/javascript/controllers/map_controller.js

@@ -4,11 +4,13 @@ import "@maptiler/geocoding-control/leaflet"; // Geocoding (search) control
 import { LocateControl } from "leaflet.locatecontrol"; // Geolocation control
 import "leaflet.fullscreen"; // Fullscreen control
 import * as zones from "../zone_boundaries/zone-boundaries";
+import booleanPointInPolygon from "@turf/boolean-point-in-polygon";
 
 export default class MapController extends Controller {
   static targets = [
     "map",
     "pollutantSelector",
+    "zoneSelector",
     "daySelector",
     "latField",
     "lngField",
@@ -80,9 +82,29 @@ export default class MapController extends Controller {
 
     this.map.on("zoomend moveend", () => {
       this.updateUrl();
+      this.updateForecastZone([
+        this.map.getCenter().lat,
+        this.map.getCenter().lng,
+      ]);
     });
   }
 
+  updateForecastZone(coordinatesLatLng) {
+    const coordinatesLngLat = [coordinatesLatLng[1], coordinatesLatLng[0]];
+    const zones = this.findZones(coordinatesLngLat);
+    let zone;
+    if (!zones || zones.length === 0) {
+      return;
+    } else if (zones.length > 1) {
+      zone = zones[this.map.getZoom() <= 12 ? 1 : 0]; // Show more specific zone at higher zoom
+    } else {
+      zone = zones[0];
+    }
+
+    this.zoneSelectorTarget.value = zone.properties.name;
+    this.zoneSelectorTarget.form.requestSubmit();
+  }
+
   updateUrl() {
     const url = new URL(window.location.href);
 
@@ -251,6 +273,25 @@ export default class MapController extends Controller {
     });
   }
 
+  findZones(coordinatesLngLat) {
+    if (!coordinatesLngLat) {
+      return;
+    }
+
+    const matches = [];
+    for (const [, zone] of Object.entries(zones)) {
+      // Coordinated have to be in the format [longitude, latitude]
+      if (booleanPointInPolygon(coordinatesLngLat, zone)) {
+        matches.push(zone);
+      }
+    }
+
+    // Sort by zone level so more specific zones are returned first
+    matches.sort((a, b) => b.properties.level - a.properties.level);
+
+    return matches;
+  }
+
   updateMap() {
     this.updateSettings();
     this.updatePollutionLayer();

package.json

@@ -35,6 +35,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo-rails": "^8.0.10",
     "@maptiler/geocoding-control": "^2.0.0",
+    "@turf/boolean-point-in-polygon": "^7.1.0",
     "depcheck": "^1.4.7",
     "leaflet.fullscreen": "^3.0.2",
     "leaflet.locatecontrol": "^0.82.0",

yarn.lock

@@ -521,6 +521,17 @@
     "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
+"@turf/boolean-point-in-polygon@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-7.1.0.tgz#dec07b467d74b4409eb03acc60b874958f71b49a"
+  integrity sha512-mprVsyIQ+ijWTZwbnO4Jhxu94ZW2M2CheqLiRTsGJy0Ooay9v6Av5/Nl3/Gst7ZVXxPqMeMaFYkSzcTc87AKew==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@turf/invariant" "^7.1.0"
+    "@types/geojson" "^7946.0.10"
+    point-in-polygon-hao "^1.1.0"
+    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"
@@ -559,6 +570,15 @@
     "@types/geojson" "^7946.0.10"
     tslib "^2.6.2"
 
+"@turf/invariant@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@turf/invariant/-/invariant-7.1.0.tgz#c90cffa093291316b597212396d68bf9e465cf2e"
+  integrity sha512-OCLNqkItBYIP1nE9lJGuIUatWGtQ4rhBKAyTfFu0z8npVzGEYzvguEeof8/6LkKmTTEHW53tCjoEhSSzdRh08Q==
+  dependencies:
+    "@turf/helpers" "^7.1.0"
+    "@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"
@@ -2151,6 +2171,11 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
+point-in-polygon-hao@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/point-in-polygon-hao/-/point-in-polygon-hao-1.1.0.tgz#37f5f4fbe14e89fa8a3bb7f67c9158079d2ede7c"
+  integrity sha512-3hTIM2j/v9Lio+wOyur3kckD4NxruZhpowUbEgmyikW+a2Kppjtu1eN+AhnMQtoHW46zld88JiYWv6fxpsDrTQ==
+
 polygon-clipping@^0.15.3:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.7.tgz#3823ca1e372566f350795ce9dd9a7b19e97bdaad"