Raster Layers

bun add @developmentseed/deck.gl-raster geotiff-geokeys-to-proj4

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
    center: [31.5, 30.0],
    zoom: 8,
  };

  // Sentinel-2 RGB imagery COG
  const COG_URL = 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif';
</script>

<template>
  <VMap :options="mapOptions" style="height: 500px">
    <VLayerDeckglCOG
      id="cog-layer"
      :geotiff="COG_URL"
      @geotiff-load="(tiff, { geographicBounds }) => console.log('Loaded:', geographicBounds)"
    />
  </VMap>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue';
  import type { Map } from 'maplibre-gl';

  const mapInstance = shallowRef<Map | null>(null);

  const handleGeotiffLoad = (
    _tiff: unknown,
    { geographicBounds }: { geographicBounds: { west: number; south: number; east: number; north: number } }
  ) => {
    const { west, south, east, north } = geographicBounds;
    mapInstance.value?.fitBounds(
      [[west, south], [east, north]],
      { padding: 40, duration: 1000 }
    );
  };
</script>

<template>
  <VMap :options="mapOptions" @loaded="(map) => mapInstance = map">
    <VLayerDeckglCOG
      id="cog"
      :geotiff="cogUrl"
      @geotiff-load="handleGeotiffLoad"
    />
  </VMap>
</template>

<VLayerDeckglCOG
  id="landcover"
  :geotiff="nlcdUrl"
  :opacity="0.7"
/>

bun add @developmentseed/deck.gl-raster @developmentseed/deck.gl-geotiff geotiff flatbush proj4

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

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
    center: [-104.9903, 39.7392],
    zoom: 10,
  };

  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" style="height: 500px">
    <VLayerDeckglMosaic
      v-if="stacItems.length > 0"
      id="naip-mosaic"
      :sources="stacItems"
      :render-mode="renderMode"
    />
  </VMap>
</template>

interface MosaicSource {
  bbox: [number, number, number, number]; // [west, south, east, north]
  assets: {
    image: {
      href: string; // URL to the COG file
    };
  };
}

bun add maplibre-gl-interpolate-heatmap