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

{% block title %}Cartographie des établissements - Commune {{ commune }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
{% endblock %}

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

    <div id="map" style="height: 500px;"></div>

    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>

    <script>
        const draw_map = (data) => {
            const map = L.map('map')
                .fitBounds(data.map((d) => [d.lat, d.lon]))
                .addLayer(L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }));

            data.forEach((etablissement) => {
                L.marker([etablissement.lat, etablissement.lon])
                    .addTo(map)
                    .bindPopup("<b>" + etablissement.nom + "</b>");
            });
        };

        const data = {{ data|json_encode|raw }}; // Injecter dynamiquement les données dans le JavaScript

        draw_map(data);
    </script>
{% endblock %}
