osm-labo/templates/admin/speed_limit.html.twig

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

{% block title %}Limites de vitesse - {{ stats.name }}{% endblock %}

{% block body %}
<div class="container mt-4">
    <h1><i class="bi bi-speedometer2"></i> Limites de vitesse à {{ stats.name }} ({{ stats.zone }})</h1>
    <p>Complétion des limitations de vitesse sur le réseau routier OSM.<br>
    <span class="text-muted">Tags attendus :
        {% for tag in expected_tags %}<code>{{ tag }}</code>{% if not loop.last %}, {% endif %}{% endfor %}
    </span></p>
    <div class="row">
        <div class="col-md-8">
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-map"></i> Carte des routes (coloration selon maxspeed)</div>
                <div class="card-body p-2">
                    <div id="speedlimit-map" style="height: 450px; width: 100%;"></div>
                    <div id="speedlimit-completion" class="mt-2"></div>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-header"><i class="bi bi-traffic-cone"></i> Panneaux routiers & feux de circulation</div>
                <div class="card-body p-2">
                    <div id="traffic-map" style="height: 350px; width: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-header"><i class="bi bi-info-circle"></i> Informations</div>
                <div class="card-body">
                    <ul>
                        <li><b>Rouge</b> : route sans <code>maxspeed</code></li>
                        <li><b>Vert</b> : route avec <code>maxspeed</code></li>
                        <li><b>Bleu</b> : panneau routier (<code>traffic_sign</code>)</li>
                        <li><b>Orange</b> : feu de circulation (<code>traffic_signals</code>)</li>
                    </ul>
                    <p>Cliquer sur un objet pour ouvrir dans OSM, iD ou JOSM.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="/js/maplibre/maplibre-gl.js"></script>
<script>
const insee = '{{ insee_code }}';
const overpassHighways = `[out:json][timeout:60];\narea["ref:INSEE"="${insee}"]->.searchArea;\nway["highway"](area.searchArea);\nout body;\n>;\nout skel qt;`;
const overpassTraffic = `[out:json][timeout:60];\narea["ref:INSEE"="${insee}"]->.searchArea;\n(
  node["traffic_sign"](area.searchArea);
  node["highway"="traffic_signals"](area.searchArea);
);\nout body;`;

function fetchOverpass(query) {
    return fetch('https://overpass-api.de/api/interpreter', {
        method: 'POST',
        body: query,
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(r => r.json());
}

document.addEventListener('DOMContentLoaded', function() {
    // --- Carte des highways ---
    let map = new maplibregl.Map({
        container: 'speedlimit-map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
        center: [2, 48],
        zoom: 13
    });
    map.addControl(new maplibregl.NavigationControl());
    fetchOverpass(overpassHighways).then(data => {
        let nodes = {};
        let withMaxspeed = 0, total = 0;
        data.elements.forEach(e => { if (e.type === 'node') nodes[e.id] = e; });
        data.elements.forEach(e => {
            if (e.type === 'way' && e.tags && e.tags.highway) {
                total++;
                let hasMaxspeed = !!e.tags.maxspeed;
                if (hasMaxspeed) withMaxspeed++;
                let coords = e.nodes.map(nid => nodes[nid]).filter(n => n).map(n => [n.lon, n.lat]);
                if (coords.length < 2) return;
                map.addLayer({
                    id: 'way-' + e.id,
                    type: 'line',
                    source: {
                        type: 'geojson',
                        data: { type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: {} }
                    },
                    layout: { 'line-join': 'round', 'line-cap': 'round' },
                    paint: {
                        'line-color': hasMaxspeed ? '#28a745' : '#dc3545',
                        'line-width': 3
                    }
                });
                // Popup OSM/iD/JOSM
                let popupHtml = `<b>Highway ${e.tags.highway}</b><br>ID: ${e.id}`;
                if (e.tags.maxspeed) popupHtml += `<br><b>maxspeed:</b> ${e.tags.maxspeed}`;
                popupHtml += `<br><a href='https://www.openstreetmap.org/way/${e.id}' target='_blank'>OSM</a> | <a href='https://www.openstreetmap.org/edit?editor=id&way=${e.id}' target='_blank'>iD</a> | <a href='http://127.0.0.1:8111/load_object?objects=W${e.id}' target='_blank'>JOSM</a>`;
                let marker = new maplibregl.Marker({ color: hasMaxspeed ? '#28a745' : '#dc3545' })
                    .setLngLat(coords[Math.floor(coords.length/2)])
                    .setPopup(new maplibregl.Popup({ offset: 18 }).setHTML(popupHtml));
                // marker.addTo(map); // Optionnel : afficher un marker au milieu
            }
        });
        let completion = total > 0 ? Math.round(100 * withMaxspeed / total) : 0;
        document.getElementById('speedlimit-completion').innerHTML = `<b>Complétion maxspeed :</b> ${withMaxspeed} / ${total} (${completion}%)`;
    });
    // --- Carte des panneaux et feux ---
    let map2 = new maplibregl.Map({
        container: 'traffic-map',
        style: 'https://api.maptiler.com/maps/streets/style.json?key={{ maptiler_token }}',
        center: [2, 48],
        zoom: 13
    });
    map2.addControl(new maplibregl.NavigationControl());
    fetchOverpass(overpassTraffic).then(data => {
        data.elements.forEach(e => {
            if (e.type === 'node') {
                let color = e.tags && e.tags.highway === 'traffic_signals' ? 'orange' : 'blue';
                let icon = e.tags && e.tags.highway === 'traffic_signals' ? '🚦' : '🛑';
                let popupHtml = `<b>${icon} ${e.tags.highway === 'traffic_signals' ? 'Feu de circulation' : 'Panneau routier'}</b><br>ID: ${e.id}`;
                if (e.tags.traffic_sign) popupHtml += `<br><b>traffic_sign:</b> ${e.tags.traffic_sign}`;
                popupHtml += `<br><a href='https://www.openstreetmap.org/node/${e.id}' target='_blank'>OSM</a> | <a href='https://www.openstreetmap.org/edit?editor=id&node=${e.id}' target='_blank'>iD</a> | <a href='http://127.0.0.1:8111/load_object?objects=N${e.id}' target='_blank'>JOSM</a>`;
                new maplibregl.Marker({ color: color })
                    .setLngLat([e.lon, e.lat])
                    .setPopup(new maplibregl.Popup({ offset: 18 }).setHTML(popupHtml))
                    .addTo(map2);
            }
        });
    });
});
</script>
{% endblock %}