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

v1.2.1 2025-05-02 11:55 UTC

This package is auto-updated.

Last update: 2025-05-02 11:56:44 UTC


README

A Filament Forms component that provides an interactive Leaflet map for selecting and storing geographical coordinates.

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Banner

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

Screenshot

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' => '&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: Screenshot

Custom Marker: Screenshot

Custom Tile: Screenshot

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.