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

Form

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' => '&copy; <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]
    ])

Infolist

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' => '&copy; <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

Default:

Custom Marker:

Custom Tile:

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.

afsakar / filament-leaflet-map-picker

Maintainers

Details