NAIP Mosaic

<script setup lang="ts">
import { VMap } from '@geoql/v-maplibre';
import { VLayerMosaic, type MosaicSource, type MosaicRenderMode } from '@geoql/v-maplibre/geotiff';

const renderMode = ref<MosaicRenderMode>('trueColor');
const stacItems = ref<MosaicSource[]>([]);

// Fetch STAC items from Microsoft Planetary Computer
async function fetchSTACItems() {
  const params = {
    collections: 'naip',
    bbox: '-106.6,38.7,-104.6,40.4',
    datetime: '2023-01-01/2023-12-31',
    limit: '1000',
  };

  const response = await fetch(
    'https://planetarycomputer.microsoft.com/api/stac/v1/search?' +
    new URLSearchParams(params)
  );
  const { features } = await response.json();
  stacItems.value = features;
}

onMounted(fetchSTACItems);
</script>

<template>
  <VMap :options="mapOptions">
    <VLayerMosaic
      id="naip-mosaic"
      :sources="stacItems"
      :render-mode="renderMode"
    />
  </VMap>
</template>