PHP code example of sanderdewijs / lara-livewire-maps
1. Go to this page and download the library: Download sanderdewijs/lara-livewire-maps library. Choose the download type require.
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
sanderdewijs / lara-livewire-maps example snippets
// From your Livewire component when data is ready
$this->dispatch('my-app:maps:init',
lat: 52.09,
lng: 5.12,
zoom: 8,
markers: [ [ 'id' => 1, 'lat' => 52.09, 'lng' => 5.12 ] ],
useClusters: true,
clusterOptions: [ 'maxZoom' => 14 ],
mapOptions: [ 'disableDefaultUI' => true ],
drawType: 'circle',
autoFitBounds: false,
);
// Backend (Livewire component): start a circle drawing session
$this->dispatch('lw-map:draw', type: 'circle');
// Switch to polygon
$this->dispatch('lw-map:draw', type: 'polygon');
// Exit draw mode
$this->dispatch('lw-map:draw', type: null);
// app/Livewire/Example.php
namespace App\Livewire;
use Livewire\Component;
class Example extends Component
{
public function addMarkers(): void
{
$markers = [
['id' => 1, 'lat' => 52.0907, 'lng' => 5.1214, 'title' => 'Utrecht'],
['id' => 2, 'lat' => 52.3676, 'lng' => 4.9041, 'title' => 'Amsterdam'],
];
// Update markers (no clustering)
$this->dispatch('lw-map:update', markers: $markers);
// Or, update markers and enable clustering with options
$this->dispatch('lw-map:update', markers: $markers, useClusters: true, clusterOptions: []);
}
public function render()
{
return view('livewire.example');
}
}
// Update center (and keep your markers): re-send your current markers to avoid clearing them
$this->dispatch('lw-map:update',
markers: $markers, // your current markers
center: ['lat' => 52.0907, 'lng' => 5.1214],
);
// Or using separate values
$this->dispatch('lw-map:update',
markers: $markers, // your current markers
centerLat: 52.0907,
centerLng: 5.1214,
);
// Combine with clustering options if desired
$this->dispatch('lw-map:update',
markers: $markers,
useClusters: true,
clusterOptions: ['maxZoom' => 14],
center: ['lat' => 52.0907, 'lng' => 5.1214],
);
// Start drawing a circle
$this->dispatch('lw-map:draw', type: 'circle');
// Switch to polygon
$this->dispatch('lw-map:draw', type: 'polygon');
// Exit draw mode
$this->dispatch('lw-map:draw', type: null);
// Update markers (if needed), set center and zoom together
$this->dispatch('lw-map:update',
markers: $markers, // your current markers
useClusters: true,
clusterOptions: ['maxZoom' => 14],
center: ['lat' => 52.0907, 'lng' => 5.1214],
zoom: 12,
);
bash
# publish (creates the directory if missing)
php artisan livewire-maps:publish-assets
# force overwrite if the file already exists
php artisan livewire-maps:publish-assets --force
Loading please wait ...
Before you can download the PHP files, the dependencies should be resolved. This can take some minutes. Please be patient.