Interactive Legend

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

  const legendItems: CategoryLegendItem[] = [
  { value: 'West', label: 'West', color: '#e41a1c', visible: true },
  { value: 'Southwest', label: 'Southwest', color: '#377eb8', visible: true },
  { value: 'Midwest', label: 'Midwest', color: '#4daf4a', visible: true },
  { value: 'Southeast', label: 'Southeast', color: '#984ea3', visible: true },
  { value: 'Northeast', label: 'Northeast', color: '#ff7f00', visible: true },
  ];
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerMaplibreGeojson
      source-id="regions"
      layer-id="regions-fill"
      :source="{ type: 'geojson', data: statesGeoJson }"
      :layer="{
        id: 'regions-fill',
        type: 'fill',
        paint: {
          'fill-color': [
            'match', ['get', 'region'],
            'West', '#e41a1c',
            'Southwest', '#377eb8',
            'Midwest', '#4daf4a',
            'Southeast', '#984ea3',
            'Northeast', '#ff7f00',
            '#999999'
          ],
          'fill-opacity': 0.7
        }
      }"
    />

    <!-- Category Legend with click-to-filter -->
    <VControlLegend
      :layer-ids="['regions-fill']"
      type="category"
      :items="legendItems"
      property="fill-color"
      title="US Regions"
      :interactive="true"
      @filter-change="handleFilterChange"
    />
  </VMap>
</template>