Directions

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

useDirections

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

  const { route, isRouting, error } = useDirections();

  const path = shallowRef<[number, number][]>([]);

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

    const best = routes[0];
    if (!best) return;

    path.value = best.polyline.points.map((p) => [p.latitude, p.longitude]);
    console.log(`${(best.distance / 1000).toFixed(1)} km`);
    console.log(`${Math.round(best.expectedTravelTime / 60)} min`);
  }
</script>

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

Origin & Destination

route accepts a flexible point type for both ends — a string address, a mapkit.Coordinate, or a mapkit.Place:

import type { DirectionsPoint } from '@geoql/v-mapkit';
// string | mapkit.Coordinate | mapkit.Place

// all valid
await route('San Francisco, CA', 'Cupertino, CA');
await route(new mapkit.Coordinate(37.77, -122.41), placeResult);

Route Options

The optional third argument is every mapkit.DirectionsRequest field except origin/destination — for example transport type:

const { routes } = await route(origin, destination, {
  transportType: mapkit.Directions.Transport.Walking,
});

import type { RouteOptions } from '@geoql/v-mapkit';
// Omit<mapkit.DirectionsRequest, 'origin' | 'destination'>

Returns

Property	Type	Description
`route`	`(origin, destination, options?) => Promise<mapkit.DirectionsResponse>`	Compute routes
`isRouting`	`Ref<boolean>`	`true` while a request is in flight
`error`	`Ref<Error \| null>`	Last error, or `null`

Each route in the response carries distance (meters), expectedTravelTime (seconds), and a polyline whose points give the geometry to render.

See the live Directions example.