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.
Switch between built-in tile providers using the provider prop. You can also supply a custom MapLibre style JSON URL via the style prop.
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".
| Prop | Type | Default | Description |
|---|---|---|---|
| :center | array | [0, 0] | Initial map center [lng, lat] |
| :zoom | ?int | null | Initial zoom level (0–22) |
| :min-zoom | int | 0 | Minimum zoom level |
| :max-zoom | int | 22 | Maximum zoom level |
| provider | ?string | null | Built-in provider (e.g., carto-voyager, osm-raster) |
| style | ?string | null | Custom MapLibre style JSON URL (overrides provider) |
| theme | string | 'auto' | 'light', 'dark', or 'auto' |
| height | string | 'full' | 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 |
| :double-click-zoom | bool | true | Allow double-click zoom |
| :drag-pan | bool | true | Allow panning by drag |
| class | string | '' | Additional CSS classes |
| light-style | ?string | null | Style URL for light mode |
| dark-style | ?string | null | Style URL for dark mode |
| :events | array | [] | MapLibre event names to forward |