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, animate the route drawing, show how far along the route a trip has travelled, and pin markers to the route with <x-map-route-marker>. Routes react to Livewire state: change the bound props and the route updates in place.

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

Draw a dot at each waypoint you passed in :coordinates using the :with-stops prop. When directions are fetched, dots are only drawn at your waypoints, not at every vertex of the returned road geometry:

<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. The line grows smoothly by distance over :animate-duration milliseconds:

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

Route Progress

Progress (0 to 1) draws a "travelled" line on top of the route, which is useful for deliveries, trips and playback. Progress usually changes many times a second (a slider, playback, live tracking), so drive it on the client: point progress-model at an Alpine property and the route follows it with no server request. Use $wire.entangle() (deferred) if your component needs the value; it is sent along with the next request instead of on every change. Drag the slider:

// In your Livewire component
public float $progress = 0.4;

<!-- In your Blade view: progress lives in Alpine, synced lazily -->
<div x-data="{ progress: $wire.entangle('progress') }">
<x-map>
<x-map-route
    id="progress-route"
    :coordinates="$coords"
    :fetch-directions="true"
    color="#94a3b8"
    :width="5"
    :dash-array="[0.5, 1.5]"
    progress-model="progress"
    progress-color="#2563eb"
    :fit-bounds="true"
>
    <x-map-route-marker at="start" color="#22c55e" />
    <x-map-route-marker at="end" color="#ef4444" />
    <x-map-route-marker at="progress" :align-to-route="true">
        <x-marker-content>
            <!-- An arrow pointing up (north) is rotated to the route heading -->
            <div class="courier">...</div>
        </x-marker-content>
        <x-marker-tooltip text="Courier" />
    </x-map-route-marker>
</x-map-route>
</x-map>

<input type="range" min="0" max="1" step="0.01" x-model.number="progress">
</div>

The progress line inherits the route's color and width unless you set progress-color, :progress-width, :progress-opacity or :progress-dash-array. Other ways to set it: :progress="$progress" renders it from the server (fine for values that change occasionally, e.g. on wire:poll; add :progress-duration to tween), $mapRoute('id').setProgress(0.75, 1000) from any Alpine expression, or from PHP and plain JavaScript:

// From Livewire: animate to 75% over one second
$this->dispatch('map:route-progress-progress-route', progress: 0.75, duration: 1000);

// From JavaScript
LivewireMap.getRoute('progress-route').setProgress(0.75, 1000);

Route Markers

<x-map-route-marker> pins a marker to its parent <x-map-route>. It stays on the route when directions load, when you switch alternatives, and as progress changes. Set at to start, end, progress (follows :progress) or a fraction such as :at="0.5" for the midpoint. :align-to-route="true" rotates the marker to the route heading, so design custom content pointing up (north).

Route markers accept the same children as <x-map-marker>: <x-marker-content>, <x-marker-tooltip>, <x-marker-popup> and <x-marker-label>. To place one outside the route, pass route-id.

<x-map-route-group>

Render an array of routes where one can be "active" or "selected":

<x-map-route-group
    :routes="$routes"
    :selected-route="0"
    :clickable="true"
/>

<x-map-route-list>

Overlay UI panel displaying route alternatives and details:

<x-map-route
    id="my-route"
    :coordinates="$coords"
    :fetch-directions="true"
    :alternatives="true"
/>
<x-map-route-list
    route-id="my-route"
    title="Available Routes"
    width="w-60"
/>

Props