Climate Equivalents

<script setup lang="ts">
import {
  VMap,
  VControlNavigation,
  VControlScale,
  VLayerMaplibreGeojson,
  VMarker,
} from '@geoql/v-maplibre';

const { mapStyle } = useMapStyle();

const mapOptions = computed(() => ({
  style: mapStyle.value,
  center: [10, 25],
  zoom: 1.4,
}));

const zones = await $fetch('/data/climate/country-zones.geojson');

function buildFillColorExpression() {
  const expr = ['match', ['get', 'koppen_class']];
  // ... map all 30 Köppen classes to their colors
  expr.push('#cccccc');
  return expr;
}
</script>

<template>
  <VMap :options="mapOptions" class="size-full">
    <VControlNavigation position="top-right" />
    <VControlScale position="bottom-left" />

    <VLayerMaplibreGeojson
      source-id="zones"
      layer-id="zones-fill"
      :source="{ type: 'geojson', data: zones }"
      :layer="{
        id: 'zones-fill',
        type: 'fill',
        source: 'zones',
        paint: {
          'fill-color': buildFillColorExpression(),
          'fill-opacity': 0.78,
        },
      }"
    />

    <VMarker
      v-for="label in regionLabels"
      :key="label.klass"
      :coordinates="label.anchor"
    >
      <div class="text-xs font-semibold">
        Climate of {{ label.exemplarName }}
      </div>
    </VMarker>
  </VMap>
</template>