tests liens ctc
This commit is contained in:
Tykayn
tykayn
parent
6f3d19245e
commit
2fd0d8d933
3 changed files with 315 additions and 78 deletions
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
|
||||
<style>
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
|
|
@ -87,11 +88,48 @@
|
|||
.chart-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#themeMap {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.maplibregl-popup-content {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
.btn-josm {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container-fluid">
|
||||
{# DEBUG : Affichage des objets Place trouvés pour cette ville #}
|
||||
{% if places is defined %}
|
||||
<div class="alert alert-warning" style="font-size:0.95em;">
|
||||
<b>DEBUG : Objets Place trouvés pour cette ville (avant filtrage)</b><br>
|
||||
<table class="table table-sm table-bordered mt-2 mb-0">
|
||||
<thead><tr>
|
||||
<th>#</th><th>id</th><th>main_tag</th><th>osm_kind</th><th>nom</th><th>lat</th><th>lon</th>
|
||||
</tr></thead>
|
||||
<tbody>
|
||||
{% for p in places %}
|
||||
<tr>
|
||||
<td>{{ loop.index }}</td>
|
||||
<td>{{ p.getOsmId() }}</td>
|
||||
<td>{{ p.getMainTag() }}</td>
|
||||
<td>{{ p.getOsmKind() }}</td>
|
||||
<td>{{ p.getName() }}</td>
|
||||
<td>{{ p.getLat() }}</td>
|
||||
<td>{{ p.getLon() }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="stats-header">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
|
|
@ -125,6 +163,15 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
{% if josm_url %}
|
||||
<a href="{{ josm_url }}" class="btn btn-outline-dark btn-josm" target="_blank">
|
||||
<i class="bi bi-box-arrow-up-right"></i> Ouvrir tous les objets dans JOSM
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="alert alert-info mb-3">Aucun objet sélectionné pour ce thème, rien à charger dans JOSM.</div>
|
||||
{% endif %}
|
||||
<div id="themeMap"></div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="currentCount">-</div>
|
||||
|
|
@ -165,6 +212,65 @@
|
|||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
||||
<script>
|
||||
const geojson = {{ geojson|raw }};
|
||||
const mapToken = '{{ maptiler_token }}';
|
||||
const mapCenter = {{ center|json_encode|raw }};
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('[DEBUG] mapToken:', mapToken);
|
||||
console.log('[DEBUG] geojson:', geojson);
|
||||
console.log('[DEBUG] geojson.features:', geojson ? geojson.features : undefined);
|
||||
console.log('[DEBUG] mapCenter:', mapCenter);
|
||||
if (mapToken && geojson && geojson.features && geojson.features.length > 0) {
|
||||
console.log('[DEBUG] Initialisation de la carte Maplibre...');
|
||||
const map = new maplibregl.Map({
|
||||
container: 'themeMap',
|
||||
style: `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`,
|
||||
center: mapCenter || geojson.features[0].geometry.coordinates,
|
||||
zoom: 13
|
||||
});
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
geojson.features.forEach(f => {
|
||||
let color = f.properties.is_complete ? '#198754' : '#adb5bd';
|
||||
if (!f.properties.is_complete && (f.properties.tags && (f.properties.tags.name || f.properties.tags.operator))) {
|
||||
color = '#ffc107'; // partiel
|
||||
}
|
||||
const marker = new maplibregl.Marker({ color: color })
|
||||
.setLngLat(f.geometry.coordinates)
|
||||
.setPopup(new maplibregl.Popup({ offset: 18 })
|
||||
.setHTML(`
|
||||
<div style='min-width:180px'>
|
||||
<strong>${f.properties.name || '(sans nom)'}</strong><br>
|
||||
<span class='text-muted'>${f.properties.osm_kind} ${f.properties.id}</span><br>
|
||||
<span style='font-size:0.95em;'>
|
||||
${Object.entries(f.properties.tags).map(([k,v]) => `<span><b>${k}</b>: ${v}</span>`).join('<br>')}
|
||||
</span>
|
||||
<a href='${f.properties.osm_url}' target='_blank'>Voir sur OSM</a>
|
||||
</div>
|
||||
`)
|
||||
)
|
||||
.addTo(map);
|
||||
});
|
||||
} else {
|
||||
console.warn('[DEBUG] Carte non initialisée : conditions non remplies.');
|
||||
if (!mapToken) {
|
||||
console.warn('[DEBUG] mapToken manquant ou vide');
|
||||
}
|
||||
if (!geojson) {
|
||||
console.warn('[DEBUG] geojson manquant ou vide');
|
||||
}
|
||||
if (!geojson || !geojson.features || geojson.features.length === 0) {
|
||||
console.warn('[DEBUG] geojson.features vide ou non défini');
|
||||
}
|
||||
// Affichage d'un message dans la page
|
||||
const mapDiv = document.getElementById('themeMap');
|
||||
if (mapDiv) {
|
||||
mapDiv.innerHTML = '<div style="color:red;font-weight:bold;padding:2em;text-align:center;">Carte non initialisée : données manquantes ou incomplètes (voir console pour debug)</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue