cartographieCommune.html.twig

{% extends 'base.html.twig' %}

{% block title %}Cartographie des établissements{% endblock %}

{% block body %}
    <h1>Cartographie des établissements de la commune</h1>

    <!-- Div où la carte sera affichée -->
    <div id="map" style="height: 500px;"></div>

    <!-- Ajouter le lien vers le CSS de Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <!-- Ajouter le script JS de Leaflet -->
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <!-- Script JavaScript pour initialiser la carte et les marqueurs -->
    <script>
        // Initialisation de la carte
        var map = L.map('map').setView([48.8566, 2.3522], 12);  // Coordonnées par défaut (Paris)

        // Ajouter un fond de carte avec OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Tableau contenant les établissements (passé par Twig)
        var etablissements = [
            {% for etablissement in etablissements %}
                {
                    nom: "{{ etablissement.nom }}",
                    lat: {{ etablissement.lat }},
                    lon: {{ etablissement.lon }}
                }{% if not loop.last %},{% endif %}
            {% endfor %}
        ];

        // Boucle pour ajouter des marqueurs sur la carte
        etablissements.forEach(function(etablissement) {
            L.marker([etablissement.lat, etablissement.lon])
                .addTo(map)
                .bindPopup('<b>' + etablissement.nom + '</b>');
        });
    </script>
{% endblock %}