From 4bd2d6a9d90e5e476e56b25b188245da3b85165c Mon Sep 17 00:00:00 2001
From: kelsey-taylor <kelsey@stamen.com>
Date: Wed, 22 Nov 2023 16:22:07 -0500
Subject: [PATCH] style raster data + add combined sand+soil option

---
 vacs-map-app/src/MapExplorer.vue              |  6 ++
 .../components/MapContainerColorSandSoil.vue  | 77 +++++++++++++++++++
 vacs-map-app/src/components/SandLayer.vue     |  6 +-
 .../src/components/SoilCarbonLayer.vue        |  4 +-
 4 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 vacs-map-app/src/components/MapContainerColorSandSoil.vue

diff --git a/vacs-map-app/src/MapExplorer.vue b/vacs-map-app/src/MapExplorer.vue
index 5efb90c..556ae48 100644
--- a/vacs-map-app/src/MapExplorer.vue
+++ b/vacs-map-app/src/MapExplorer.vue
@@ -23,6 +23,7 @@ import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
 import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
 import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
 import MapContainerColorAfricanUnion from '@/components/MapContainerColorAfricanUnion.vue';
+import MapContainerColorSandSoil from '@/components/MapContainerColorSandSoil.vue';
 import MapContainerColorSoil from '@/components/MapContainerColorSoil.vue';
 import MapContainerColorSand from '@/components/MapContainerColorSand.vue';
 import { useMapExploreStore } from '@/stores/mapExplore';
@@ -60,6 +61,11 @@ const availableMaps = [
     name: 'circles + african union regions',
     component: MapContainerColorAfricanUnion
   },
+  {
+    id: 'sand-soil',
+    name: 'circles + sand + soil carbon',
+    component: MapContainerColorSandSoil
+  },
   {
     id: 'soil',
     name: 'circles + soil carbon',
diff --git a/vacs-map-app/src/components/MapContainerColorSandSoil.vue b/vacs-map-app/src/components/MapContainerColorSandSoil.vue
new file mode 100644
index 0000000..857c529
--- /dev/null
+++ b/vacs-map-app/src/components/MapContainerColorSandSoil.vue
@@ -0,0 +1,77 @@
+<template>
+  <BaseMap>
+    <template v-slot="{ map, mapReady }">
+      <RasterSource
+        :id="rasterSourceId"
+        tiles-url="https://plotine-vacs.s3.us-east-2.amazonaws.com/carbon-tiles/{z}/{x}/{y}.png"
+        :map="map"
+        :map-ready="mapReady"
+      />
+      <SoilCarbonLayer
+        id="soil-carbon"
+        :map="map"
+        :map-ready="mapReady"
+        :source-id="rasterSourceId"
+      />
+      <RasterSource
+        :id="rasterSourceId2"
+        tiles-url="https://plotine-vacs.s3.us-east-2.amazonaws.com/sand-tiles/{z}/{x}/{y}.png"
+        :map="map"
+        :map-ready="mapReady"
+      />
+      <SandLayer id="sand" :map="map" :map-ready="mapReady" :source-id="rasterSourceId2" />
+      <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="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'
+import RasterSource from './RasterSource.vue'
+import SoilCarbonLayer from './SoilCarbonLayer.vue'
+import SandLayer from './SandLayer.vue'
+
+const sourceId = 'cropGrid'
+const rasterSourceId = 'soilCarbonSource'
+const rasterSourceId2 = 'sandSource'
+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/SandLayer.vue b/vacs-map-app/src/components/SandLayer.vue
index 51ba85a..d246c85 100644
--- a/vacs-map-app/src/components/SandLayer.vue
+++ b/vacs-map-app/src/components/SandLayer.vue
@@ -31,7 +31,7 @@ const props = defineProps({
 
 const { id, map, mapReady, sourceId } = toRefs(props)
 
-const minRasterValue = 0
+const minRasterValue = 50
 const maxRasterValue = 100
 
 const getRasterColor = () => {
@@ -41,11 +41,11 @@ const getRasterColor = () => {
     //
     // Like this:
     //
-    // const interpolator = d3.interpolateBrBG;
+    // const interpolator = d3.interpolateRainbow;
     // const interpolator = d3.interpolatePiYG;
 
     // Or define your own:
-    const interpolator = d3.interpolateHsl("hsl(60, 2%, 34%)", "red");
+    const interpolator = d3.interpolateHsl("transparent", "orange");
 
     // const interpolator = d3.interpolateInferno
     return interpolator(value)
diff --git a/vacs-map-app/src/components/SoilCarbonLayer.vue b/vacs-map-app/src/components/SoilCarbonLayer.vue
index 3d30617..681a7ac 100644
--- a/vacs-map-app/src/components/SoilCarbonLayer.vue
+++ b/vacs-map-app/src/components/SoilCarbonLayer.vue
@@ -37,9 +37,9 @@ const maxRasterValue = 100
 const getRasterColor = () => {
   const getColor = (value) => {
     // const interpolator = d3.interpolateBrBG;
-    const interpolator = d3.interpolateHsl("hsl(60, 2%, 34%)", "#DEB887");
+    const interpolator = d3.interpolateHsl("hsla(143, 52%, 13%, 0)", "#6DACA4");
     // const interpolator = d3.interpolatePiYG;
-    // const interpolator = d3.interpolateInferno
+    // const interpolator = d3.interpolateCubehelixDefault
 
     return interpolator(value)
   }