From 736d408f00e72f13e21396f9a33681e679227edd Mon Sep 17 00:00:00 2001
From: Eric Brelsford <ebrelsford@stamen.com>
Date: Mon, 13 Nov 2023 10:56:41 -0500
Subject: [PATCH] More flexible layers (#17)

---
 vacs-map-app/src/App.vue                      |  58 +++-
 vacs-map-app/src/components/BaseMap.vue       |  10 +-
 vacs-map-app/src/components/Filters.vue       |   4 +-
 vacs-map-app/src/components/GridOverlay.vue   | 280 +++++++++---------
 vacs-map-app/src/components/GridSource.vue    |  86 ++++++
 .../src/components/MapContainerColor.vue      |  61 ++++
 .../components/MapContainerColorRadius.vue    |  82 +++++
 .../src/components/MapContainerNotFilled.vue  |  63 ++++
 .../MapContainerNotFilledTwoLayers.vue        | 102 +++++++
 9 files changed, 590 insertions(+), 156 deletions(-)
 create mode 100644 vacs-map-app/src/components/GridSource.vue
 create mode 100644 vacs-map-app/src/components/MapContainerColor.vue
 create mode 100644 vacs-map-app/src/components/MapContainerColorRadius.vue
 create mode 100644 vacs-map-app/src/components/MapContainerNotFilled.vue
 create mode 100644 vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue

diff --git a/vacs-map-app/src/App.vue b/vacs-map-app/src/App.vue
index a2162b1..d612750 100644
--- a/vacs-map-app/src/App.vue
+++ b/vacs-map-app/src/App.vue
@@ -1,21 +1,71 @@
 <template>
   <main>
-    <BaseMap />
-    <div class="overlay">
+    <div class="top-bar">
+      <select v-model="selectedMap">
+        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+      </select>
       <Filters />
     </div>
+    <component :is="selectedMapComponent" />
   </main>
 </template>
 
 <script setup>
-import BaseMap from '@/components/BaseMap.vue';
+import { computed, ref } from 'vue';
+import MapContainerColor from '@/components/MapContainerColor.vue';
+import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
+import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
+import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
 import Filters from '@/components/Filters.vue';
+
+const availableMaps = [
+  {
+    id: 'just-color',
+    name: 'dynamic color',
+    component: MapContainerColor,
+  },
+  {
+    id: 'color-and-radius-1',
+    name: 'dynamic color and radius (cropyield)',
+    component: MapContainerColorRadius,
+  },
+  {
+    id: 'not-filled',
+    name: 'circles not filled',
+    component: MapContainerNotFilled,
+  },
+  {
+    id: 'not-filled-2',
+    name: 'circles not filled, two layers',
+    component: MapContainerNotFilledTwoLayers,
+  },
+];
+const selectedMap = ref(availableMaps[0].id);
+const selectedMapComponent = computed(() => {
+  return availableMaps.find(({ id }) => id === selectedMap.value).component;
+});
 </script>
 
 <style scoped>
+main {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.top-bar {
+  padding: 0.5rem 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 .overlay {
   position: absolute;
   left: 1rem;
-  top: 1rem;
+  top: 3rem;
 }
 </style>
diff --git a/vacs-map-app/src/components/BaseMap.vue b/vacs-map-app/src/components/BaseMap.vue
index a2f2069..e4101a8 100644
--- a/vacs-map-app/src/components/BaseMap.vue
+++ b/vacs-map-app/src/components/BaseMap.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="base-map-wrapper">
     <div id="baseMapContainer" class="base-map"></div>
-    <GridOverlay :map="map" :mapReady="mapReady" />
+    <slot :map="map" :map-ready="mapReady"></slot>
   </div>
 </template>
 
@@ -14,7 +14,6 @@ import {
   MAPBOX_GL_ACCESS_TOKEN,
   MAPBOX_STYLE,
 } from '@/constants';
-import GridOverlay from './GridOverlay.vue';
 
 const map = shallowRef(null);
 const mapReady = ref(false);
@@ -45,8 +44,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.base-map-wrapper {
+  flex-grow: 1;
+}
+
 .base-map {
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
 }
 </style>
diff --git a/vacs-map-app/src/components/Filters.vue b/vacs-map-app/src/components/Filters.vue
index 5d75ece..fd67de6 100644
--- a/vacs-map-app/src/components/Filters.vue
+++ b/vacs-map-app/src/components/Filters.vue
@@ -57,10 +57,8 @@ const {
 
 <style scoped>
 .filters {
-  background: white;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 0.5rem;
-  padding: 1rem;
 }
 </style>
diff --git a/vacs-map-app/src/components/GridOverlay.vue b/vacs-map-app/src/components/GridOverlay.vue
index 39f9d9e..718f1bd 100644
--- a/vacs-map-app/src/components/GridOverlay.vue
+++ b/vacs-map-app/src/components/GridOverlay.vue
@@ -2,129 +2,104 @@
 
 <script setup>
 import * as d3 from 'd3';
-import { computed, onMounted, toRefs, watch } from 'vue';
-import { storeToRefs } from 'pinia';
-import { point, featureCollection } from '@turf/helpers';
-import { useFiltersStore } from '@/stores/filters';
-import { useCropYieldsStore } from '@/stores/cropYields';
-import { useGridStore } from '@/stores/grid';
+import { computed, toRefs, watch } from 'vue';
 
-const LAYER_ID = 'grid-overlay';
-const SOURCE_ID = 'grid-overlay';
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
 
-const cropYieldsStore = useCropYieldsStore();
-const filtersStore = useFiltersStore();
-const gridStore = useGridStore();
+  colorColumn: {
+    type: String,
+    default: '',
+  },
 
-const props = defineProps({
-  map: {
-    type: Object,
-    default: null,
+  colorColumnExtent: {
+    type: Array,
+    default: () => [],
   },
 
-  mapReady: {
+  colorColumnQuintiles: {
+    type: Array,
+    default: () => [],
+  },
+
+  colorDiverging: {
     type: Boolean,
     default: false,
   },
-});
 
-const { map, mapReady } = toRefs(props);
-
-const {
-  selectedCrop,
-  selectedMetric,
-  selectedModel
-} = storeToRefs(filtersStore);
-const { data: cropYieldsData } = storeToRefs(cropYieldsStore);
-const { data: gridData } = storeToRefs(gridStore);
-
-const selectedColumn = computed(() => {
-  return [
-    selectedMetric.value,
-    selectedCrop.value,
-    selectedModel.value,
-  ].join('_');
-});
+  radiusColumn: {
+    type: String,
+    default: '',
+  },
 
-const selectedColumnExtent = computed(() => {
-  return cropYieldsStore.getExtent(selectedColumn.value);
-});
+  radiusColumnExtent: {
+    type: Array,
+    default: () => [],
+  },
 
-const selectedColumnQuintiles = computed(() => {
-  return cropYieldsStore.getQuintiles(selectedColumn.value);
-});
+  fill: {
+    type: Boolean,
+    default: true,
+  },
 
-onMounted(() => {
-  gridStore.load();
-  cropYieldsStore.load();
-});
+  stroke: {
+    type: Boolean,
+    default: false,
+  },
 
-// TODO do this stuff in another store?
-const joinData = (grid, yields) => {
-  const joined = Object.fromEntries(grid.map(row => ([row.id, row])));
-  yields
-    .forEach(row => {
-      if (joined[row.id]) {
-        joined[row.id] = { ...joined[row.id], ...row};
-      }
-    })
-  return Object.values(joined);
-};
+  map: {
+    type: Object,
+    default: null,
+  },
 
-const joinedData = computed(() => {
-  if (!gridData.value) return [];
-  if (cropYieldsData.value) {
-    return joinData(gridData.value, cropYieldsData.value);
-  }
-  return gridData.value;
-});
+  mapReady: {
+    type: Boolean,
+    default: false,
+  },
 
-const joinedGeoJson = computed(() => {
-  return featureCollection(
-    joinedData.value.map(row => point([row.X, row.Y], row, { id: row.id }))
-  );
+  sourceId: {
+    type: String,
+    default: '',
+  },
 });
 
-const addSource = (geoJson) => {
-  if (!map.value || !mapReady.value || map.value.getSource(SOURCE_ID)) return;
-
-  map.value.addSource(SOURCE_ID, {
-    type: 'geojson',
-    data: geoJson,
-  });
-};
+const {
+  id,
+  colorColumn,
+  colorColumnExtent,
+  colorColumnQuintiles,
+  colorDiverging,
+  fill,
+  radiusColumn,
+  radiusColumnExtent,
+  map,
+  mapReady,
+  sourceId,
+  stroke,
+} = toRefs(props);
 
 const addLayer = () => {
-  if (!map.value || !mapReady.value || map.value.getLayer(LAYER_ID)) return;
+  if (!map.value || !mapReady.value || map.value.getLayer(id.value)) return;
   map.value.addLayer({
-    id: LAYER_ID,
-    source: SOURCE_ID,
+    id: id.value,
+    source: sourceId.value,
     type: 'circle',
     paint: {
-      'circle-radius': [
-        'interpolate',
-        ['linear'],
-        ['zoom'],
-        1, 1,
-        5, 5,
-        9, 25
-      ],
-      'circle-stroke-width': 0.2,
-      'circle-stroke-color': 'gray',
-      'circle-stroke-opacity': 0,
+      'circle-radius': getCircleRadius(),
+      'circle-stroke-width': fill.value ? 0.2 : 1.5,
+      'circle-stroke-color': getCircleStrokeColor(),
+      'circle-stroke-opacity': fill.value ? 0 : 0.8,
       'circle-opacity': 1,
-      'circle-color': getCircleColor(),
+      'circle-color': getCircleFillColor(),
     }
   }, 'country-label-filter');
 
   updateLayer();
 };
 
-const addLayerToMap = (geoJson) => {
-  addSource(geoJson);
-  addLayer();
-};
-
 const getCircleColorQuintiles = (quintiles) => {
   if (!quintiles) return 'gray';
 
@@ -146,11 +121,11 @@ const getCircleColorQuintiles = (quintiles) => {
   // to strict buckets if we prefer.
   return [
     'case',
-    ['!=', ['get', selectedColumn.value], null],
+    ['!=', ['get', colorColumn.value], null],
     [
       'interpolate',
       ['linear'],
-      ['get', selectedColumn.value],
+      ['get', colorColumn.value],
       ...quintiles.map(({ value, quantile }) => ([value, getColor(quantile)])).flat()
     ],
     'transparent',
@@ -158,30 +133,48 @@ const getCircleColorQuintiles = (quintiles) => {
 };
 
 const getCircleRadius = () => {
-  return [
-    'interpolate',
-    ['linear'],
-    ['zoom'],
-    1,
-    [
-      'interpolate', 
-      ['linear'], 
-      ['get', selectedMetric.value],
-      // value, size
-      0, 0.1,
-      10000, 0.3,
-      28000, 0.5
+  if (!radiusColumn.value || !radiusColumnExtent.value) {
+    return [
+      'interpolate',
+      ['linear'],
+      ['zoom'],
+      1, 1,
+      5, 5,
+      9, 25
+    ];
+  }
+  else {
+    const [min, max] = radiusColumnExtent.value;
+    const inputs = [
+      min,
+      min + (max - min) / 2,
+      max,
+    ];
+
+    return [
+      'interpolate',
+      ['linear'],
+      ['zoom'],
+      1,
+      [
+        'interpolate', 
+        ['linear'], 
+        ['get', radiusColumn.value],
+        inputs[0], 0.1,
+        inputs[1], 0.3,
+        inputs[2], 0.5
       ],
-    6,
-    [
-      'interpolate', 
-      ['linear'], 
-      ['get', selectedMetric.value],
-      0, 2,
-      10000, 5,
-      28000, 10
+      6,
+      [
+        'interpolate', 
+        ['linear'], 
+        ['get', radiusColumn.value],
+        inputs[0], 2,
+        inputs[1], 5,
+        inputs[2], 10
       ]
-  ];
+    ];
+  }
 };
 
 const getCircleColorExtent = (extent) => {
@@ -194,11 +187,11 @@ const getCircleColorExtent = (extent) => {
 
   return [
     'case',
-    ['!=', ['get', selectedColumn.value], null],
+    ['!=', ['get', colorColumn.value], null],
     [
       'interpolate',
       ['linear'],
-      ['get', selectedColumn.value],
+      ['get', colorColumn.value],
       min, 'red',
       middle, 'yellow',
       max, 'green',
@@ -224,11 +217,11 @@ const getCircleColorDiverging = (extent, center) => {
 
   return [
     'case',
-    ['!=', ['get', selectedColumn.value], null],
+    ['!=', ['get', colorColumn.value], null],
     [
       'interpolate',
       ['linear'],
-      ['get', selectedColumn.value],
+      ['get', colorColumn.value],
       min, getColor(0),
       center, getColor(0.5),
       max, getColor(1),
@@ -237,45 +230,42 @@ const getCircleColorDiverging = (extent, center) => {
   ];
 }
 
+const getCircleFillColor = () => {
+  if (!fill.value) return 'transparent';
+  return getCircleColor();
+};
+
+const getCircleStrokeColor = () => {
+  if (!stroke.value) return 'transparent';
+  return getCircleColor();
+};
+
 const getCircleColor = () => {
-  if (selectedMetric.value === 'yieldratio') {
+  if (colorDiverging.value) {
     // < 1, decrease
     // 1 = no change
     // > 1, increase
-    return getCircleColorDiverging(selectedColumnExtent.value, 1);
+    return getCircleColorDiverging(colorColumnExtent.value, 1);
   }
 
-  return getCircleColorQuintiles(selectedColumnQuintiles.value);
+  return getCircleColorQuintiles(colorColumnQuintiles.value);
 
   // Defaulting to using quintiles but here's how to invoke another method:
-  // return getCircleColorExtent(selectedColumnExtent.value);
+  // return getCircleColorExtent(colorColumnExtent.value);
 };
 
 const updateLayer = () => {
-  if (!map.value.getLayer(LAYER_ID)) return;
-  map.value.setPaintProperty(LAYER_ID, 'circle-color', getCircleColor());
-  // map.value.setPaintProperty(LAYER_ID, 'circle-radius', getCircleRadius());
+  if (!map.value.getLayer(id.value)) return;
+  map.value.setPaintProperty(id.value, 'circle-color', getCircleFillColor());
+  map.value.setPaintProperty(id.value, 'circle-stroke-color', getCircleStrokeColor());
+  map.value.setPaintProperty(id.value, 'circle-radius', getCircleRadius());
 };
 
 watch(mapReady, () => {
-  if (!joinedGeoJson.value) return;
-  addLayerToMap(joinedGeoJson.value);
-});
-
-watch(joinedGeoJson, () => {
-  if (!joinedGeoJson.value) return;
-  addLayerToMap(joinedGeoJson.value);
-});
-
-watch(selectedMetric, () => {
-  updateLayer();
-});
-
-watch(selectedModel, () => {
-  updateLayer();
+  addLayer();
 });
 
-watch(selectedCrop, () => {
+watch(colorColumn, () => {
   updateLayer();
 });
 </script>
diff --git a/vacs-map-app/src/components/GridSource.vue b/vacs-map-app/src/components/GridSource.vue
new file mode 100644
index 0000000..1096ab3
--- /dev/null
+++ b/vacs-map-app/src/components/GridSource.vue
@@ -0,0 +1,86 @@
+<template></template>
+
+<script setup>
+import { computed, onMounted, toRefs, watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { point, featureCollection } from '@turf/helpers';
+import { useCropYieldsStore } from '@/stores/cropYields';
+import { useGridStore } from '@/stores/grid';
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+
+  map: {
+    type: Object,
+    default: null,
+  },
+
+  mapReady: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { id, map, mapReady } = toRefs(props);
+
+const cropYieldsStore = useCropYieldsStore();
+const gridStore = useGridStore();
+
+const { data: cropYieldsData } = storeToRefs(cropYieldsStore);
+const { data: gridData } = storeToRefs(gridStore);
+
+onMounted(() => {
+  gridStore.load();
+  cropYieldsStore.load();
+});
+
+// TODO do this stuff in another store?
+const joinData = (grid, yields) => {
+  const joined = Object.fromEntries(grid.map(row => ([row.id, row])));
+  yields
+    .forEach(row => {
+      if (joined[row.id]) {
+        joined[row.id] = { ...joined[row.id], ...row};
+      }
+    })
+  return Object.values(joined);
+};
+
+const joinedData = computed(() => {
+  if (!gridData.value) return [];
+  if (cropYieldsData.value) {
+    return joinData(gridData.value, cropYieldsData.value);
+  }
+  return gridData.value;
+});
+
+const joinedGeoJson = computed(() => {
+  return featureCollection(
+    joinedData.value.map(row => point([row.X, row.Y], row, { id: row.id }))
+  );
+});
+
+const addSource = (geoJson) => {
+  if (!map.value || !mapReady.value || map.value.getSource(id)) return;
+
+  map.value.addSource(id.value, {
+    type: 'geojson',
+    data: geoJson,
+  });
+};
+
+watch(mapReady, () => {
+  if (!joinedGeoJson.value) return;
+  addSource(joinedGeoJson.value);
+});
+
+watch(joinedGeoJson, () => {
+  if (!joinedGeoJson.value) return;
+  addSource(joinedGeoJson.value);
+});
+</script>
+
+<style></style>
diff --git a/vacs-map-app/src/components/MapContainerColor.vue b/vacs-map-app/src/components/MapContainerColor.vue
new file mode 100644
index 0000000..acc7bac
--- /dev/null
+++ b/vacs-map-app/src/components/MapContainerColor.vue
@@ -0,0 +1,61 @@
+<template>
+  <BaseMap>
+    <template v-slot="{ map, mapReady }">
+      <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
+      <GridOverlay
+        id="grid-layer-1"
+        :color-column="selectedColumn"
+        :color-column-extent="selectedColumnExtent"
+        :color-column-quintiles="selectedColumnQuintiles"
+        :color-diverging="false"
+        :sourceId="sourceId"
+        :map="map"
+        :mapReady="mapReady"
+      />
+    </template>
+  </BaseMap>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import BaseMap from '@/components/BaseMap.vue';
+import { useFiltersStore } from '@/stores/filters';
+import { useCropYieldsStore } from '@/stores/cropYields';
+import GridSource from './GridSource.vue';
+import GridOverlay from './GridOverlay.vue';
+
+const sourceId = 'cropGrid';
+const cropYieldsStore = useCropYieldsStore();
+const filtersStore = useFiltersStore();
+
+const {
+  selectedCrop,
+  selectedMetric,
+  selectedModel
+} = storeToRefs(filtersStore);
+
+const selectedColumn = computed(() => {
+  if (!selectedMetric.value || !selectedCrop.value || !selectedModel.value) {
+    return null;
+  }
+
+  return [
+    selectedMetric.value,
+    selectedCrop.value,
+    selectedModel.value,
+  ].join('_');
+});
+
+const selectedColumnExtent = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getExtent(selectedColumn.value);
+});
+
+const selectedColumnQuintiles = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getQuintiles(selectedColumn.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/vacs-map-app/src/components/MapContainerColorRadius.vue b/vacs-map-app/src/components/MapContainerColorRadius.vue
new file mode 100644
index 0000000..eb3e9a0
--- /dev/null
+++ b/vacs-map-app/src/components/MapContainerColorRadius.vue
@@ -0,0 +1,82 @@
+<template>
+  <BaseMap>
+    <template v-slot="{ map, mapReady }">
+      <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
+      <GridOverlay
+        id="grid-layer-1"
+        :color-column="selectedColumn"
+        :color-column-extent="selectedColumnExtent"
+        :color-column-quintiles="selectedColumnQuintiles"
+        :color-diverging="false"
+        :radius-column="radiusColumn"
+        :radius-column-extent="radiusColumnExtent"
+        :sourceId="sourceId"
+        :map="map"
+        :mapReady="mapReady"
+      />
+    </template>
+  </BaseMap>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import BaseMap from '@/components/BaseMap.vue';
+import { useFiltersStore } from '@/stores/filters';
+import { useCropYieldsStore } from '@/stores/cropYields';
+import GridSource from './GridSource.vue';
+import GridOverlay from './GridOverlay.vue';
+
+const sourceId = 'cropGrid';
+const cropYieldsStore = useCropYieldsStore();
+const filtersStore = useFiltersStore();
+
+const {
+  selectedCrop,
+  selectedMetric,
+  selectedModel
+} = storeToRefs(filtersStore);
+
+const selectedColumn = computed(() => {
+  if (!selectedMetric.value || !selectedCrop.value || !selectedModel.value) {
+    return null;
+  }
+
+  return [
+    selectedMetric.value,
+    selectedCrop.value,
+    selectedModel.value,
+  ].join('_');
+});
+
+const selectedColumnExtent = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getExtent(selectedColumn.value);
+});
+
+const selectedColumnQuintiles = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getQuintiles(selectedColumn.value);
+});
+
+const radiusColumn = computed(() => {
+  if (!selectedMetric.value || !selectedCrop.value || !selectedModel.value) {
+    return null;
+  }
+
+  // As an  example, adding a radius column that is always the yield ratio for
+  // the selected crop + model
+  return [
+    'yieldratio',
+    selectedCrop.value,
+    selectedModel.value,
+  ].join('_');
+});
+
+const radiusColumnExtent = computed(() => {
+  if (!radiusColumn.value) return null;
+  return cropYieldsStore.getExtent(radiusColumn.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/vacs-map-app/src/components/MapContainerNotFilled.vue b/vacs-map-app/src/components/MapContainerNotFilled.vue
new file mode 100644
index 0000000..b98fd7c
--- /dev/null
+++ b/vacs-map-app/src/components/MapContainerNotFilled.vue
@@ -0,0 +1,63 @@
+<template>
+  <BaseMap>
+    <template v-slot="{ map, mapReady }">
+      <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
+      <GridOverlay
+        id="grid-layer-1"
+        :color-column="selectedColumn"
+        :color-column-extent="selectedColumnExtent"
+        :color-column-quintiles="selectedColumnQuintiles"
+        :color-diverging="false"
+        :fill="false"
+        :stroke="true"
+        :sourceId="sourceId"
+        :map="map"
+        :mapReady="mapReady"
+      />
+    </template>
+  </BaseMap>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import BaseMap from '@/components/BaseMap.vue';
+import { useFiltersStore } from '@/stores/filters';
+import { useCropYieldsStore } from '@/stores/cropYields';
+import GridSource from './GridSource.vue';
+import GridOverlay from './GridOverlay.vue';
+
+const sourceId = 'cropGrid';
+const cropYieldsStore = useCropYieldsStore();
+const filtersStore = useFiltersStore();
+
+const {
+  selectedCrop,
+  selectedMetric,
+  selectedModel
+} = storeToRefs(filtersStore);
+
+const selectedColumn = computed(() => {
+  if (!selectedMetric.value || !selectedCrop.value || !selectedModel.value) {
+    return null;
+  }
+
+  return [
+    selectedMetric.value,
+    selectedCrop.value,
+    selectedModel.value,
+  ].join('_');
+});
+
+const selectedColumnExtent = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getExtent(selectedColumn.value);
+});
+
+const selectedColumnQuintiles = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getQuintiles(selectedColumn.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue b/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue
new file mode 100644
index 0000000..5bcbd26
--- /dev/null
+++ b/vacs-map-app/src/components/MapContainerNotFilledTwoLayers.vue
@@ -0,0 +1,102 @@
+<template>
+  <BaseMap>
+    <template v-slot="{ map, mapReady }">
+      <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
+      <GridOverlay
+        id="grid-layer-1"
+        :color-column="selectedColumn"
+        :color-column-extent="selectedColumnExtent"
+        :color-column-quintiles="selectedColumnQuintiles"
+        :color-diverging="false"
+        :radius-column="selectedColumn"
+        :radius-column-extent="selectedColumnExtent"
+        :fill="false"
+        :stroke="true"
+        :sourceId="sourceId"
+        :map="map"
+        :mapReady="mapReady"
+      />
+      <GridOverlay
+        id="grid-layer-2"
+        :color-column="comparisonColumn"
+        :color-column-extent="comparisonColumnExtent"
+        :color-column-quintiles="comparisonColumnQuintiles"
+        :color-diverging="false"
+        :radius-column="comparisonColumn"
+        :radius-column-extent="comparisonColumnExtent"
+        :fill="false"
+        :stroke="true"
+        :sourceId="sourceId"
+        :map="map"
+        :mapReady="mapReady"
+      />
+    </template>
+  </BaseMap>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import BaseMap from '@/components/BaseMap.vue';
+import { useFiltersStore } from '@/stores/filters';
+import { useCropYieldsStore } from '@/stores/cropYields';
+import GridSource from './GridSource.vue';
+import GridOverlay from './GridOverlay.vue';
+
+const sourceId = 'cropGrid';
+const cropYieldsStore = useCropYieldsStore();
+const filtersStore = useFiltersStore();
+
+const {
+  selectedCrop,
+  selectedMetric,
+  selectedModel
+} = storeToRefs(filtersStore);
+
+const selectedColumn = computed(() => {
+  if (!selectedMetric.value || !selectedCrop.value || !selectedModel.value) {
+    return null;
+  }
+
+  return [
+    selectedMetric.value,
+    selectedCrop.value,
+    selectedModel.value,
+  ].join('_');
+});
+
+const selectedColumnExtent = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getExtent(selectedColumn.value);
+});
+
+const selectedColumnQuintiles = computed(() => {
+  if (!selectedColumn.value) return null;
+  return cropYieldsStore.getQuintiles(selectedColumn.value);
+});
+
+// Comparison column just always shows maize
+const comparisonColumn = computed(() => {
+  if (!selectedMetric.value || !selectedCrop.value || !selectedModel.value) {
+    return null;
+  }
+
+  return [
+    selectedMetric.value,
+    'maize',
+    selectedModel.value,
+  ].join('_');
+});
+
+const comparisonColumnExtent = computed(() => {
+  if (!comparisonColumn.value) return null;
+  return cropYieldsStore.getExtent(comparisonColumn.value);
+});
+
+const comparisonColumnQuintiles = computed(() => {
+  if (!comparisonColumn.value) return null;
+  return cropYieldsStore.getQuintiles(comparisonColumn.value);
+});
+</script>
+
+<style scoped></style>