PHP code example of webbingbrasil / filament-maps
1. Go to this page and download the library: Download webbingbrasil/filament-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/ */
webbingbrasil / filament-maps example snippets
use Webbingbrasil\FilamentMaps\Actions;
use Webbingbrasil\FilamentMaps\Marker;
use Webbingbrasil\FilamentMaps\Widgets\MapWidget;
class Map extends MapWidget
{
protected int | string | array $columnSpan = 2;
protected bool $hasBorder = false;
public function getMarkers(): array
{
return [
Marker::make('pos2')->lat(-15.7942)->lng(-47.8822)->popup('Hello Brasilia!'),
];
}
public function getActions(): array
{
return [
Actions\ZoomAction::make(),
Actions\CenterMapAction::make()->zoom(2),
];
}
}
public function setUp(): void
{
$this
->tileLayerUrl(...)
->height(..)
->rounded(..)
->mapOptions(..)
->mapMarkers([
...
])
->fitBounds([
[lat, lng],
[lat, lng]
...
])
->actions([
..
]);
}
MyMap::configureUsing(function (ResellerMap $widget) {
$widget->mapMarkers([
Marker::make('id')
->lat(51.505)
->lng(-0.09)
->popup('I am a popup')
->tooltip('I am a tooltip'),
])
->tileLayerUrl('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
->tileLayerOptions([
'attribution' => 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
])
});
protected string | array $tileLayerUrl = [
'OpenStreetMap' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
'OpenTopoMap' => 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'
];
protected array $tileLayerOptions = [
'OpenStreetMap' => [
'attribution' => 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
],
'OpenTopoMap' => [
'attribution' => 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, SRTM | Map style © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
],
];
Actions\Action::make('mode')
->icon('filamentmapsicon-o-square-3-stack-3d')
->callback('setTileLayer(mode === "OpenStreetMap" ? "OpenTopoMap" : "OpenStreetMap")'),
use Webbingbrasil\FilamentMaps\Actions;
Actions\ZoomAction::make()->zoom(2), // Zoom in/out 2 levels
use Webbingbrasil\FilamentMaps\Actions;
public function getActions(): array
{
return [
Actions\CenterMapAction::make()->centerTo([51.505, -0.09])->zoom(13),
];
}
Actions\CenterMapAction::make()->centerOnUserPosition()->zoom(13)
Actions\CenterMapAction::make()->fitBounds([
[lat, lng],
[lat, lng],
])
public function setUp(): void
{
$this->fitBounds([
[lat, lng],
[lat, lng],
...
]);
}
public function getActions(): array
{
return [
CenterMapAction::make()->fitBounds($this->getFitBounds()),
];
}
use Webbingbrasil\FilamentMaps\Actions;
Actions\FullpageAction::make()
Actions\FullscreenAction::make()
use Webbingbrasil\FilamentMaps\Actions;
Actions\Action::make('form')
->icon('filamentmapsicon-o-arrows-pointing-in')
->form([
Forms\Components\TextInput::make('name')
->label('Name')
->])
->action(function (array $data, self $livewire) {
$livewire
->addMarker(
Marker::make(Str::camel($data['name']))
->lat($data['lat'])
->lng($data['lng'])
->popup($data['name'])
)
->centerTo(location: [$data['lat'], $data['lng']], zoom: 13)
})
$liveWire->mapMarkers(array $markers); // update the markers
$livewire->addMarker(Marker $marker); // add a new marker
$livewire->removeMarker(string $id); // remove a marker
$livewire->updateMarker(string $id, Marker $marker); // update a marker
Actions\Action::make('center')
->alpineClickHandler(<<<JS
map.setView([0,0], 2)
JS)
$this
->actions([
Actions\CenterMapAction::make()->position('topright'),
])
}
Actions\Action::make()->icon('heroicon-o-home')
use Webbingbrasil\FilamentMaps\Marker;
$this
->mapMarkers([
Marker::make('id')
->lat(51.505)
->lng(-0.09)
->popup('I am a popup'),
Marker::make('id')
->lat(51.505)
->lng(-0.09)
->tooltip('I am a tooltip')
->callback(<<<JS
alert('Hello World!');
JS),
])
}
use Webbingbrasil\FilamentMaps\MarkerCluster;
$this
->mapMarkers([
MarkerCluster::make([
Marker::make('id')
->lat(51.505)
->lng(-0.09)
->popup('I am a popup'),
Marker::make('id')
->lat(51.505)
->lng(-0.09)
->tooltip('I am a tooltip')
->callback(<<<JS
alert('Hello World!');
JS),
]),
])
}
Marker::make('id')
->color(Marker::COLOR_RED)
Marker::make('id')
->icon(
string $iconUrl,
string $shadowUrl,
array $iconSize,
array $iconAnchor,
array $popupAnchor,
array $shadowSize
)
Marker::make('place')->callback('Livewire.emit("updateFooter", ' . $placeId . ')');
protected $listeners = ['updateFooter' => 'showMarkerData'];
public function showMarkerData($placeId)
{
$place = Place::find($placeId);
$this->footer = view('marker-details', $place);
}
public function getPolylines(): array
{
return [
Polyline::make('polyline')
->latlngs([
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
])->options(['color' => 'blue', 'weight' => 5])
->tooltip('I am a tooltip')
->popup('I am a popup'),
];
}
Actions\Action::make('add line')
->tooltip('Add line')
->icon('filamentmapsicon-o-map-pin')
->form([
Forms\Components\TextInput::make('name')
->label('Name')
-> Forms\Components\TextInput::make('lng1')
->label('Longitude')
-> -> ])
);
})
$livewire->addPolyline(Polyline::make('polyline-name')->latlngs([...])->options([..]));
$livewire->removePolyline('polyline-name');
$livewire->updatePolyline(Polyline::make('polyline-name')->latlngs([...])->options([...]));
public function getPolylgones(): array
{
return [
Polygone::make('polygone')
->latlngs([
[45.51, -122.68],
[37.77, -122.43],
[34.04, -118.2]
])->options(['color' => 'blue', 'weight' => 5])
->tooltip('I am a tooltip')
->popup('I am a popup'),
];
}
$livewire->addPolygone(Polygone::make('polygone-name')->latlngs([...])->options([..]));
$livewire->removePolygone('polygone-name');
$livewire->updatePolygone(Polygone::make('polygone-name')->latlngs([...])->options([...]));
public function getRectangles(): array
{
return [
Rectangle::make('rectangle')
->bounds([
[54.559322, -5.767822],
[56.1210604, -3.021240]
])->tooltip('rectangle')
->options(['color' => 'red'])
];
}
$livewire->addRectangle(Polygone::make('rectangle-name')->bounds([...])->options([..]));
$livewire->removeRectangle('rectangle-name');
$livewire->updateRectangle(Polygone::make('rectangle-name')->bounds([...])->options([...]));
public function getCircles(): array
{
return [
Circle::make('circle')
->lat(-15.7942)
->lng(-47.8822)
->options(['radius' => 200000])
->popup('Hello Brasilia!')
->tooltip('test2'),
];
}
$livewire->addCircle(Circle::make('circle-name')->lat(...)->lng(...)->options([..]));
$livewire->removeCircle('circle-name');
$livewire->updateCircle(Circle::make('circle-name')->lat(...)->lng(...)->options([...]));