Drone Flight

Name: @geoql/v-maplibre
Availability: InStock

Cinematic drone flight animation along a GeoJSON path. Animated trail via deck.gl TripsLayer with camera follow and bearing-rotated drone marker.

Usage

<script setup lang="ts">
  import { VMap, VControlNavigation } from '@geoql/v-maplibre';
  import { MapboxOverlay } from '@deck.gl/mapbox';
  import { TripsLayer } from '@deck.gl/geo-layers';
  import { IconLayer } from '@deck.gl/layers';

  const tripData = ref([]);
  const currentTime = ref(0);
  </script>
  <VMap :options="mapOptions" class="h-125 w-full">
    <VControlNavigation position="top-right" />
  </VMap>
</template>

Components 2

<VMap /> @geoql/v-maplibre
<VControlNavigation /> @geoql/v-maplibre

Props and events in the API reference

Edit Report

Weather Dashboard

HHI Map

Drone Flight

Flight Path

LineString GeoJSON with flight coordinates

Sample path: Manhattan scenic flight is loaded by default. Upload your own GeoJSON LineString for a custom route.