Getting Started

First Steps

Installation:

composer require lbcdev/livewire-map-component

Add Leaflet CSS/JS to your layout's <head> (before @livewireStyles):

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

First Component:

<livewire:lbcdev-map latitude="40.7128" longitude="-74.0060" />

Verify the map renders at NYC coordinates.

Key Props:
- :latitude, :longitude (required)
- :zoom (default: 13)
- :readOnly (default: false)

First Use Case

Display a draggable marker:

<livewire:lbcdev-map
    latitude="40.7128"
    longitude="-74.0060"
    :markers="['40.7128,-74.0060']"
    marker-draggable="true"
/>

Implementation Patterns

Core Workflows

Dynamic Marker Management:

// In Livewire component
public $markers = ['40.7128,-74.0060', '34.0522,-118.2437'];

public function addMarker($lat, $lng) {
    $this->markers[] = "$lat,$lng";
}

<livewire:lbcdev-map
    :markers="$markers"
    @marker-added="addMarker"
/>

Event-Driven Integration:
- Map Click: @map-clicked="handleMapClick($event)"
- Marker Drag: @marker-dragged="updateMarker($event)"
```
public function handleMapClick($event) {
    $this->addMarker($event['lat'], $event['lng']);
}
```

Theme Switching:

<livewire:lbcdev-map
    :darkMode="app()->isDarkModeEnabled()"
/>

Integration Tips

Form Submission: Bind marker data to a model:

public $location;
public function updatedMarkers() {
    $this->location = implode(',', $this->markers);
}

<input wire:model="location" type="hidden">

Custom Styling: Publish views (php artisan vendor:publish --tag=lbcdev-map-views) and override:
```
@push('leaflet-styles')
    .leaflet-container { border-radius: 8px; }
@endpush
```

Server-Side Validation:

protected $rules = [
    'markers' => 'required|array',
    'markers.*' => 'regex:/^\d+\.\d+,\s*-\d+\.\d+$/'
];

Gotchas and Tips

Common Pitfalls

Missing Leaflet Dependencies:
- Symptom: Blank map or JS errors.
- Fix: Ensure Leaflet CSS/JS are loaded before @livewireStyles.
Marker Coordinates Format:
- Issue: markers prop expects strings like "40.7128,-74.0060" (not arrays/objects).
- Fix: Use implode(',', [$lat, $lng]) when passing PHP arrays.
Event Payload Mismatch:
- Problem: @marker-dragged emits {lat, lng, id}, but your handler expects {lat, lng}.
- Solution: Update handler to destructure:
```
public function updateMarker($event) {
    $this->markers[$event['id']] = "$event['lat'],$event['lng']";
}
```
Read-Only Mode Quirks:
- Gotcha: Disables all interactions (clicks, drags). Use sparingly for forms.

Debugging Tips

Inspect Events:

@this.on('marker-dragged', function(event) {
    console.log('Event:', event);
})

Check Published Views: If customizations disappear after vendor:publish, clear cached views:
```
php artisan view:clear
```

Extension Points

Custom Layers: Override the mountMap method in your Livewire component:

public function mountMap() {
    $this->map->addLayer(LbcdevMap::tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
}

Geocoding: Integrate with a service (e.g., Nominatim) via @map-clicked:

public function handleMapClick($event) {
    $address = $this->geocode($event['lat'], $event['lng']);
    $this->address = $address;
}

Performance:

For >50 markers, use marker-cluster-group:

public function mountMap() {
    $this->map->addLayer(LbcdevMap::markerClusterGroup($this->markers));
}

Lazy-load markers via @map-view event.

Livewire Map Component Laravel Package