siberfx / backpack-leafletjs

7.1.0 2026-10-29 18:20 UTC

Requires

• php: ^8.3
• backpack/crud: ^6.8|^7.0
• illuminate/contracts: ^12.0|^13.0
• illuminate/support: ^12.0|^13.0
• illuminate/view: ^12.0|^13.0

Requires (Dev)

• orchestra/testbench: ^10.0|^11.0
• phpunit/phpunit: ^11.5|^12.0

MIT

• Selim Görmüş

• geocoding
• laravel
• leaflet
• OpenStreetMap
• mapbox
• backpack
• leafletjs
• laravel-12
• laravel-13
• backpack-for-laravel

Published on Packagist.org on 2026-10-29 18:23 UTC

README

A map field and Blade component for Backpack for Laravel. Click, drag or search to store latitude & longitude, powered by Leaflet.

Features

• leaflet CRUD field. Click the map, drag the marker or search an address to set a location.
• Address search through leaflet-control-geocoder (OpenStreetMap Nominatim, no API key).
• <x-leaflet-frontend> Blade component for maps and markers on public pages.
• OpenStreetMap by default, with Mapbox available once you add a token.
• Nothing to copy. Views, config and the component are registered by the service provider. Publish only what you want to customise.
• Several maps per form, and maps inside tabs and modals, work out of the box.

Requirements

Package	Supported
PHP	8.3 – 8.5
Laravel	12.x, 13.x
Backpack for Laravel	6.8+, 7.x

Need PHP 8.2, Laravel 10/11 or Backpack 5? Use an earlier release of this package (6.x).

Installation

composer require siberfx/backpack-leafletjs

The service provider is auto-discovered.

If you want the package to create the coordinate columns, publish and run the migration. It adds lat and lng decimal columns to the table set in backpack.leaflet.table_name:

php artisan vendor:publish --tag=leafletjs-migrations
php artisan migrate

Usage

The CRUD field

Name the field after both coordinate columns, separated by a comma. The field renders and saves both inputs itself:

use Backpack\CRUD\app\Library\CrudPanel\CrudPanelFacade as CRUD;

CRUD::field([
    'name' => 'lat,lng',
    'label' => 'Location',
    'type' => 'leaflet',
    'options' => [
        'provider' => 'openstreetmap', // or 'mapbox'. Defaults to config('backpack.leaflet.provider').
        'zoom' => 14,
        'height' => '400px',
        'search' => true,              // show the address search box
        'marker_image' => null,        // optional custom marker icon URL
    ],
    'hint' => 'Click the map, drag the marker or search an address.',
]);

Make sure both columns are fillable on your model:

protected $fillable = ['lat', 'lng'];

Using the trait

LeafletCrud adds the field using the column names from the config. Extra field settings such as tab, label or hint are merged in:

use Siberfx\Leafletjs\Http\Controllers\Admin\Traits\LeafletCrud;

class PlaceCrudController extends CrudController
{
    use LeafletCrud;

    protected function setupCreateOperation(): void
    {
        $this->setLeafletFields(['tab' => 'General']);
    }
}

Legacy setup: a map field that writes into your own hidden inputs

With a single-name field, the map writes into inputs whose ids are {name}-lat and {name}-lng:

CRUD::field(['name' => 'leafletMapId', 'type' => 'leaflet']);
CRUD::field(['name' => 'lat', 'type' => 'hidden', 'attributes' => ['id' => 'leafletMapId-lat']]);
CRUD::field(['name' => 'lng', 'type' => 'hidden', 'attributes' => ['id' => 'leafletMapId-lng']]);

Frontend component

Show a map on any Blade page:

<x-leaflet-frontend
    id="office-map"
    :center-point="[52.3676, 4.9041]"
    :markers="[
        [52.3676, 4.9041],
        ['lat' => 52.0907, 'lng' => 5.1214, 'popup' => 'Utrecht office'],
    ]"
    :zoom-level="9"
    :max-zoom-level="18"
    tile-host="openstreetmap"
    height="450px"
    class="rounded shadow"
/>

Every attribute is optional. Without center-point, the map centres on default_center from the config. Popup text is escaped.

Configuration

The defaults work without publishing anything. To customise them:

php artisan vendor:publish --tag=leafletjs-config

This creates config/backpack/leaflet.php:

return [
    'table_name' => 'settings',   // table used by the migration
    'lat_field' => 'lat',
    'lng_field' => 'lng',

    'default_center' => ['lat' => 53.8965741, 'lng' => 27.547158],
    'default_zoom' => 14,

    'provider' => env('LEAFLET_PROVIDER', env('MAPS_MAPBOX_ACCESS_TOKEN') ? 'mapbox' : 'openstreetmap'),
    'providers' => [/* openstreetmap and mapbox. Add your own tile servers here. */],
    'assets' => [/* Leaflet and geocoder CDN URLs */],
];

Mapbox

Add your token to .env and the mapbox provider is used automatically:

MAPS_MAPBOX_ACCESS_TOKEN=pk.your-token
MAPS_MAPBOX_STYLE=mapbox/streets-v12

If mapbox is selected without a token, the map falls back to OpenStreetMap.

Customising the views

php artisan vendor:publish --tag=leafletjs-views

Published views go to resources/views/vendor/leafletjs and take precedence over the package views.

Testing

composer install
composer test

The suite runs on Orchestra Testbench. CI runs it on PHP 8.3, 8.4 and 8.5 against Laravel 12 and 13.

Changelog

See CHANGELOG.md for release notes and the upgrade guide from 6.x.

Security

If you discover a security issue, please email [e-mail] instead of opening a public issue.

Credits

• Selim Görmüş
• All contributors

License

The MIT License (MIT). See LICENSE.md for details.