carte thèmatique
This commit is contained in:
Tykayn
tykayn
parent
2fd0d8d933
commit
5fe2804a1a
5 changed files with 253 additions and 142 deletions
|
|
@ -13,7 +13,7 @@
|
|||
<a href="{{ path('admin_followup_theme_graph', {'insee_code': stats.zone, 'theme': theme}) }}" class="btn btn-primary me-2">
|
||||
<i class="bi bi-graph-up"></i> Graphe détaillé
|
||||
</a>
|
||||
<a href="https://osm-mon-commerce.fr/?insee={{ stats.zone }}" target="_blank" class="btn btn-success me-2">
|
||||
<a href="{{ path('app_public_index') }}" target="_blank" class="btn btn-success me-2">
|
||||
<i class="bi bi-globe"></i> OSM Mon Commerce
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -172,6 +172,14 @@
|
|||
{% endif %}
|
||||
<div id="themeMap"></div>
|
||||
|
||||
{% if overpass_query is defined %}
|
||||
<div class="mb-3">
|
||||
<a href="https://overpass-turbo.eu/?Q={{ overpass_query|url_encode }}" target="_blank" class="btn btn-outline-primary">
|
||||
<i class="bi bi-box-arrow-up-right"></i> Voir la requête sur Overpass Turbo
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="currentCount">-</div>
|
||||
|
|
@ -191,21 +199,34 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-tabs">
|
||||
<button class="chart-tab active" data-chart="count">Nombre d'objets</button>
|
||||
<button class="chart-tab" data-chart="completion">Pourcentage de complétion</button>
|
||||
</div>
|
||||
|
||||
<div class="chart-content active" id="count-chart">
|
||||
<div class="chart-container">
|
||||
<canvas id="countChart"></canvas>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
{# <div class="card p-3">
|
||||
<h5>Progression</h5>
|
||||
<table class="table table-sm mb-0">
|
||||
<thead><tr><th>Période</th><th>Nombre</th><th>Complétion (%)</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>7 jours</td><td>{{ progressions.count['7j'] is not null ? '%+d'|format(progressions.count['7j']) : '–' }}</td><td>{{ progressions.completion['7j'] is not null ? '%+.1f'|format(progressions.completion['7j']) : '–' }}</td></tr>
|
||||
<tr><td>30 jours</td><td>{{ progressions.count['30j'] is not null ? '%+d'|format(progressions.count['30j']) : '–' }}</td><td>{{ progressions.completion['30j'] is not null ? '%+.1f'|format(progressions.completion['30j']) : '–' }}</td></tr>
|
||||
<tr><td>6 mois</td><td>{{ progressions.count['6m'] is not null ? '%+d'|format(progressions.count['6m']) : '–' }}</td><td>{{ progressions.completion['6m'] is not null ? '%+.1f'|format(progressions.completion['6m']) : '–' }}</td></tr>
|
||||
<tr><td>1 an</td><td>{{ progressions.count['1a'] is not null ? '%+d'|format(progressions.count['1a']) : '–' }}</td><td>{{ progressions.completion['1a'] is not null ? '%+.1f'|format(progressions.completion['1a']) : '–' }}</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> #}
|
||||
</div>
|
||||
<div class="col-md-6 d-flex align-items-end">
|
||||
<div class="ms-auto">
|
||||
<label for="basemapSelect" class="form-label mb-1">Fond de carte :</label>
|
||||
<select id="basemapSelect" class="form-select">
|
||||
<option value="streets">MapTiler Streets</option>
|
||||
<option value="satellite">BD Ortho IGN</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-content" id="completion-chart">
|
||||
<div class="chart-container">
|
||||
<canvas id="completionChart"></canvas>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="themeChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -224,34 +245,78 @@
|
|||
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
|
||||
let mapInstance = null;
|
||||
function getStyleUrl(style) {
|
||||
if (style === 'streets') {
|
||||
return `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`;
|
||||
} else if (style === 'satellite') {
|
||||
// BD Ortho IGN WMTS (clé publique, usage limité)
|
||||
return {
|
||||
version: 8,
|
||||
sources: {
|
||||
"bdortho": {
|
||||
"type": "raster",
|
||||
"tiles": [
|
||||
"https://wxs.ign.fr/essentiels/geoportail/wmts?layer=ORTHOIMAGERY.ORTHOPHOTOS&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/jpeg&TileMatrix={z}&TileCol={x}&TileRow={y}"
|
||||
],
|
||||
"tileSize": 256,
|
||||
"attribution": "Données © IGN BD Ortho"
|
||||
}
|
||||
},
|
||||
layers: [
|
||||
{
|
||||
"id": "bdortho",
|
||||
"type": "raster",
|
||||
"source": "bdortho",
|
||||
"minzoom": 0,
|
||||
"maxzoom": 19
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
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);
|
||||
});
|
||||
return null;
|
||||
}
|
||||
function initMap(style) {
|
||||
if (mapInstance) { mapInstance.remove(); }
|
||||
const styleUrl = getStyleUrl(style);
|
||||
mapInstance = new maplibregl.Map({
|
||||
container: 'themeMap',
|
||||
style: styleUrl,
|
||||
center: mapCenter || (geojson.features && geojson.features[0] ? geojson.features[0].geometry.coordinates : [2,48]),
|
||||
zoom: 13
|
||||
});
|
||||
mapInstance.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';
|
||||
}
|
||||
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(mapInstance);
|
||||
});
|
||||
}
|
||||
// Initialisation par défaut
|
||||
initMap('streets');
|
||||
// Sélecteur de fond de carte
|
||||
const basemapSelect = document.getElementById('basemapSelect');
|
||||
if (basemapSelect) {
|
||||
basemapSelect.addEventListener('change', function() {
|
||||
initMap(this.value);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
console.warn('[DEBUG] Carte non initialisée : conditions non remplies.');
|
||||
if (!mapToken) {
|
||||
|
|
@ -335,88 +400,74 @@
|
|||
}
|
||||
};
|
||||
|
||||
// Graphique du nombre d'objets
|
||||
const countCtx = document.getElementById('countChart').getContext('2d');
|
||||
const countChart = new Chart(countCtx, {
|
||||
// Graphique fusionné
|
||||
const ctx = document.getElementById('themeChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Nombre d\'objets',
|
||||
data: countData.map(d => ({
|
||||
x: new Date(d.date),
|
||||
y: d.value
|
||||
})),
|
||||
borderColor: '#0d6efd',
|
||||
backgroundColor: 'rgba(13, 110, 253, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
...commonOptions,
|
||||
scales: {
|
||||
...commonOptions.scales,
|
||||
y: {
|
||||
...commonOptions.scales.y,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Nombre d\'objets'
|
||||
}
|
||||
datasets: [
|
||||
{
|
||||
label: "Nombre d'objets",
|
||||
data: countData.map(d => ({ x: new Date(d.date), y: d.value })),
|
||||
borderColor: '#0d6efd',
|
||||
backgroundColor: 'rgba(13, 110, 253, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.1,
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
{
|
||||
label: 'Pourcentage de complétion',
|
||||
data: completionData.map(d => ({ x: new Date(d.date), y: d.value })),
|
||||
borderColor: '#198754',
|
||||
backgroundColor: 'rgba(25, 135, 84, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.1,
|
||||
yAxisID: 'y2',
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Graphique de la complétion
|
||||
const completionCtx = document.getElementById('completionChart').getContext('2d');
|
||||
const completionChart = new Chart(completionCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Pourcentage de complétion',
|
||||
data: completionData.map(d => ({
|
||||
x: new Date(d.date),
|
||||
y: d.value
|
||||
})),
|
||||
borderColor: '#198754',
|
||||
backgroundColor: 'rgba(25, 135, 84, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.1
|
||||
}]
|
||||
]
|
||||
},
|
||||
options: {
|
||||
...commonOptions,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: true },
|
||||
tooltip: { mode: 'index', intersect: false }
|
||||
},
|
||||
interaction: { mode: 'nearest', axis: 'x', intersect: false },
|
||||
scales: {
|
||||
...commonOptions.scales,
|
||||
y: {
|
||||
...commonOptions.scales.y,
|
||||
x: {
|
||||
type: 'time',
|
||||
time: { unit: 'day', displayFormats: { day: 'dd/MM/yyyy' } },
|
||||
title: { display: true, text: 'Date' }
|
||||
},
|
||||
y1: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
title: { display: true, text: "Nombre d'objets" },
|
||||
beginAtZero: true
|
||||
},
|
||||
y2: {
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
title: { display: true, text: 'Complétion (%)' },
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Pourcentage de complétion (%)'
|
||||
}
|
||||
grid: { drawOnChartArea: false }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Gestion des onglets
|
||||
document.querySelectorAll('.chart-tab').forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
// Retirer la classe active de tous les onglets
|
||||
document.querySelectorAll('.chart-tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.chart-content').forEach(c => c.classList.remove('active'));
|
||||
|
||||
// Ajouter la classe active à l'onglet cliqué
|
||||
this.classList.add('active');
|
||||
const chartId = this.getAttribute('data-chart') + '-chart';
|
||||
document.getElementById(chartId).classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Initialiser les statistiques
|
||||
updateStats();
|
||||
|
||||
// Ajout debug JS requête Overpass
|
||||
{% if overpass_query is defined %}
|
||||
console.log('[DEBUG][Overpass] Requête envoyée à Overpass :', `{{ overpass_query|e('js') }}`);
|
||||
{% else %}
|
||||
console.log('[DEBUG][Overpass] Aucune requête Overpass transmise à la page.');
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue