GeoArrow Trips (deck.gl-geoarrow)

<script setup lang="ts">
  import { VMap } from '@geoql/v-maplibre';
  import { VLayerDeckglGeoArrowTrips } from '@geoql/v-maplibre/deck.gl';
  import { tableFromIPC } from 'apache-arrow';

  const table = shallowRef(null);
  const currentTime = ref(0);
  onMounted(async () => {
    const url = '/geoarrow/city-trips.arrows';
    const buffer = await (await fetch(url)).arrayBuffer();
    table.value = tableFromIPC(new Uint8Array(buffer));
  });
</script>

<template>
  <VMap :options="mapOptions" class="size-full">
    <VLayerDeckglGeoArrowTrips
      v-if="table"
      :data="table"
      :get-timestamps="table.getChild('timestamps').data[0]"
      :current-time="currentTime"
      :trail-length="80"
      :get-color="[180, 220, 255, 255]"
      :get-width="3"
      width-units="pixels"
    />
  </VMap>
</template>