point map

templates/sortie/view.html.twig

@@ -13,7 +13,7 @@
 
 {% block content %}
     <div class="container mx-auto p-6 bg-gray-50 rounded-lg shadow-lg mt-6">
-        <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">🎉 Détails de la sortie</h1>
+        <h1 class="text-4xl font-bold text-center text-gray-800 mb-8">🎉 {{ sortie.nom }} 🎉</h1>
 
         <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
             <div class="lg:col-span-7 bg-white rounded-lg shadow p-6">
@@ -114,11 +114,21 @@
         <script>
             document.addEventListener('DOMContentLoaded', () => {
                 const map = L.map('map').setView([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}], 15);
+
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
                 }).addTo(map);
 
-                L.marker([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}]).addTo(map)
+                // Définir l'icône personnalisée avec une taille plus grande
+                const customIcon = L.icon({
+                    iconUrl: '/img/pointeur.png', // Chemin de l'image
+                    iconSize: [100, 100], // Taille ajustée [largeur, hauteur]
+                    iconAnchor: [50, 100], // Point correspondant à la base de l'icône [x, y]
+                    popupAnchor: [0, -100], // Position du popup par rapport à l'icône
+                });
+
+                // Ajouter un marqueur avec l'icône personnalisée
+                L.marker([{{ sortie.lieu.latitude }}, {{ sortie.lieu.longitude }}], { icon: customIcon }).addTo(map)
                     .bindPopup("{{ sortie.lieu.nom }}")
                     .openPopup();
             });