Building Maps with Livewire v4

Integrate Google Maps or Leaflet.

1 min readLivewireاقرأ بالعربية

Build interactive maps.

With Leaflet

blade
<div 
    wire:ignore
    x-data="{
        map: null,
        init() {
            this.map = L.map(this.$refs.map).setView([$wire.lat, $wire.lng], 13);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
            L.marker([$wire.lat, $wire.lng]).addTo(this.map);
        }
    }"
    x-init="init()">
    <div x-ref="map" style="height: 400px"></div>
</div>
All articles

Keep reading