Routes

Docs / 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"
/>

The directions-profile accepts driving, walking, or cycling. The OSRM server URL can be configured in config/livewire-mapcn.php.

Animated Route

Animate the route as it draws on the map:

blade

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

<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"
/>

Prop	Description
:routes	Array of route objects with color, coordinates, etc.
id	Unique identifier
:selected-route	Index or ID of the initially selected route (Default: 0)
:fit-bounds	Auto-fit map bounds to show all routes (Default: false)
:fetch-directions	Fetch directions for all routes (Default: false)
:animate	Animate route drawing (Default: false)
class	Wrapper container classes

<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"
/>

Prop	Description
route-id	ID of the x-map-route to link to
map-id	ID of the x-map component
:show-distance	Show total distance (Default: true)
:show-duration	Show travel time (Default: true)
:show-fastest-badge	Highlight fastest route (Default: true)
:show-time-diff	Show time difference between alternatives (Default: true)
position	Options: top-left, top-right, etc. (Default: 'top-left')
title	Panel header text (Default: 'Routes')
width	Panel width class (Default: 'w-60')
container-class	Extra classes for the wrapper container
header-class	Extra classes for the header section
item-class	Extra classes for individual route items

Props

Prop	Type	Default	Description
:coordinates	array	required	Array of [lng, lat] pairs
id	?string	null	Unique identifier for the route
color	string	'#1A56DB'	Route line color
:width	int	4	Pixel width
:opacity	float	1.0	Line opacity (0.0-1.0)
:dash-array	?array	null	Dash pattern array
line-cap	string	'round'	Line cap style
line-join	string	'round'	Line join style
active-color	string	'#0F43C4'	Color when active/selected
:active-width	int	6	Width when active/selected
hover-color	?string	null	Color on hover
:clickable	bool	true	Enable click interactions
:with-stops	bool	false	Render default markers at points
stop-color	string	'#1A56DB'	Color for stop markers
:fetch-directions	bool	false	Auto-fetch geom from OSRM
directions-profile	string	'driving'	driving, walking, cycling
directions-url	?string	null	Custom OSRM server URL
:animate	bool	false	Animate drawing effect
:animate-duration	int	2000	Animation duration (ms)
:active	bool	false	Set as initially active
:alternatives	bool	false	(OSRM) Fetch alternative routes
:max-alternatives	int	2	Max alternatives to fetch
alternative-color	string	'#94A3B8'	Color for alternatives
:alternative-opacity	float	0.5	Opacity for alternatives
:alternative-width	int	3	Width for alternatives

Previous ← Popups Next Clusters →