style raster data + add combined sand+soil option

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',

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>

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)

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)
   }