Himalaya 3D Terrain

<script setup lang="ts">
  import {
    VMap,
    VControlNavigation,
    VLayerMaplibreHillshade,
    VSky,
    VTerrain,
  } from '@geoql/v-maplibre';
  import type { RasterDEMSourceSpecification } from 'maplibre-gl';

  const terrainUrl =
    'pmtiles://https://your-bucket.example.com/terrain.pmtiles';

  // Two separate raster-dem sources: one drives setTerrain,
  // the other backs the hillshade layer.
  const terrainSource: RasterDEMSourceSpecification = {
    type: 'raster-dem',
    url: terrainUrl,
    tileSize: 512,
    encoding: 'mapbox',
  };
  const hillshadeSource: RasterDEMSourceSpecification = {
    ...terrainSource,
  };

  const mapOptions = {
    style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
    center: [79.35, 30.55],
    zoom: 10.3,
    pitch: 64,
    bearing: 35,
    maxPitch: 85,
  };
</script>

<template>
  <VMap :options="mapOptions" support-pmtiles class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VSky
      :sky="{
        'sky-color': '#8fbdf0',
        'sky-horizon-blend': 0.6,
        'horizon-color': '#dfeaf6',
        'horizon-fog-blend': 0.7,
        'fog-color': '#eaf1f8',
        'fog-ground-blend': 0.6,
      }"
    />
    <VTerrain
      source="terrain-dem"
      :source-spec="terrainSource"
      :exaggeration="1.25"
    />
    <VLayerMaplibreHillshade
      source-id="hillshade-dem"
      layer-id="hillshade"
      :source="hillshadeSource"
      :layer="{ paint: { 'hillshade-exaggeration': 0.6 } }"
    />
  </VMap>
</template>