diff --git a/vacs-map-app/package-lock.json b/vacs-map-app/package-lock.json
index 065c128..deb824b 100644
--- a/vacs-map-app/package-lock.json
+++ b/vacs-map-app/package-lock.json
@@ -10,6 +10,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",
@@ -301,6 +302,29 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/boolean-clockwise": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-6.5.0.tgz",
+      "integrity": "sha512-45+C7LC5RMbRWrxh3Z0Eihsc8db1VGBO5d9BLTOAwU4jR6SgsunTfRWR16X7JUwIDYlCVEmnjcXJNi/kIU3VIw==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/clone": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
+      "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/helpers": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
@@ -309,6 +333,17 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/invariant": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz",
+      "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/meta": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
@@ -320,6 +355,21 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/rewind": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/rewind/-/rewind-6.5.0.tgz",
+      "integrity": "sha512-IoUAMcHWotBWYwSYuYypw/LlqZmO+wcBpn8ysrBNbazkFNkLf3btSDZMkKJO/bvOzl55imr/Xj4fi3DdsLsbzQ==",
+      "dependencies": {
+        "@turf/boolean-clockwise": "^6.5.0",
+        "@turf/clone": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
diff --git a/vacs-map-app/package.json b/vacs-map-app/package.json
index 442171b..bb7296d 100644
--- a/vacs-map-app/package.json
+++ b/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",
diff --git a/vacs-map-app/public/data/african-union-regions-bboxes.geojson b/vacs-map-app/public/data/african-union-regions-bboxes.geojson
new file mode 100644
index 0000000..a897719
--- /dev/null
+++ b/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 ] ] ] } }
+]
+}
diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 1ce0035..30abbed 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/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>
diff --git a/vacs-map-app/src/components/DistributionPlot.vue b/vacs-map-app/src/components/DistributionPlot.vue
index dbab6f2..8286613 100644
--- a/vacs-map-app/src/components/DistributionPlot.vue
+++ b/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>
 
diff --git a/vacs-map-app/src/components/MapContainerColor.vue b/vacs-map-app/src/components/MapContainerColor.vue
index 14de7c5..78da4c3 100644
--- a/vacs-map-app/src/components/MapContainerColor.vue
+++ b/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>
diff --git a/vacs-map-app/src/components/MapContainerColorAcrossScenarios.vue b/vacs-map-app/src/components/MapContainerColorAcrossScenarios.vue
index 970b556..97b247c 100644
--- a/vacs-map-app/src/components/MapContainerColorAcrossScenarios.vue
+++ b/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>
diff --git a/vacs-map-app/src/components/MapContainerColorAfricanUnion.vue b/vacs-map-app/src/components/MapContainerColorAfricanUnion.vue
index 35d1bce..141b539 100644
--- a/vacs-map-app/src/components/MapContainerColorAfricanUnion.vue
+++ b/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>
diff --git a/vacs-map-app/src/components/MapContainerColorPopulation.vue b/vacs-map-app/src/components/MapContainerColorPopulation.vue
index 68a416a..e28f8d6 100644
--- a/vacs-map-app/src/components/MapContainerColorPopulation.vue
+++ b/vacs-map-app/src/components/MapContainerColorPopulation.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>
diff --git a/vacs-map-app/src/components/MapContainerColorRadius.vue b/vacs-map-app/src/components/MapContainerColorRadius.vue
index f16e093..72fddf9 100644
--- a/vacs-map-app/src/components/MapContainerColorRadius.vue
+++ b/vacs-map-app/src/components/MapContainerColorRadius.vue
@@ -14,6 +14,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>
diff --git a/vacs-map-app/src/components/MapContainerColorSand.vue b/vacs-map-app/src/components/MapContainerColorSand.vue
index 171697a..d7f199d 100644
--- a/vacs-map-app/src/components/MapContainerColorSand.vue
+++ b/vacs-map-app/src/components/MapContainerColorSand.vue
@@ -19,6 +19,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>
diff --git a/vacs-map-app/src/components/MapContainerColorSandSoil.vue b/vacs-map-app/src/components/MapContainerColorSandSoil.vue
index 857c529..b63f5de 100644
--- a/vacs-map-app/src/components/MapContainerColorSandSoil.vue
+++ b/vacs-map-app/src/components/MapContainerColorSandSoil.vue
@@ -31,6 +31,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>
diff --git a/vacs-map-app/src/components/MapContainerColorSoil.vue b/vacs-map-app/src/components/MapContainerColorSoil.vue
index e908058..83a41a7 100644
--- a/vacs-map-app/src/components/MapContainerColorSoil.vue
+++ b/vacs-map-app/src/components/MapContainerColorSoil.vue
@@ -24,6 +24,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>
diff --git a/vacs-map-app/src/components/MapContainerNotFilled.vue b/vacs-map-app/src/components/MapContainerNotFilled.vue
index 3d11f8a..d099096 100644
--- a/vacs-map-app/src/components/MapContainerNotFilled.vue
+++ b/vacs-map-app/src/components/MapContainerNotFilled.vue
@@ -14,6 +14,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>
diff --git a/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue b/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue
index ca7aba4..6a77d03 100644
--- a/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue
+++ b/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue
@@ -30,6 +30,7 @@
         :map="map"
         :mapReady="mapReady"
       />
+      <slot :map="map" :map-ready="mapReady"></slot>
     </template>
   </BaseMap>
 </template>
diff --git a/vacs-map-app/src/components/MapHomepage.vue b/vacs-map-app/src/components/MapHomepage.vue
index 943d8bc..6270667 100644
--- a/vacs-map-app/src/components/MapHomepage.vue
+++ b/vacs-map-app/src/components/MapHomepage.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chart-wrapper" ref="wrapperRef">
-    <canvas ref="canvasRef"/>
+    <canvas ref="canvasRef" />
   </div>
 </template>
 
@@ -22,14 +22,14 @@ const { data: cropYieldsData } = storeToRefs(cropYieldsStore)
 const { data: gridData } = storeToRefs(gridStore)
 const { availableCrops, availableModels } = storeToRefs(filtersStore)
 
-const wrapperRef = ref(null);
-const canvasRef = ref(null);
-const context = ref(null);
+const wrapperRef = ref(null)
+const canvasRef = ref(null)
+const context = ref(null)
 
-const inset = -20;
-const width = ref(0);
-const height = ref(0);
-const timer = ref(null);
+const inset = -20
+const width = ref(0)
+const height = ref(0)
+const timer = ref(null)
 
 // these variables control what crop/scenario we are currently looking at
 const selectedCropIndex = ref(0)
@@ -37,13 +37,13 @@ const selectedScenarioIndex = ref(0)
 const switchCrop = ref(false)
 
 useResizeObserver(wrapperRef, ([entry]) => {
-  width.value = entry.contentRect.width;
-  height.value = entry.contentRect.height;
+  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 futureScenarios = computed(() => availableModels.value.filter((d) => d.startsWith('future')))
 
@@ -66,16 +66,22 @@ const outline = { type: 'Sphere' }
 
 // this handles the projection, with translation and scale based on window size (responsive)
 const projection = computed(() => {
-  return d3.geoOrthographic()
-    .rotate([-18,-3])
-    .fitExtent([[inset, inset], [width.value - inset, height.value - inset]], outline)
+  return d3
+    .geoOrthographic()
+    .rotate([-18, -3])
+    .fitExtent(
+      [
+        [inset, inset],
+        [width.value - inset, height.value - inset]
+      ],
+      outline
+    )
 })
 
-
 const gridCells = computed(() => {
   if (!gridData.value || !cropYieldsData.value) return
   return gridData.value.map((cell, i) => {
-    const val = cropYieldsData.value[i][selectedColumn.value];
+    const val = cropYieldsData.value[i][selectedColumn.value]
     return {
       id: cell.id,
       val,
@@ -118,43 +124,47 @@ const updateGrid = () => {
     }
     switchCrop.value = true
   }
-  draw();
+  draw()
 }
 
 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)
 
   //draw 'globe'
-  const radius = Math.min(width.value, height.value)/2 - 90;
+  const radius = Math.min(width.value, height.value) / 2 - 90
   const gradient = context.value.createRadialGradient(
-    width.value/2, height.value/2, 0,
-    width.value/2, height.value/2, radius
-  );
-  gradient.addColorStop(0.05, '#3B4650');
-  gradient.addColorStop(0.99, '#272E34');
-  gradient.addColorStop(1, '#17191b');
-
-  context.value.fillStyle = gradient;
+    width.value / 2,
+    height.value / 2,
+    0,
+    width.value / 2,
+    height.value / 2,
+    radius
+  )
+  gradient.addColorStop(0.05, '#3B4650')
+  gradient.addColorStop(0.99, '#272E34')
+  gradient.addColorStop(1, '#17191b')
+
+  context.value.fillStyle = gradient
   context.value.fillRect(
-    width.value/2 - radius, 
-    height.value/2 - radius,
-    2*radius,
-    2*radius
-  );
+    width.value / 2 - radius,
+    height.value / 2 - radius,
+    2 * radius,
+    2 * radius
+  )
 
   //draw grid dots
-  const cellRadius = 1;
-  gridCells.value?.forEach(cell => {
-    context.value.beginPath();
-    context.value.arc(cell.x, cell.y, cellRadius, 0, Math.PI * 2, false);
-    context.value.fillStyle = cell.fill;
-    context.value.fill();
+  const cellRadius = 1
+  gridCells.value?.forEach((cell) => {
+    context.value.beginPath()
+    context.value.arc(cell.x, cell.y, cellRadius, 0, Math.PI * 2, false)
+    context.value.fillStyle = cell.fill
+    context.value.fill()
   })
-  context.value.restore();
+  context.value.restore()
 }
 
 onMounted(() => {
@@ -164,12 +174,12 @@ onMounted(() => {
   width.value = wrapperRef.value.clientWidth
   height.value = wrapperRef.value.clientHeight
 
-  canvasRef.value.width = width.value;
-  canvasRef.value.height = height.value;
+  canvasRef.value.width = width.value
+  canvasRef.value.height = height.value
 
   context.value = canvasRef.value?.getContext('2d')
 
-  draw();
+  draw()
 
   // call update grid every x milliseconds
   timer.value = setInterval(() => {
@@ -188,5 +198,4 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
 }
-
 </style>
diff --git a/vacs-map-app/src/components/PopulationLayer.vue b/vacs-map-app/src/components/PopulationLayer.vue
index 330b496..f259411 100644
--- a/vacs-map-app/src/components/PopulationLayer.vue
+++ b/vacs-map-app/src/components/PopulationLayer.vue
@@ -43,10 +43,8 @@ const getRasterColor = () => {
     //
     // const interpolator = d3.interpolateSinebow;
     // const interpolator = d3.interpolateCubehelixDefault
-;
-
     // Or define your own:
-    const interpolator = d3.interpolateHsl("transparent", "palegoldenrod");
+    const interpolator = d3.interpolateHsl('transparent', 'palegoldenrod')
 
     // const interpolator = d3.interpolateInferno
     return interpolator(value)
diff --git a/vacs-map-app/src/components/RegionPicker.vue b/vacs-map-app/src/components/RegionPicker.vue
new file mode 100644
index 0000000..80aaa04
--- /dev/null
+++ b/vacs-map-app/src/components/RegionPicker.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="region-picker" ref="wrapperRef">
+    <svg :width="width" :height="height">
+      <path
+        v-for="r in paths"
+        class="bbox-path"
+        :key="r.id"
+        :d="r.d"
+        @click="handleClick(r.geometry)"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, toRefs } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
+import * as d3 from 'd3'
+import bbox from '@turf/bbox'
+import rewind from '@turf/rewind'
+import { useAfricanUnionRegionsStore } from '@/stores/africanUnionRegions'
+
+const props = defineProps({
+  map: {
+    type: Object,
+    default: null
+  },
+
+  mapReady: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { map, mapReady } = toRefs(props)
+
+const africanUnionRegionsStore = useAfricanUnionRegionsStore()
+const { bboxes } = storeToRefs(africanUnionRegionsStore)
+
+const wrapperRef = ref(null)
+const width = ref(0)
+const height = ref(0)
+
+const fixedBboxes = computed(() => {
+  // NB: Rewind because of D3's winding order handling
+  return {
+    type: 'FeatureCollection',
+    features:
+      bboxes.value?.features?.map((f) => ({
+        ...f,
+        geometry: rewind(f.geometry, { reverse: true })
+      })) ?? []
+  }
+})
+
+const geoGenerator = computed(() => {
+  const v = d3.geoNaturalEarth1().fitSize([width.value, height.value], fixedBboxes.value)
+  return d3.geoPath(v)
+})
+
+useResizeObserver(wrapperRef, ([entry]) => {
+  width.value = entry.contentRect.width
+  height.value = entry.contentRect.height
+})
+
+onMounted(() => {
+  africanUnionRegionsStore.loadBboxes()
+})
+
+const paths = computed(() => {
+  return (
+    fixedBboxes.value?.features?.map((f) => {
+      return {
+        d: geoGenerator.value(f),
+        id: f.properties.AU_region,
+        geometry: f.geometry
+      }
+    }) ?? []
+  )
+})
+
+const handleClick = (geometry) => {
+  if (map.value && geometry) {
+    map.value.fitBounds(bbox(geometry))
+  }
+}
+</script>
+
+<style scoped>
+.bbox-path {
+  fill: rgba(251, 189, 5, 0.7);
+  fill-opacity: 0.8;
+}
+
+.bbox-path:hover {
+  fill: rgba(255, 109, 1, 0.7);
+}
+</style>
diff --git a/vacs-map-app/src/stores/africanUnionRegions.js b/vacs-map-app/src/stores/africanUnionRegions.js
index c34a74b..5391ce3 100644
--- a/vacs-map-app/src/stores/africanUnionRegions.js
+++ b/vacs-map-app/src/stores/africanUnionRegions.js
@@ -7,6 +7,9 @@ export const useAfricanUnionRegionsStore = defineStore('africanUnionRegions', ()
   const data = ref(null)
   const loading = ref(false)
 
+  const bboxes = ref(null)
+  const loadingBboxes = ref(false)
+
   const load = async () => {
     if (loading.value || data.value) return false
     loading.value = true
@@ -23,11 +26,26 @@ export const useAfricanUnionRegionsStore = defineStore('africanUnionRegions', ()
     }
 
     data.value = Object.freeze(geojson)
+    loading.value = false
+  }
+
+  const loadBboxes = async () => {
+    if (loadingBboxes.value || bboxes.value) return false
+    loadingBboxes.value = true
+
+    const response = await fetch(getDataUrl('african-union-regions-bboxes.geojson'))
+    const geojson = await response.json()
+
+    bboxes.value = Object.freeze(geojson)
+    loadingBboxes.value = false
   }
 
   return {
     data,
     loading,
-    load
+    load,
+    bboxes,
+    loadingBboxes,
+    loadBboxes
   }
 })