A Filament Forms component that provides an interactive Leaflet map for selecting and storing geographical coordinates.
- Interactive map for location selection
- Customizable map height
- Default location configuration
- Adjustable zoom level
- Draggable and clickable markers
- "My Location" button for quick navigation to user's current position
- Support for different tile providers (OpenStreetMap by default)
- Custom tile layer support
- Custom marker configuration
You can install the package via composer:
composer require afsakar/filament-leaflet-map-picker
php artisan vendor:publish --tag="filament-leaflet-map-picker-assets"Create a column in your table to store the location data. You can use a text or json column type:
Schema::create('properties', function (Blueprint $table) {
$table->id();
// Other columns
$table->text('location')->nullable(); // Stores coordinates as JSON string
// OR
$table->json('location')->nullable(); // Alternative approach
$table->timestamps();
});To use the LeafletMapPicker component, you need to prepare your database and model to store geographical coordinates. The component stores location data as a JSON string in the format [lat, lng].
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Property extends Model
{
protected $fillable = [
// Other fillable fields
'location',
];
protected $casts = [
'location' => 'array',
];
}You can publish the lang files with:
php artisan vendor:publish --tag="filament-leaflet-map-picker-translations"Optionally, you can publish the views using
php artisan vendor:publish --tag="filament-leaflet-map-picker-views"use Afsakar\LeafletMapPicker\LeafletMapPicker;
// Basic usage
LeafletMapPicker::make('location')
->label('Select Location')
// Advanced usage with customization
LeafletMapPicker::make('location')
->label('Property Location')
->height('500px')
->defaultLocation([41.0082, 28.9784]) // Istanbul coordinates
->defaultZoom(15)
->draggable() // default true
->clickable() // default true
->myLocationButtonLabel('Go to My Location')
->hideTileControl()
->readOnly() // default false, when you set this to true, the marker will not be draggable or clickable and current location and search location buttons will be hidden
->tileProvider('openstreetmap') // default options: openstreetmap, google, googleSatellite, googleTerrain, googleHybrid, esri
->customTiles([
'mapbox' => [
'url' => 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
'options' => [
'attribution' => '© <a href="https://www.mapbox.com/">Mapbox</a>',
'id' => 'mapbox/streets-v11',
'maxZoom' => 19,
'accessToken' => 'YOUR_MAPBOX_TOKEN',
]
]
])
->customMarker([
'iconUrl' => asset('pin-2.png'),
'iconSize' => [38, 38],
'iconAnchor' => [19, 38],
'popupAnchor' => [0, -38]
])use Afsakar\LeafletMapPicker\LeafletMapPickerEntry;
// Basic usage
LeafletMapPickerEntry::make('location')
->label('Location')
// Advanced usage with customization
LeafletMapPickerEntry::make('location')
->label('Property Location')
->height('500px')
->defaultLocation([41.0082, 28.9784])
->tileProvider('openstreetmap') // default options: openstreetmap, google, googleSatellite, googleTerrain, googleHybrid, esri
->hideTileControl()
->customTiles([
'mapbox' => [
'url' => 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
'options' => [
'attribution' => '© <a href="https://www.mapbox.com/">Mapbox</a>',
'id' => 'mapbox/streets-v11',
'maxZoom' => 19,
'accessToken' => 'YOUR_MAPBOX_TOKEN',
]
]
])
->customMarker([
'iconUrl' => asset('pin-2.png'),
'iconSize' => [38, 38],
'iconAnchor' => [19, 38],
'popupAnchor' => [0, -38]
])Default:
Custom Marker:
Custom Tile:
composer testPlease see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.