Add African Union bbox picker (#68)

* Add region picker

* Prettier

vacs-map-app/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@turf/bbox": "^6.5.0",
     "@turf/helpers": "^6.5.0",
+    "@turf/rewind": "^6.5.0",
     "@vueuse/core": "^10.6.1",
     "autoprefixer": "^10.4.16",
     "d3": "^7.8.5",

vacs-map-app/public/data/african-union-regions-bboxes.geojson

@@ -0,0 +1,12 @@
+{
+"type": "FeatureCollection",
+"name": "AU_regions_bbox",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "AU_region": "North" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -17.098779296874994, 14.745361328125 ], [ 36.871386718750017, 14.745361328125 ], [ 36.871386718750017, 37.340380859374996 ], [ -17.098779296874994, 37.340380859374996 ], [ -17.098779296874994, 14.745361328125 ] ] ] } },
+{ "type": "Feature", "properties": { "AU_region": "South" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 11.7216796875, -46.962890625 ], [ 40.844531250000017, -46.962890625 ], [ 40.844531250000017, -4.428906250000011 ], [ 11.7216796875, -4.428906250000011 ], [ 11.7216796875, -46.962890625 ] ] ] } },
+{ "type": "Feature", "properties": { "AU_region": "East" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 21.825292968750006, -25.570507812500011 ], [ 51.390234375, -25.570507812500011 ], [ 51.390234375, 22.202441406250003 ], [ 21.825292968750006, 22.202441406250003 ], [ 21.825292968750006, -25.570507812500011 ] ] ] } },
+{ "type": "Feature", "properties": { "AU_region": "West" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -25.341552734375, 4.277392578124989 ], [ 15.963183593750017, 4.277392578124989 ], [ 15.963183593750017, 24.99560546875 ], [ -25.341552734375, 24.99560546875 ], [ -25.341552734375, 4.277392578124989 ] ] ] } },
+{ "type": "Feature", "properties": { "AU_region": "Central" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 6.468164062500023, -13.453808593750011 ], [ 31.274023437500006, -13.453808593750011 ], [ 31.274023437500006, 23.445214843749994 ], [ 6.468164062500023, 23.445214843749994 ], [ 6.468164062500023, -13.453808593750011 ] ] ] } }
+]
+}

vacs-map-app/src/MapExplorer.vue

@@ -3,7 +3,11 @@
     <div class="map-wrapper-row">
       <ExploreSidebar />
       <div class="map-wrapper">
-        <component :is="selectedMapComponent" />
+        <component :is="selectedMapComponent">
+          <template v-slot="{ map, mapReady }">
+            <RegionPicker :map="map" :map-ready="mapReady" />
+          </template>
+        </component>
         <div class="map-overlay">
           <select v-model="selectedMap">
             <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
@@ -26,10 +30,11 @@ import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfrican
 import MapContainerColorSandSoil from '@/components/MapContainerColorSandSoil.vue'
 import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue'
 import MapContainerColorSand from '@/components/MapContainerColorSand.vue'
-import MapContainerColorPopulation from '@/components/MapContainerColorPopulation.vue';
+import MapContainerColorPopulation from '@/components/MapContainerColorPopulation.vue'
 import { useMapExploreStore } from '@/stores/mapExplore'
 import LayoutOverview from './components/layouts/LayoutOverview.vue'
 import ExploreSidebar from './components/ExploreSidebar.vue'
+import RegionPicker from './components/RegionPicker.vue'
 
 const availableMaps = [
   {
@@ -81,7 +86,7 @@ const availableMaps = [
     id: 'population',
     name: 'circles + population',
     component: MapContainerColorPopulation
-  },
+  }
 ]
 
 const mapExploreStore = useMapExploreStore()
@@ -116,3 +121,14 @@ const selectedMapComponent = computed(() => {
   right: 1rem;
 }
 </style>
+
+<style>
+.region-picker {
+  position: absolute;
+  bottom: 2.5rem;
+  right: 2.5rem;
+  z-index: 1000;
+  width: 8rem;
+  height: 10rem;
+}
+</style>

vacs-map-app/src/components/DistributionPlot.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chart-wrapper" ref="wrapperRef">
-    <canvas ref="canvasRef"/>
+    <canvas ref="canvasRef" />
   </div>
 </template>
 
@@ -26,8 +26,8 @@ const filtersStore = useFiltersStore()
 const { selectedMetric, selectedCrop, availableModels, availableCrops } = storeToRefs(filtersStore)
 const { data: cropYieldsData } = storeToRefs(cropYieldsStore)
 
-const canvasRef = ref(null);
-const context = ref(null);
+const canvasRef = ref(null)
+const context = ref(null)
 const wrapperRef = ref(null)
 const width = ref(0)
 const height = ref(0)
@@ -36,12 +36,11 @@ useResizeObserver(wrapperRef, ([entry]) => {
   width.value = entry.contentRect.width
   height.value = entry.contentRect.height
 
-  canvasRef.value.width = width.value;
-  canvasRef.value.height = height.value;
-  draw();
+  canvasRef.value.width = width.value
+  canvasRef.value.height = height.value
+  draw()
 })
 
-
 const columnName = computed(() => {
   return [selectedMetric.value, selectedCrop.value, scenario.value].join('_')
 })
@@ -58,24 +57,28 @@ const cropExtent = computed(() => {
 
 const gridCells = computed(() => {
   if (!cropYieldsData.value) return
-  return cropYieldsData.value.map((row) => {
-    const val = row[columnName.value];
-    return {
-      id: row.id,
-      val,
-      x: xScale.value(val),
-      fill: getCellColor(val)
-    }
-  }).filter(d => !!d.val)
+  return cropYieldsData.value
+    .map((row) => {
+      const val = row[columnName.value]
+      return {
+        id: row.id,
+        val,
+        x: xScale.value(val),
+        fill: getCellColor(val)
+      }
+    })
+    .filter((d) => !!d.val)
 })
 
 const xScale = computed(() => {
-  return d3
-    .scaleLinear()
-    // keep 0 values centered on spectrum
-    .domain([cropExtent.value[0], 0, cropExtent.value[1]])
-    .range([0, width.value/2, width.value])
-    // .clamp(true);
+  return (
+    d3
+      .scaleLinear()
+      // keep 0 values centered on spectrum
+      .domain([cropExtent.value[0], 0, cropExtent.value[1]])
+      .range([0, width.value / 2, width.value])
+  )
+  // .clamp(true);
 })
 
 const getCellColor = (value) => {
@@ -90,62 +93,62 @@ const getCellColor = (value) => {
 }
 
 // from D3 beeswarm example
-const dodge = (data, {radius = 1, x = d => d} = {}) => {
-  const radius2 = radius ** 2;
-  const circles = data.map(d => ({x: x(d), data: d})).sort((a, b) => a.x - b.x);
-  const epsilon = 1e-3;
-  let head = null, tail = null;
+const dodge = (data, { radius = 1, x = (d) => d } = {}) => {
+  const radius2 = radius ** 2
+  const circles = data.map((d) => ({ x: x(d), data: d })).sort((a, b) => a.x - b.x)
+  const epsilon = 1e-3
+  let head = null,
+    tail = null
 
   // Returns true if circle ⟨x,y⟩ intersects with any circle in the queue.
   function intersects(x, y) {
-    let a = head;
+    let a = head
     while (a) {
       if (radius2 - epsilon > (a.x - x) ** 2 + (a.y - y) ** 2) {
-        return true;
+        return true
       }
-      a = a.next;
+      a = a.next
     }
-    return false;
+    return false
   }
 
   // Place each circle sequentially.
   for (const b of circles) {
-
     // Remove circles from the queue that can’t intersect the new circle b.
-    while (head && head.x < b.x - radius2) head = head.next;
+    while (head && head.x < b.x - radius2) head = head.next
 
     // Choose the minimum non-intersecting tangent.
-    if (intersects(b.x, b.y = 0)) {
-      let a = head;
-      b.y = Infinity;
+    if (intersects(b.x, (b.y = 0))) {
+      let a = head
+      b.y = Infinity
       do {
-        let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2);
-        let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x) ** 2);
-        if (Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1;
-        if (Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2;
-        a = a.next;
-      } while (a);
+        let y1 = a.y + Math.sqrt(radius2 - (a.x - b.x) ** 2)
+        let y2 = a.y - Math.sqrt(radius2 - (a.x - b.x) ** 2)
+        if (Math.abs(y1) < Math.abs(b.y) && !intersects(b.x, y1)) b.y = y1
+        if (Math.abs(y2) < Math.abs(b.y) && !intersects(b.x, y2)) b.y = y2
+        a = a.next
+      } while (a)
     }
 
     // Add b to the queue.
-    b.next = null;
-    if (head === null) head = tail = b;
-    else tail = tail.next = b;
+    b.next = null
+    if (head === null) head = tail = b
+    else tail = tail.next = b
   }
 
-  return circles;
+  return circles
 }
 
 const draw = () => {
-  if (!context.value) return;
+  if (!context.value) return
 
-  context.value.save();
+  context.value.save()
   //clear old canvas
-  context.value.clearRect(0, 0, width.value, height.value);
+  context.value.clearRect(0, 0, width.value, height.value)
 
-  gridCells.value?.forEach(cell => {
-    context.value.fillStyle = cell.fill;
-    context.value.fillRect(cell.x, 0, 0.1, height.value);
+  gridCells.value?.forEach((cell) => {
+    context.value.fillStyle = cell.fill
+    context.value.fillRect(cell.x, 0, 0.1, height.value)
   })
 
   // draw dots as swarm plot -- seems too slow
@@ -157,7 +160,7 @@ const draw = () => {
   //   context.value.fillRect(cell.x, height.value*.3 + cell.y, 2, 2);
   // })
 
-  context.value.restore();
+  context.value.restore()
 }
 
 onMounted(() => {
@@ -169,11 +172,11 @@ onMounted(() => {
 
   context.value = canvasRef.value?.getContext('2d')
 
-  draw();
+  draw()
 })
 
 watch(selectedCrop, () => {
-  draw();
+  draw()
 })
 </script>
 

vacs-map-app/src/components/MapContainerColor.vue

@@ -7,7 +7,12 @@
         :map="map"
         :map-ready="mapReady"
       />
-      <PopulationLayer id="population" :map="map" :map-ready="mapReady" :source-id="rasterSourceId" />
+      <PopulationLayer
+        id="population"
+        :map="map"
+        :map-ready="mapReady"
+        :source-id="rasterSourceId"
+      />
       <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
       <GridOverlay
         id="grid-layer-1"
@@ -19,6 +24,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>

vacs-map-app/src/components/MapContainerColorAcrossScenarios.vue

@@ -7,7 +7,12 @@
         :map="map"
         :map-ready="mapReady"
       />
-      <PopulationLayer id="population" :map="map" :map-ready="mapReady" :source-id="rasterSourceId" />
+      <PopulationLayer
+        id="population"
+        :map="map"
+        :map-ready="mapReady"
+        :source-id="rasterSourceId"
+      />
       <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
       <GridOverlay
         id="grid-layer-1"
@@ -19,6 +24,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>

vacs-map-app/src/components/MapContainerColorAfricanUnion.vue

@@ -23,6 +23,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>