update map code to handle changing initial consitituency types

mysociety · Nov 1, 2023 · 17e9db8 · 17e9db8
1 parent d09dc61
commit 17e9db8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/hub/static/js/explore.esm.js b/hub/static/js/explore.esm.js
@@ -18,6 +18,7 @@ const app = createApp({
       shader: null, // shader to applied on next Update
       columns: [], // additional columns to be requested on next Update
       area_type: "WMC", // the area type to fetch
+      area_type_changed: false, // so we know to reload the map
 
       filters_applied: false, // were filters applied on the last Update?
       area_count: 0, // number of areas returned on last Update
@@ -248,6 +249,15 @@ const app = createApp({
 
       return url
     },
+    geomUrl() {
+      const url = new URL(window.location.origin + '/exploregeometry.json')
+
+      if ('area_type' in this.state()) {
+        url.searchParams.set('area_type', this.state()['area_type'])
+      }
+
+      return url
+    },
     updateState() {
       window.history.replaceState(this.state(), '', this.url())
       this.updateResults()
@@ -299,6 +309,9 @@ const app = createApp({
         }, 100)
       }
     },
+    changeAreaType() {
+      this.area_type_changed = true
+    },
     updateResults() {
       if (this.view == 'map') {
         this.updateMap()
@@ -322,8 +335,15 @@ const app = createApp({
         }
       ).addTo(this.map)
 
+      return this.setUpMapAreas()
+    },
+    removeMapAreas() {
+      this.map.removeLayer(window.geojson)
+      return this.setUpMapAreas()
+    },
+    setUpMapAreas() {
       // Fetch and plot all boundary polygons once
-      return fetch('/exploregeometry.json')
+      return fetch(this.geomUrl())
         .then(response => response.json())
         .then(data => {
           window.geojson = L.geoJson(data, {
@@ -366,11 +386,14 @@ const app = createApp({
           }
 
           this.loading = false
+          this.area_type_changed = false
         })
     },
     updateMap() {
       if (!this.map) {
         this.setUpMap().then( this.filterMap )
+      } else if ( this.area_type_changed) {
+        this.removeMapAreas().then( this.filterMap )
       } else {
         this.filterMap()
       }

diff --git a/hub/templates/hub/explore.html b/hub/templates/hub/explore.html
@@ -30,7 +30,7 @@ <h2 class="h5 mt-4 mt-lg-5 mb-3 mb-lg-4 text-primary">Step 1: Select an output f
         <div class="p-4 p-lg-5">
             <label for="area_type" class="form-label text-muted mb-lg-3">Constituency generation</label>
 
-            <select id="area_type" class="form-select form-select-lg" v-model="area_type">
+            <select id="area_type" class="form-select form-select-lg" v-model="area_type" @change="changeAreaType()">
                 <option value="WMC">2010–2024 Constituencies</option>
                 <option value="WMC23">2025 Constituencies</option>
             </select>