itsmmunoz/moon-leaflet

Leaflet field and component for MoonShine

1.0 2026-05-22 14:59 UTC

Requires

• php: ^8.1
• moonshine/moonshine: ^3.0 || ^4.0

Requires (Dev)

• orchestra/testbench: ^8.0
• pestphp/pest: ^2.0
• pestphp/pest-plugin-laravel: ^2.0

MIT

• Maycol Muñoz

• map
• leaflet
• moonshine

README

MoonLeaflet adds interactive map support to MoonShine. It allows users to select coordinates directly from a map or display multiple locations visually with Leaflet.

• Map field with draggable marker
• Multiple available map layers
• Works in Form, Detail, and Index views
• Component mode with multiple markers
• Optional user geolocation support
• Customizable zoom, drag, and layer

🧱 Example Previews

Field	Component

Support MoonShine versions

MoonShine	MoonLeaflet
3.x, 4.x	1.0

🧩 Installation

composer require itsmmunoz/moon-leaflet

🚀 Usage

Field

use ItsmMunoz\MoonLeaflet\Fields\LeafletField;

LeafletField::make('Location') // label
    ->initialPosition(latitude: 40.7580, longitude: -73.9855) //initial position
    ->columns('latitude', 'longitude') // columns in database
    ->draggable(true) // draggable market (optional) default is true

Component

use ItsmMunoz\MoonLeaflet\Components\LeafletMap;

LeafletMap::make('Business Locations') // label
    ->initialPosition(latitude: 40.7580, longitude: -73.9855) //initial position
    ->items(fn () => Business::all() 
    ->map(function (Business $business) {
        return [
            'name' => $business->name,
            'latitude' => $business->latitude,
            'longitude' => $business->longitude,
        ];
    })->toArray()) // Each item must include name, latitude, and longitude

💡 The map will attempt to use the user's location if geolocation is enabled.
If unavailable, it defaults to coordinates (0, 0).

🌍 Options for field and component

    ->layer('OpenStreetMap') // map layer (default: OpenStreetMap)
    ->minZoom(5) // minimum zoom (default: 5)
    ->maxZoom(18) // maximum zoom (default: 18)
    ->zoom(14) // initial zoom (default: 14)

🌍 Available Map Layers

Layer Name
OpenStreetMap
OpenTopoMap
CartoDB Dark Matter
CartoDB Positron
CartoDB Voyager
Esri WorldStreetMap
Esri Satellite