livewire-mapcn is a Laravel Livewire package that allows you to easily integrate beautiful, interactive maps into your Laravel applications. Built on top of MapLibre GL JS, it provides a set of expressive Blade components that make mapping effortless.
Before installing livewire-mapcn, ensure your environment meets the following requirements:
Define your map and its features using expressive Blade component tags.
Interact with maps from your PHP component via events and dispatches.
Built-in support for light, dark, and auto themes following Tailwind's .dark class.
Custom providers and MapLibre style JSON support for full control.
Here's a simple map rendered with just a single line of Blade code:
The package provides the following Blade components, all nested inside the root <x-map> component:
| Component | Description |
|---|---|
| <x-map> | Base map component — required wrapper for all others |
| <x-map-controls> | Zoom, compass, geolocation, fullscreen, and scale controls |
| <x-map-marker> | Interactive markers with labels, tooltips, and popups |
| <x-map-popup> | Standalone popups anchored to coordinates |
| <x-map-route> | Polylines and fetched driving/walking directions |
| <x-map-cluster-layer> | Efficient clustering for thousands of markers |