Text Layer (deck.gl)

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { VLayerDeckglText } 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: 12,
  };

  const textData = [
  { coordinates: [-122.42, 37.78], name: 'Downtown' },
  { coordinates: [-122.38, 37.79], name: 'Marina District' },
  // ... more labels
  ];
</script>

<template>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
    <VLayerDeckglText
      id="text-layer"
      :data="textData"
      :get-position="(d) => d.coordinates"
      :get-text="(d) => d.name"
      :get-size="20"
      :get-color="[255, 255, 255, 255]"
      font-family="Arial"
      :pickable="true"
    />
  </VMap>
</template>