Terrain Layer (deck.gl)

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VLayerDeckglTerrain } from '@geoql/v-maplibre/deck.gl';

  const mapOptions = {
  style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
  center: [-122.4, 37.75],
  zoom: 11,
  pitch: 60,
  bearing: -17,
  };

  // Terrain elevation tiles (Mapzen Terrarium format)
  const TERRAIN_IMAGE = 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png';
  // Surface texture tiles — maps.guru satellite raster.
  // tile.openstreetmap.org is not used: the OSM tile usage policy
  // requires a valid HTTP Referer and blocks requests without one.
  const SURFACE_IMAGE = 'https://tiles.maps.guru/v1/planet-raster/{z}/{x}/{y}.jpg?key=YOUR_MAPS_GURU_API_KEY';
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglTerrain
      id="terrain-layer"
      :elevation-data="TERRAIN_IMAGE"
      :texture="SURFACE_IMAGE"
      :elevation-decoder="{
        rScaler: 256,
        gScaler: 1,
        bScaler: 1/256,
        offset: -32768,
      }"
      :bounds="[-122.5, 37.6, -122.2, 37.9]"
      :pickable="true"
    />
  </VMap>
</template>