carte interactive leaflet dans symfony

DiegoMark
PHP Symfony
Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.

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.

Merci.
Diego

Entourez votre code en utilisant "```" pour bien le mettre en forme. (ne copiez pas trop de code)

2 réponses

ZHB

Salut,

Tu peux faire comme cela :

  1. Un Controller Symfony.
class SiteController extends AbstractController
{
    #[Route('/sites', name: 'site-all')]
    public function index(): Response
    {
        // donnée à charger dynamiquement
        return $this->json([
            ['name' => 'Site 1', 'latitude' => 46.56, 'longitude', 7.3],
            ['name' => 'Site 2', 'latitude' => 44.38, 'longitude', 6.89],
        ]);
    }
}
  1. Dans ton template twig.
<script>
    window.appConfig = {
        sitesUrl: '{{ path('site-all') }}',
    };
</script>
  1. Dans ton fichier JS externe

...

var sitesGroup = L.layerGroup();
var map = new L.Map('map');

map.on("load", function() {
    addSites();
});

async function addSites() {
    var response = await fetch(window.appConfig.sitesUrl);
    var json = await response.json();

    json.forEach(function (item) {
        L.marker([item.latitude, item.longitude]).addTo(sitesGroup);
    });

    map.addLayer(sitesGroup);
}
DiegoMark
Auteur

J'ai essayé comme ça mais je n'arrive pas bien à intégrer ton code dans le mien. Pour moi, il faut que je passe part une API avec Postman, le client clique sur la popup et génère une requète en GET pour un site. L'API répondra en renvoyant le json de ce site et du coup on peut boucler dessus en javascript et renvoyer le lien vers le template de ce site.