Map

Docs / Map

Overview

The <x-map> component is the foundational building block for all maps. It initializes MapLibre GL JS, sets up the viewport, and provides the container for all child components like markers, popups, routes, and clusters.

Basic Usage

<x-map
    :center="[-0.09, 51.505]"
    :zoom="13"
    height="320px"
    provider="carto-voyager"
/>

Tile Providers

Switch between built-in tile providers using the provider prop. You can also supply a custom MapLibre style JSON URL via the style prop.

Carto Positron (Light)

<x-map
    :center="[-74.006, 40.7128]"
    :zoom="11"
    height="260px"
    provider="carto-positron"
/>

Carto Dark Matter

<x-map
    :center="[2.3522, 48.8566]"
    :zoom="12"
    height="260px"
    provider="carto-dark-matter"
/>

Theme Support

The theme prop controls how the map responds to dark mode. Set to "auto" (default) to follow your app's .dark class, or force "light" / "dark".

<x-map
    :center="[139.6917, 35.6895]"
    :zoom="10"
    height="260px"
    theme="auto"
/>

<!-- This map will switch to dark tiles when .dark is on <html> -->

Props

Prop	Type	Default	Description
:center	array	[0, 0]	Initial map center [lng, lat]
:zoom	int	13	Initial zoom level (0–22)
:min-zoom	int	0	Minimum zoom level
:max-zoom	int	22	Maximum zoom level
provider	string	'carto-voyager'	Tile provider name
style	string	null	Custom MapLibre style JSON URL
theme	string	'auto'	'light', 'dark', or 'auto'
height	string	'400px'	CSS height (e.g. 500px, 100vh)
width	string	'100%'	CSS width
:bearing	float	0	Initial bearing in degrees
:pitch	float	0	Initial pitch (0–60 degrees)
:interactive	bool	true	Enable mouse/touch interactions
:scroll-zoom	bool	true	Allow mouse wheel zoom

Previous ← Reference Next Controls →