Directions

Routing and turn-by-turn directions with OSRM.

Features

OSRM routing (driving, walking, cycling)
Nominatim geocoding search
Multi-waypoint routes
Turn-by-turn instructions
Distance and duration estimates

Route Profiles

driving – Car routing, fastest path
walking – Pedestrian routes
cycling – Bike-friendly paths

Props

Prop	Type	Default	Description
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top-left"`	Position of the directions panel
`defaultOrigin`	`[number, number]`	—	Default starting coordinates [lng, lat]
`defaultDestination`	`[number, number]`	—	Default destination coordinates [lng, lat]
`defaultProfile`	`"driving" \| "walking" \| "cycling"`	`"driving"`	Default routing profile
`onRouteCalculated`	`(route: RouteResult) => void`	—	Callback when route is calculated
`onError`	`(error: Error) => void`	—	Callback when routing fails
`osrmUrl`	`string`	`"https://router.project-osrm.org"`	Custom OSRM server URL
`routeColor`	`string`	`"#4285F4"`	Color of the route line
`routeWidth`	`number`	`5`	Width of the route line in pixels

Route Result

The onRouteCalculated callback provides:

interface RouteResult {
  distance: number;      // meters
  duration: number;      // seconds
  coordinates: [number, number][];
  steps: RouteStep[];
  summary?: string;
}