Directions

useDirections wraps MapKit routing. Pass an origin and destination to get routes with distance and travel time, then draw the route geometry with a polyline overlay.

Directions.vue

<script setup lang="ts">
  import {
    VMap,
    VPolylineOverlay,
    useDirections,
  } from '@geoql/v-mapkit';

  const { route } = useDirections();

  const { routes } = await route(
    new mapkit.Coordinate(37.7749, -122.4194),
    new mapkit.Coordinate(37.3349, -122.009),
  );

  const path = routes[0].polyline.points.map(
    (p) => [p.latitude, p.longitude],
  );
</script>

<template>
  <VMap :access-token="token">
    <VPolylineOverlay :coordinates="path" :style="{ strokeColor: '#0a84ff', lineWidth: 5 }" />
  </VMap>
</template>