Examples
COG Layer (deck.gl-raster)
GPU-accelerated Cloud-Optimized GeoTIFF visualization with automatic reprojection and intelligent tile streaming.
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: [31.5, 30.0], // Egypt/Nile area
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" class="h-125 w-full">
<VControlNavigation position="top-right" />
<VLayerCog
id="cog-layer"
:geotiff="COG_URL"
/>
</VMap>
</template> Components 3
<VMap />@geoql/v-maplibre<VControlNavigation />@geoql/v-maplibre<VLayerCog />@geoql/v-maplibre/geotiff