AC Transit Live (deck.gl)

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

  // Fetch real-time AC Transit data
  const { buses, trails } = useActransitData();

  // Accessor functions for deck.gl layers
  const getBusPosition = (d) => d.coordinates;
  const getBusAngle = (d) => d.bearing; // Rotate icon based on heading
  const getTrailPath = (d) => d.path;
</script>

<template>
  <VMap :options="mapOptions" class="h-full w-full">
    <!-- Bus history trails -->
    <VLayerDeckglPath
      id="bus-trails"
      :data="trails"
      :get-path="getTrailPath"
      :get-color="getTrailColor"
    />
    <!-- Bus icons with bearing rotation -->
    <VLayerDeckglIcon
      id="buses"
      :data="buses"
      :get-position="getBusPosition"
      :get-angle="getBusAngle"
      :icon-atlas="busIconAtlas"
      :billboard="false"
      :pickable="true"
      @click="handleBusClick"
    />
  </VMap>
</template>