Install the package using Composer:
composer require kwasii/livewire-mapcn
Publish the configuration file and assets to customize default behaviour:
php artisan vendor:publish --tag="livewire-mapcn-config" php artisan vendor:publish --tag="livewire-mapcn-assets"
Include the styles and scripts in your root layout file (e.g., app.blade.php):
<head> <!-- ... --> @livewireMapStyles </head> <body> <!-- ... --> @livewireScripts @livewireMapScripts </body>
Add the package views to your Tailwind CSS configuration (e.g., app.css or tailwind.config.js) to ensure classes are properly processed:
@source "../../vendor/kwasii/livewire-mapcn/resources/views/**/*.blade.php";
Customize the package behaviour via config/livewire-mapcn.php:
| Key | Default | Description |
|---|---|---|
| default_provider | 'carto-positron' | Default tile provider for all maps |
| dark_provider | 'carto-dark-matter' | Provider used for dark mode |
| default_height | 'full' | Default CSS height if not specified in prop |
| default_zoom | 7 | Default initial zoom level |
| default_center | [0, 0] | Default initial coordinates [lng, lat] |
| osrm_url | 'https://router.project-osrm.org' | Base URL for fetching road directions via OSRM |
| inject_assets | 'route' | 'route' (auto-load) or 'published' (manual) |
| load_from_cdn | true | Load MapLibre JS/CSS from CDN or local |
| maplibre_version | '5.19.0' | MapLibre GL JS version used for CDN fallback |
| cdn_url | 'https://cdn.jsdelivr.net/npm/maplibre-gl@.../dist/maplibre-gl.js' | CDN URL for MapLibre GL JS |
| cdn_css_url | 'https://cdn.jsdelivr.net/npm/maplibre-gl@.../dist/maplibre-gl.css' | CDN URL for MapLibre GL CSS |
| carto_license | 'non-commercial' | CARTO basemap license type |
| cluster_popup_view | null | Optional Blade view for cluster point popups |
| custom_events | [] | Array of custom MapLibre event names to forward |
After installation, verify everything works by adding a simple map to any Blade view: