Livewire Mapcn by baidoo.dev
Home Documentation Playground GitHub ↗
v2.0 Arcs, GeoJSON, route progress & 3D

Beautiful maps.
Written in Blade.

MapLibre maps for Laravel Livewire. Markers, routes, arcs, GeoJSON and 3D that react to your component state. No JavaScript required.

Get started Open playground
$ composer require kwasii/livewire-mapcn
Components
16
Blade components
Events
40+
Livewire events
JavaScript
0
lines of JS to write

Everything you need

One tag per idea. Every map you'd want to build.

Each card below is a live map rendered by the package, mounted only when it scrolls into view.

Route progress

Real road directions with a vehicle that follows :progress. Bind it to Livewire state or tween it with one event.

Markers & popups

Labels, tooltips and popups as nested tags. Click a pin.

GeoJSON overlays

Zones, boundaries and choropleths with hover states.

Clusters

Thousands of points, grouped and expandable.

3D view

A three-d toggle and extruded buildings.

Livewire-native

Your component state is the map.

Click a city: the button calls a Livewire action on the server, which dispatches map:fly-to. Markers, routes and layers re-render in place when your properties change, and the camera stays put.

app/Livewire/CityMap.php
public function fly(string $city)
{
    $this->city = $city;

    $this->dispatch('map:fly-to',
        center: $this->cities[$city]['center'],
        zoom: 11.5,
    );
}
map:viewport-changed

How it works

From composer to globe in three steps.

1

Install

composer require kwasii/livewire-mapcn

MapLibre, styles and the runtime are served for you.

2

Add the directives

@livewireMapStyles
@livewireMapScripts

One line in your <head>, one before </body>.

3

Write Blade

<x-map :center="[$lng, $lat]">
  <x-map-marker ... />
</x-map>

Bind props to Livewire state. That's it.

Put your Livewire app on the map.

MIT licensed. Laravel 11–13, Livewire 3 & 4, MapLibre 6.

Install now Star on GitHub 25⭐