carte dynamique en symfony

Bonjour, je cherche à faire une carte interactive. Ma carte indique les sites d’escalade en France par exemple. Je veux que le popup du marqueur d’un site de la carte me renvoi sur le template de ce site qui est descriptif. Mon projet est en symfony. J’ai procédé comme suit. Dans index.htmll.twig, je colle la carte dans une balise javascript. J’essaye de boucler sur la variable 'sites’ des sites d’escalade dans ma BDD via la script javascript dans le twig mais pour l’instant ca ne marche pas. Voici le code du script dans index.html.twig :

<script>
//definiton de la variable site dans le script
var site = {{sites}}

    //on initialise la carte
    var carte = L.map('macarte').setView([48.852969, 2.349903], 5);
    //on charge les tuiles
    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
            // Il est toujours bien de laisser le lien vers la source des données
            attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
            minZoom: 1,
            maxZoom: 20
        }).addTo(carte);

     var icone = L.icon({
                iconUrl:"../img/pointeur-de-carte.png",
                iconSize: [50, 50],
                iconAnchor: [25, 50],
                popupAnchor: [-2, -44],
            });

    // on parcours les différents sites

    for ( site in sites) {

            // Nous définissons l'icône à utiliser pour le marqueur, sa taille affichée (iconSize), sa position (iconAnchor) et le décalage de son ancrage (popupAnchor) 
            //on crée un marqueur et on lui donne un popup
            var marqueur = L.marker([sites[site].lat, sites[site].lon],{icon:icone}).addTo(carte);
            //marqueur.bindPopup('<h3>sites</h3>');
            marqueur.bindPopup(site);

            marqueur.bindPopup(<a href="{{ path('site_show', {'id':sites.id}) }}">site</a>);

           // markerClusters.addLayer(marker); // Nous ajoutons le marqueur aux groupes
            //markerClusters.push(marqueur);
        }

</script>

J’ai l’erreur suivante: An exception has been thrown during the rendering of a template ("Notice: Array to string conversion").

Le dump dans le twig de sites marche. Je ne sais ou mettre un __toString pour faire que la conversion en string marche.

Auriez-vous une idée d’une solution?

Merci. Diego

Attention avec l’injection en JS, on est jamais à l’abri d’une erreur : préfère la définition dans une balise que tu vas ensuite parser. Il faut aussi indiquer à Twig que tu veux du JSON plutôt qu’un simple echo de ta variable.

<script id="sites-data" type="application/json">{{sites|json_encode()}}</script>

const sites = JSON.parse(document.getElementById('sites-data').textContent);

Ce que tu cherches, pour être précis, c’est d’utiliser du geojson avec leaflet.

Dans ton back, tu génères le geojson (probablement sur une liste de variables, enfin ça dépend de comment le back le gère), que tu insères dans la balise script comme le montre viki. Ensuite, dans ton JS tu le récupères avec la fonction (toujours comme indiqué par viki), et tu utilises les fonctions de Leaflet pour importer ce geojson.

Edit : Symfony ne gère peut-être pas nativement le geojson, dans ce cas il te faudra un plugin quelconque.

merci beaucoup, je vais travailler dessus