Filament Facile

Dans cet article, nous allons apprendre à intégrer une carte Leaflet dans un projet Laravel utilisant le panel Filament, tout en affichant dynamiquement des marqueurs provenant du backend PHP.

Prérequis

Un projet Laravel fonctionnel avec Filament installé
Une page personnalisée Filament (Page Resource)
Connaissances de base en Blade, PHP et JavaScript

Installation de Leaflet

Dans la vue Blade de votre page Filament, ajoutez les liens vers les fichiers CSS et JS de Leaflet :

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
@endpush

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
@endpush

Cela permet de charger les fichiers nécessaires pour utiliser Leaflet sur votre page.

Structure HTML de la carte

Nous utilisons Alpine.js pour initialiser la carte automatiquement dès que le composant est monté :

<div x-data="leafletMap()" id="map-container" style="width: 100%; height: 500px;"></div>

Le x-data d'AlpineJS permet de lier une instance JavaScript à cet élément, et id="map-container" est requis par Leaflet pour savoir où insérer la carte.

Envoi des données du backend

Dans votre classe de page Filament, ajoutez une méthode getViewData() pour envoyer les coordonnées à la vue :

public function getViewData(): array
{
    return [
        'locations' => [
            ['lat' => 48.8566, 'lng' => 2.3522, 'name' => 'Paris'],
            ['lat' => 43.2965, 'lng' => 5.3698, 'name' => 'Marseille'],
        ],
    ];
}

Cela vous permet de définir les positions géographiques que vous souhaitez afficher sous forme de marqueurs.

Script JavaScript pour afficher les marqueurs

Dans la même vue Blade, nous passons les données PHP au JavaScript via @json, puis nous créons une fonction JavaScript pour initialiser la carte et ajouter les marqueurs :

<script>
    const locations = @json($locations);

    function leafletMap() {
        return {
            map: null, // Instance de la carte Leaflet

            init() {
                this.initMap(); // Initialise la carte
                this.addMarkers(); // Ajoute les marqueurs
            },

            initMap() {
                // Crée une carte centrée sur la France
                this.map = L.map('map-container').setView([46.6031, 1.8883], 6);

                // Charge les tuiles OpenStreetMap
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; OpenStreetMap contributors'
                }).addTo(this.map);
            },

            addMarkers() {
                // Pour chaque emplacement, crée un marqueur
                locations.forEach(location => {
                    L.marker([location.lat, location.lng])
                        .addTo(this.map)
                        .bindPopup(location.name || 'Aucun nom'); // Ajoute une infobulle
                });
            }
        }
    }
</script>

Conclusion