Examples
Land Cover COG
Visualize NLCD Land Cover classification data with automatic colormap rendering. A 1.3GB dataset streamed efficiently via COG tiling.
Installation
$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-rasterUsage
<script setup lang="ts">
import { VMap, VControlNavigation } from '@geoql/v-maplibre';
import { VLayerCog } from '@geoql/v-maplibre/geotiff';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
center: [-98.5, 39.8], // Continental US
zoom: 4,
};
// NLCD Land Cover COG with automatic colormap
const COG_URL = 'https://s3.us-east-1.amazonaws.com/.../NLCD_LndCov.tif';
</script>
<template>
<VMap :options="mapOptions" class="h-125 w-full">
<VControlNavigation position="top-right" />
<VLayerCog
id="landcover-layer"
:geotiff="COG_URL"
/>
</VMap>
</template> Components 3
<VMap />@geoql/v-maplibre<VControlNavigation />@geoql/v-maplibre<VLayerCog />@geoql/v-maplibre/geotiff