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 tags.
Interact with the map from your PHP component via events.
Built-in support for light, dark, and auto themes following Tailwind's .dark class.
Custom providers, MapLibre style JSON support, and custom event forwarding.
Here's a simple map rendered with just a single line of Blade code:
The package provides several 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> | Draw polylines or fetch real driving/walking/cycling directions |
| <x-map-route-group> | Render multiple selectable routes on the same map |
| <x-map-route-list> | Overlay UI panel for displaying route alternatives |
| <x-map-cluster-layer> | Efficient clustering for thousands of markers |