Choropleth Map

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

  const statesGeoJson = ref(null);

  // Unemployment rates by state (2024 data)
  const unemploymentByState = {
  'California': 5.3,
  'Texas': 4.1,
  'New York': 4.5,
  // ... more states
  };

  // Blues color scale for choropleth
  const colorScale = [
  { threshold: 0, color: '#f7fbff' },
  { threshold: 2, color: '#deebf7' },
  { threshold: 4, color: '#9ecae1' },
  { threshold: 6, color: '#4292c6' },
  { threshold: 8, color: '#084594' },
  ];

  const legendItems = colorScale.map(item => ({
  value: item.threshold,
  label: item.threshold + '%+',
  color: item.color,
  }));

  function getColorForRate(rate) {
  for (let i = colorScale.length - 1; i >= 0; i--) {
    if (rate >= colorScale[i].threshold) return colorScale[i].color;
  }
  return colorScale[0].color;
  }

  // Fetch real US states GeoJSON and merge with data
  async function fetchStatesData() {
  const response = await fetch(
    'https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json'
  );
  const data = await response.json();

  statesGeoJson.value = {
    type: 'FeatureCollection',
    features: data.features.map(feature => ({
      ...feature,
      properties: {
        ...feature.properties,
        rate: unemploymentByState[feature.properties.name] ?? 0,
        fillColor: getColorForRate(unemploymentByState[feature.properties.name] ?? 0)
      }
    }))
  };
  }
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerMaplibreGeojson
      source-id="states"
      layer-id="states-fill"
      :source="{ type: 'geojson', data: statesGeoJson }"
      :layer="{
        id: 'states-fill',
        type: 'fill',
        source: 'states',
        paint: { 'fill-color': ['get', 'fillColor'], 'fill-opacity': 0.8 }
      }"
    />
    <VControlLegend
      :layer-ids="['states-fill']"
      type="category"
      :items="legendItems"
      title="Unemployment Rate (%)"
      position="bottom-left"
    />
  </VMap>
</template>