Merge pull request #55 from earthrise-media/layer-order

vacs-map-app/src/MapExplorer.vue

@@ -26,6 +26,7 @@ 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 { useMapExploreStore } from '@/stores/mapExplore'
 import LayoutOverview from './components/layouts/LayoutOverview.vue'
 import ExploreSidebar from './components/ExploreSidebar.vue'
@@ -75,7 +76,12 @@ const availableMaps = [
     id: 'sand',
     name: 'circles + sand',
     component: MapContainerColorSand
-  }
+  },
+  {
+    id: 'population',
+    name: 'circles + population',
+    component: MapContainerColorPopulation
+  },
 ]
 
 const mapExploreStore = useMapExploreStore()

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

@@ -19,7 +19,9 @@ const initializeMap = () => {
   let mapOptions = {
     container: 'baseMapContainer',
     style: MAPBOX_STYLE,
-    bounds: INITIAL_MAP_BOUNDS
+    bounds: INITIAL_MAP_BOUNDS,
+    minZoom: 2,
+    maxzoom: 12
   }
 
   map.value = new mapboxgl.Map(mapOptions)

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

@@ -99,7 +99,7 @@ const addLayer = () => {
         'circle-blur': 0.5
       }
     },
-    'country-label-filter'
+    'settlement-subdivision-label'
   )
 
   updateLayer()
@@ -140,7 +140,7 @@ const getCircleColorQuintiles = (quintiles) => {
 
 const getCircleRadius = () => {
   if (!radiusColumn.value || !radiusColumnExtent.value) {
-    return ['interpolate', ['linear'], ['zoom'], 1, 1, 3, 3, 5, 7, 9, 25]
+    return ['interpolate', ['linear'], ['zoom'], 1, 1, 3, 3, 5, 10, 9, 30]
   } else {
     const [min, max] = radiusColumnExtent.value
     const inputs = [min, min + (max - min) / 2, max]

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

@@ -1,6 +1,13 @@
 <template>
   <BaseMap>
     <template v-slot="{ map, mapReady }">
+      <RasterSource
+        :id="rasterSourceId"
+        tiles-url="https://plotine-vacs.s3.us-east-2.amazonaws.com/population-tiles/{z}/{x}/{y}.png"
+        :map="map"
+        :map-ready="mapReady"
+      />
+      <PopulationLayer id="population" :map="map" :map-ready="mapReady" :source-id="rasterSourceId" />
       <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
       <GridOverlay
         id="grid-layer-1"
@@ -24,8 +31,11 @@ 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 PopulationLayer from './PopulationLayer.vue'
 
 const sourceId = 'cropGrid'
+const rasterSourceId = 'populationSource'
 const cropYieldsStore = useCropYieldsStore()
 const filtersStore = useFiltersStore()
 

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

@@ -1,6 +1,13 @@
 <template>
   <BaseMap>
     <template v-slot="{ map, mapReady }">
+      <RasterSource
+        :id="rasterSourceId"
+        tiles-url="https://plotine-vacs.s3.us-east-2.amazonaws.com/population-tiles/{z}/{x}/{y}.png"
+        :map="map"
+        :map-ready="mapReady"
+      />
+      <PopulationLayer id="population" :map="map" :map-ready="mapReady" :source-id="rasterSourceId" />
       <GridSource :id="sourceId" :map="map" :mapReady="mapReady" />
       <GridOverlay
         id="grid-layer-1"
@@ -24,9 +31,12 @@ 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 PopulationLayer from './PopulationLayer.vue'
 import * as d3 from 'd3'
 
 const sourceId = 'cropGrid'
+const rasterSourceId = 'populationSource'
 const cropYieldsStore = useCropYieldsStore()
 const filtersStore = useFiltersStore()
 

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

@@ -0,0 +1,63 @@
+<template>
+  <BaseMap>
+    <template v-slot="{ map, mapReady }">
+      <RasterSource
+        :id="rasterSourceId"
+        tiles-url="https://plotine-vacs.s3.us-east-2.amazonaws.com/population-tiles/{z}/{x}/{y}.png"
+        :map="map"
+        :map-ready="mapReady"
+      />
+      <PopulationLayer id="population" :map="map" :map-ready="mapReady" :source-id="rasterSourceId" />
+      <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 PopulationLayer from './PopulationLayer.vue'
+
+const sourceId = 'cropGrid'
+const rasterSourceId = 'populationSource'
+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/PopulationLayer.vue

@@ -0,0 +1,71 @@
+<template>
+  <RasterLayer :id="id" :map="map" :map-ready="mapReady" :source-id="sourceId" :paint="paint" />
+</template>
+
+<script setup>
+import * as d3 from 'd3'
+import { toRefs, watch } from 'vue'
+import RasterLayer from './RasterLayer.vue'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: ''
+  },
+
+  map: {
+    type: Object,
+    default: null
+  },
+
+  mapReady: {
+    type: Boolean,
+    default: false
+  },
+
+  sourceId: {
+    type: String,
+    default: ''
+  }
+})
+
+const { id, map, mapReady, sourceId } = toRefs(props)
+
+const minRasterValue = 0
+const maxRasterValue = 20
+
+const getRasterColor = () => {
+  const getColor = (value) => {
+    // Pick an interpolate function here:
+    //  https://d3js.org/d3-scale-chromatic/sequential
+    //
+    // Like this:
+    //
+    // const interpolator = d3.interpolateSinebow;
+    // const interpolator = d3.interpolateCubehelixDefault
+;
+
+    // Or define your own:
+    const interpolator = d3.interpolateHsl("transparent", "palegoldenrod");
+
+    // const interpolator = d3.interpolateInferno
+    return interpolator(value)
+  }
+
+  const steps = d3
+    .range(0, 5, 1)
+    .map((i) => [minRasterValue + maxRasterValue * (i * 0.25), getColor(i * 0.25)])
+    .flat()
+
+  return ['interpolate', ['linear'], ['raster-value'], ...steps]
+}
+
+const paint = {
+  'raster-color': getRasterColor(),
+  'raster-opacity': 0.45,
+  'raster-color-mix': [255, 0, 0, 0],
+  'raster-color-range': [0, maxRasterValue]
+}
+</script>
+
+<style scoped></style>

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

@@ -42,7 +42,7 @@ const addLayer = () => {
       type: 'raster',
       paint: paint.value
     },
-    'country-label-filter'
+    'settlement-subdivision-label'
   )
 }