Releases: vitormicillo/filament-map-picker
v1.4.1
Use can set the marker icon size by filament resource settings parameter ->iconSize()
:
->iconSize(32) //integer value
Full Changelog: v1.4.0...v1.4.1
v1.4.0
- User can customize marker icons now, It is possible to use SVG or base64 encoded value
Example in how to use custom SVG Icon when "edit" a record from database
Map::make('location')
->hiddenLabel()
->columnSpanFull()
->defaultLocation(latitude: 52.8027, longitude: -1.0546)
->afterStateHydrated(function (callable $set, callable $get, $state, ?Model $record) {
if ($record) {
$icon = YourModel::find($record->databasefield)->base64_image;
$set('location', [
'lat' => $record->lat,
'lng' => $record->lon,
'icon' => $icon //Insert this icon key with the value
]);
}
})
->extraStyles(['min-height: 30vh', 'border-radius: 5px'])
->liveLocation(false, false, 5000)
->showMarker()
->markerColor("#FF0000")
->showGeomanToolbar(false)
->showFullscreenControl(true)
->showZoomControl()
->draggable()
->tilesUrl(self::getMapBox())
->zoom(6)
->detectRetina()
->showMyLocationButton(false)
->extraControl(['zoomDelta' => 1, 'zoomSnap' => 2]),
Another way to update in real time if you have a list of icons in a dropdown list
You can display the icon in the list as well and use this icon to set as a marker in the map, like the example below.
Select::make('category_id')
->label('Category')
->suffixIcon('heroicon-s-square-3-stack-3d')
->options(function () {
return YourModel::where('is_active', true)->get()
->mapWithKeys(function ($item) {
return [
$item->id =>
"<div style='display: flex; align-items: center;'>
<img src='{$item->base64_image}' alt='category_icon' style='width: 20px; height: 20px; margin-right: 8px;' />
<span>{$item->name}</span>
</div>",
];
})
->toArray();
})
->searchable()
->allowHtml()
->required()
->reactive()
->afterStateUpdated(function ($state, callable $set, callable $get, $livewire){
$model = YourModel::find($state);
if($model && $model->iconcolumnname) {
$livewire->dispatch('update-marker-icon', ['icon' => $category->iconcolumnname]);
} else {
$livewire->dispatch('update-marker-icon',['icon' => null]) ;
}
}),
You can do it in your way, just call $livewire
and pass the parameter 'update-marker-icon'
Full Changelog: v1.3.1...v.1.4.0
Full Changelog: v1.3.1...v1.4.0
v1.3.1
- Update warning message after snapshot creation
Full Changelog: v1.2.2...v1.3.1
v1.3.0
New feature to capture image from the map
This is an example of the code in how to trigger the function in the map in order to capture the snapshot.
Note: Latitude and longitude are not mandatory, you can move the map and trigger the action to capture the image.
“If you have Geoman shapes drawn on your map, they will be included in the generated image.”
Actions::make([
Action::make('capture_map_image')
->hiddenLabel()
->icon('heroicon-m-camera')
->color('info')
->action(function (callable $get, callable $set, $livewire) {
$lat = $get('lat');
$lon = $get('lon');
if(!empty($lat) && !empty($lon)){
$livewire->dispatch('capture-map-image');
}
})
])->columnSpan(1)
In your web.php file is necessary to add the route, i.e you can use a custom Controller
The map feature will post the blob image to this url /upload-map-image
Route::post('/upload-map-image', [MapController::class, 'uploadMapImage'])->name('upload.map.image');
Full Changelog: v1.2.1...v1.3.0
v1.2.2
Updated Readme
Full Changelog: v1.2.1...v1.2.2
v1.2.1
Leaflet full-screen styles are handled by JavaScript now
Full Changelog: v1.2.0...v1.2.1
v1.2.0
New option to disable Geoman tools bar in the map
Map::make('location')
->label('Location')
->columnSpanFull()
->defaultLocation(latitude: 52.8027, longitude: -1.0546)
->afterStateUpdated(function (Set $set, ?array $state): void {
$set('latitude', $state['lat']);
$set('longitude', $state['lng']);
})
->afterStateHydrated(function ($state, $record, Set $set): void {
// Use this to set the map in the marker location (edit)
$set('location', ['lat' => $record->latitude, 'lng' => $record->longitude]);
})
->extraStyles([
'min-height: 50vh',
'border-radius: 10px'
])
->liveLocation(true, true, 10000) // Updates live location every 10 seconds
->showMarker()
->showGeomanToolbar() // Display or not the geoman tools bar
->showFullscreenControl()
->showZoomControl()
->draggable()
->tilesUrl("https://tile.openstreetmap.de/{z}/{x}/{y}.png")
->zoom(12)
->detectRetina()
->showMyLocationButton()
->extraTileControl([])
->extraControl([
'zoomDelta' => 1,
'zoomSnap' => 2,
])
Full Changelog: v1.1.1...v1.2.0
1.1.0
In this update, improvements were made to the javascript file to update the geoJsonBox object in real time with the elements drawn on the map.
Impact
To test the plugin, I recommend creating in your resource file this field to view in real time the location data of the created areas.
Textarea::make('geomanbox')
->id('geomanbox')
->disabled()
->columnSpanFull()