Routes

Overview

The <x-map-route> component draws polylines on the map. It can also fetch real driving, walking, or cycling directions from an OSRM routing service, and optionally animate the route drawing.

Basic Polyline

Draw a simple line connecting a series of coordinates:

// In your Livewire component
public array $coords = [
    [-0.09, 51.505],
    [-0.06, 51.51],
    [-0.03, 51.515],
];

<!-- In your Blade view -->
<x-map-route
    :coordinates="$coords"
    color="#10b981"
    :width="4"
/>

Route with Stops

Show markers at each coordinate along the route using the :with-stops prop:

<x-map-route
    :coordinates="$coords"
    color="#3b82f6"
    :width="4"
    :with-stops="true"
/>

OSRM Directions

Fetch real road geometry from an OSRM server for driving, walking, or cycling directions:

<x-map-route
    :coordinates="$coords"
    :fetch-directions="true"
    directions-profile="driving"
    color="#8b5cf6"
    :width="5"
    :with-stops="true"
/>

Animated Route

Animate the route as it draws on the map:

<x-map-route
    :coordinates="$coords"
    :fetch-directions="true"
    directions-profile="driving"
    :animate="true"
    color="#06B6D4"
/>

Props