Contour Layer (deck.gl)

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VLayerDeckglContour } 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.78],
  zoom: 11,
  };

  const contourData = [
  { position: [-122.42, 37.78] },
  { position: [-122.38, 37.79] },
  // ... many more points
  ];

  const contours = [
  { threshold: [2, 9], color: [255, 255, 178, 70] },
  { threshold: [9, 19], color: [253, 141, 60, 80] },
  { threshold: 5, color: [254, 204, 92, 230], strokeWidth: 2 },
  { threshold: 9, color: [253, 141, 60, 240], strokeWidth: 2 },
  { threshold: 14, color: [240, 59, 32, 245], strokeWidth: 3 },
  ];
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglContour
      id="contour-layer"
      :data="contourData"
      :get-position="(d) => d.position"
      :contours="contours"
      :cell-size="50"
      :pickable="true"
    />
  </VMap>
</template>