afsakar / filament-leaflet-map-picker
A Filament Forms component that provides an interactive Leaflet map for selecting and storing geographical coordinates.
Fund package maintenance!
afsakar
Installs: 14
Dependents: 0
Suggesters: 0
Security: 0
Stars: 19
Watchers: 1
Forks: 1
Open Issues: 0
Language:JavaScript
Requires
- php: ^8.1
- filament/forms: ^3.0
- spatie/laravel-package-tools: ^1.15.0
Requires (Dev)
- laravel/pint: ^1.0
- nunomaduro/collision: ^7.9
- nunomaduro/larastan: ^2.0.1
- orchestra/testbench: ^8.0
- pestphp/pest: ^2.1
- pestphp/pest-plugin-arch: ^2.0
- pestphp/pest-plugin-laravel: ^2.0
- phpstan/extension-installer: ^1.1
- phpstan/phpstan-deprecation-rules: ^1.0
- phpstan/phpstan-phpunit: ^1.0
- spatie/laravel-ray: ^1.26
README
A Filament Forms component that provides an interactive Leaflet map for selecting and storing geographical coordinates.
Features
- 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
Installation
You can install the package via composer:
composer require afsakar/filament-leaflet-map-picker
php artisan vendor:publish --tag="filament-leaflet-map-picker-assets"
Database Migration
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(); });
Preparing the models
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"
Usage
use 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() // default false ->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] ])
Screenshots
Testing
composer test
Changelog
Please see CHANGELOG for more information on what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security Vulnerabilities
Please review our security policy on how to report security vulnerabilities.
Credits
License
The MIT License (MIT). Please see License File for more information.