Heatmap (deck.gl)

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

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

  const heatmapData = [
  { coordinates: [-122.4, 37.8], weight: 5 },
  { coordinates: [-122.38, 37.79], weight: 10 },
  // ... more points
  ];
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglHeatmap
      id="heatmap"
      :data="heatmapData"
      :get-position="(d) => d.coordinates"
      :get-weight="(d) => d.weight"
      :radius-pixels="30"
      :intensity="1"
      :threshold="0.03"
      :color-range="[
        [255, 255, 178],
        [254, 217, 118],
        [254, 178, 76],
        [253, 141, 60],
        [240, 59, 32],
        [189, 0, 38],
      ]"
    />
  </VMap>
</template>