mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
513 lines
No EOL
18 KiB
Twig
513 lines
No EOL
18 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}{{ 'display.stats'|trans }}- {{ stats.zone }}
|
|
{{ stats.name }} {% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet' />
|
|
<style>
|
|
.completion-circle {
|
|
fill-opacity: 0.6;
|
|
stroke: #fff;
|
|
stroke-width: 3;
|
|
}
|
|
#distribution_completion {
|
|
height: 300px;
|
|
margin: 20px 0;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container">
|
|
<div class="mt-4 p-4">
|
|
<div class="row">
|
|
<div class="col-md-6 col-12">
|
|
<h1 class="title">{{ 'display.stats'|trans }} - {{ stats.zone }}
|
|
{{ stats.name }} - {{ stats.completionPercent }}% complété</h1>
|
|
</div>
|
|
<div class="col-md-6 col-12">
|
|
<a href="{{ path('app_admin_labourer', {'zip_code': stats.zone}) }}" class="btn btn-primary" id="labourer">Labourer les mises à jour</a>
|
|
<button id="openInJOSM" class="btn btn-secondary ms-2">
|
|
<i class="bi bi-map"></i> Ouvrir dans JOSM
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-3 col-12">
|
|
{{ stats.getCompletionPercent() }} % complété sur les critères donnés.
|
|
</div>
|
|
<div class="col-md-3 col-12">
|
|
<i class="bi bi-building"></i> {{ stats.places | length}} commerces dans la zone.
|
|
</div>
|
|
<div class="col-md-3 col-12">
|
|
<i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
|
|
</div>
|
|
<div class="col-md-3 col-12">
|
|
<i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
|
|
</div>
|
|
<div class="col-md-3 col-12">
|
|
<i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
|
|
</div>
|
|
<div class="col-md-3 col-12">
|
|
<i class="bi bi-arrow-up-right"></i>
|
|
{{ stats.getAvecAccessibilite() }} commerces avec accessibilité PMR renseignée.
|
|
</div>
|
|
<div class="col-md-3 col-12">
|
|
<i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
|
|
</div>
|
|
</div>
|
|
|
|
<div id="maploader">
|
|
<div class="spinner-border" role="status">
|
|
<i class="bi bi-load bi-spin"></i>
|
|
<span class="visually-hidden">Chargement de la carte...</span>
|
|
</div>
|
|
</div>
|
|
<div id="map" class="mt-4" style="height: 400px;"></div>
|
|
|
|
</div>
|
|
<div class="card mt-4">
|
|
|
|
|
|
|
|
<div id="distribution_completion" class="mt-4 mb-4"></div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-12">
|
|
<h1 class="card-title p-4">Tableau des {{ stats.places |length }} lieux</h1>
|
|
</div>
|
|
<div class="col-md-6 col-12">
|
|
<a class="btn btn-primary pull-right mt-4" href="{{ path('app_admin_export_csv', {'zip_code': stats.zone}) }}" class="btn btn-primary">
|
|
<i class="bi bi-filetype-csv"></i>
|
|
Exporter en CSV
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<table class="table table-bordered table-striped table-hover table-responsive">
|
|
{% include 'admin/stats/table-head.html.twig' %}
|
|
<tbody>
|
|
{% for commerce in stats.places %}
|
|
{% include 'admin/stats/row.html.twig' %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>requête overpass</h2>
|
|
<pre class="p-4 bg-light">
|
|
{{query_places|raw}}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
|
<script src='{{ asset('js/turf/turf.min.js') }}'></script>
|
|
<script src="{{ asset('js/chartjs/chart.umd.js') }}"></script>
|
|
<script>
|
|
const request = `{{query_places|raw}}`;
|
|
const zip_code = `{{stats.zone}}`;
|
|
let mapElements = [];
|
|
let map_is_loaded=false;
|
|
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: 'https://api.maptiler.com/maps/streets-v2/style.json?key={{ maptiler_token }}',
|
|
center: [2.3488, 48.8534],
|
|
zoom: 12
|
|
});
|
|
|
|
function getCompletionColor(completion) {
|
|
if (completion === undefined || completion === null) {
|
|
return '#808080'; // Gris pour pas d'information
|
|
}
|
|
// Convertir le pourcentage en couleur verte (0% = blanc, 100% = vert foncé)
|
|
const intensity = Math.floor((completion / 100) * 255);
|
|
return `rgb(0, ${intensity}, 0)`;
|
|
}
|
|
|
|
function calculateCompletion(element) {
|
|
let completed = 0;
|
|
let total = 0;
|
|
|
|
// Critères à vérifier
|
|
const criteria = [
|
|
'name',
|
|
'addr:street',
|
|
'addr:housenumber',
|
|
'addr:postcode',
|
|
'addr:city',
|
|
'opening_hours',
|
|
'website',
|
|
'wheelchair',
|
|
'phone'
|
|
];
|
|
|
|
criteria.forEach(criterion => {
|
|
if (element.tags && element.tags[criterion]) {
|
|
completed++;
|
|
}
|
|
total++;
|
|
});
|
|
|
|
return total > 0 ? (completed / total) * 100 : 0;
|
|
}
|
|
|
|
function createPopupContent(element) {
|
|
console.log("createPopupContent",element);
|
|
let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
|
|
if (element.tags) {
|
|
for (const tag in element.tags) {
|
|
tagstable += `<tr><td>${tag}</td><td>${element.tags[tag]}</td></tr>`;
|
|
}
|
|
}
|
|
tagstable += '</table>';
|
|
|
|
return `
|
|
<a href="/admin/placeType/${element.type}/${element.id}">
|
|
<h3>${element.tags?.name || 'Sans nom'}</h3>
|
|
</a>
|
|
<br>
|
|
<a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank">OSM</a>
|
|
${tagstable}
|
|
`;
|
|
}
|
|
|
|
function calculateCompletionDistribution(elements) {
|
|
// Créer des buckets de 10% (0-10%, 10-20%, etc.)
|
|
const buckets = Array(11).fill(0);
|
|
|
|
elements.forEach(element => {
|
|
const completion = calculateCompletion(element);
|
|
const bucketIndex = Math.floor(completion / 10);
|
|
buckets[bucketIndex]++;
|
|
});
|
|
|
|
return buckets;
|
|
}
|
|
|
|
function createCompletionChart(elements) {
|
|
const distribution = calculateCompletionDistribution(elements);
|
|
const ctx = document.createElement('canvas');
|
|
document.getElementById('distribution_completion').appendChild(ctx);
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['0-10%', '10-20%', '20-30%', '30-40%', '40-50%', '50-60%', '60-70%', '70-80%', '80-90%', '90-100%'],
|
|
datasets: [{
|
|
label: 'Nombre de commerces',
|
|
data: distribution,
|
|
backgroundColor: 'rgba(0, 128, 0, 0.1)',
|
|
borderColor: 'rgba(0, 128, 0, 1)',
|
|
borderWidth: 2,
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointBackgroundColor: 'rgba(0, 128, 0, 1)',
|
|
pointBorderColor: '#fff',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 4,
|
|
pointHoverRadius: 6
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: 'Nombre de commerces'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Taux de complétion'
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: 'Distribution du taux de complétion des commerces'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
async function fetchland() {
|
|
// Requête pour obtenir le contour administratif
|
|
const boundaryQuery = `[out:json][timeout:25];
|
|
area["ref:INSEE"="${zip_code}"]->.searchArea;
|
|
(
|
|
relation["boundary"="postal_code"]["ref:INSEE"="${zip_code}"](area.searchArea);
|
|
);
|
|
out body;
|
|
>;
|
|
out skel qt;`;
|
|
|
|
const encodedBoundaryRequest = encodeURIComponent(boundaryQuery);
|
|
const boundaryResponse = await fetch(`https://overpass-api.de/api/interpreter?data=${encodedBoundaryRequest}`);
|
|
const boundaryData = await boundaryResponse.json();
|
|
|
|
const encodedRequest = encodeURIComponent(request);
|
|
const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
|
|
const response = await fetch(overpassUrl);
|
|
const data = await response.json();
|
|
|
|
|
|
|
|
map.on('load', () => {
|
|
|
|
map_is_loaded=true;
|
|
console.log('map load...');
|
|
// Ajouter le contour administratif
|
|
if (boundaryData.elements && boundaryData.elements.length > 0) {
|
|
const boundary = boundaryData.elements[0];
|
|
if (boundary.members) {
|
|
const coordinates = boundary.members.map(member => {
|
|
if (member.type === 'node') {
|
|
return [member.lon, member.lat];
|
|
}
|
|
}).filter(coord => coord);
|
|
|
|
map.addSource('boundary', {
|
|
'type': 'geojson',
|
|
'data': {
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [coordinates]
|
|
}
|
|
}
|
|
});
|
|
|
|
map.addLayer({
|
|
'id': 'boundary-layer',
|
|
'type': 'fill',
|
|
'source': 'boundary',
|
|
'paint': {
|
|
'fill-color': '#088',
|
|
'fill-opacity': 0.1,
|
|
'fill-outline-color': '#000'
|
|
}
|
|
});
|
|
}
|
|
}else{
|
|
console.log('pas de contour administratif trouvé');
|
|
}
|
|
|
|
console.log('map chargé',data.elements);
|
|
mapElements = data.elements;
|
|
|
|
// Créer le graphique de distribution
|
|
createCompletionChart(data.elements);
|
|
|
|
document.getElementById('maploader').classList.add('d-none');
|
|
|
|
// Créer une source pour les cercles
|
|
map.addSource('completion-circles', {
|
|
'type': 'geojson',
|
|
'data': {
|
|
'type': 'FeatureCollection',
|
|
'features': []
|
|
}
|
|
});
|
|
|
|
// Ajouter une couche pour les cercles
|
|
map.addLayer({
|
|
'id': 'completion-circles',
|
|
'type': 'fill',
|
|
'source': 'completion-circles',
|
|
'paint': {
|
|
'fill-color': ['get', 'color'],
|
|
'fill-opacity': 0.6,
|
|
'fill-outline-color': '#fff'
|
|
}
|
|
});
|
|
|
|
// Ajouter une couche pour la bordure
|
|
map.addLayer({
|
|
'id': 'completion-circles-outline',
|
|
'type': 'line',
|
|
'source': 'completion-circles',
|
|
'paint': {
|
|
'line-color': 'rgba(100,100,100,0.5)',
|
|
'line-width': 2
|
|
}
|
|
});
|
|
|
|
const features = [];
|
|
data.elements.forEach(element => {
|
|
const lat = element.lat || (element.center && element.center.lat);
|
|
const lon = element.lon || (element.center && element.center.lon);
|
|
|
|
if (lat && lon) {
|
|
const completion = calculateCompletion(element);
|
|
const color = getCompletionColor(completion);
|
|
|
|
// Créer un cercle de 20 mètres de rayon (plus petit)
|
|
const circle = turf.circle([lon, lat], 0.04, { steps: 64, units: 'kilometers' });
|
|
circle.properties = {
|
|
color: color,
|
|
completion: completion,
|
|
name: element.tags?.name || 'Sans nom',
|
|
popupContent: createPopupContent(element),
|
|
center: [lon, lat] // Stocker le centre comme un tableau [lon, lat]
|
|
};
|
|
features.push(circle);
|
|
}
|
|
});
|
|
|
|
// Mettre à jour la source des cercles
|
|
map.getSource('completion-circles').setData({
|
|
'type': 'FeatureCollection',
|
|
'features': features
|
|
});
|
|
|
|
// Fonction pour recalculer les cercles en fonction du zoom
|
|
function updateCircles() {
|
|
const zoom = map.getZoom();
|
|
const newFeatures = [];
|
|
|
|
features.forEach(feature => {
|
|
// Ajuster la taille du cercle en fonction du zoom
|
|
// Plus le zoom est élevé, plus le cercle est petit
|
|
const radius = 0.02 / Math.pow(1.5, zoom - 12); // 12 est le niveau de zoom de référence
|
|
const newCircle = turf.circle(feature.properties.center, radius, { steps: 64, units: 'kilometers' });
|
|
newCircle.properties = feature.properties;
|
|
newFeatures.push(newCircle);
|
|
});
|
|
|
|
map.getSource('completion-circles').setData({
|
|
'type': 'FeatureCollection',
|
|
'features': newFeatures
|
|
});
|
|
}
|
|
|
|
// Mettre à jour les cercles lors du zoom
|
|
map.on('zoom', updateCircles);
|
|
|
|
// Ajouter les popups sur les cercles
|
|
map.on('click', 'completion-circles', (e) => {
|
|
const properties = e.features[0].properties;
|
|
|
|
new maplibregl.Popup()
|
|
.setLngLat(e.lngLat)
|
|
.setHTML(properties.popupContent)
|
|
.addTo(map);
|
|
});
|
|
|
|
// Changer le curseur au survol des cercles
|
|
map.on('mouseenter', 'completion-circles', () => {
|
|
map.getCanvas().style.cursor = 'pointer';
|
|
});
|
|
|
|
map.on('mouseleave', 'completion-circles', () => {
|
|
map.getCanvas().style.cursor = '';
|
|
});
|
|
});
|
|
|
|
// Calculer les limites (bounds) à partir des marqueurs
|
|
const bounds = new maplibregl.LngLatBounds();
|
|
data.elements.forEach(element => {
|
|
if (element.lat && element.lon) {
|
|
bounds.extend([element.lon, element.lat]);
|
|
}
|
|
});
|
|
|
|
// Centrer et zoomer la carte pour inclure tous les marqueurs
|
|
if (!bounds.isEmpty()) {
|
|
map.fitBounds(bounds, {
|
|
padding: 50 // Ajoute une marge autour des marqueurs
|
|
});
|
|
}
|
|
}
|
|
|
|
function openInJOSM() {
|
|
if (mapElements.length === 0) {
|
|
alert('Aucun élément à ouvrir dans JOSM');
|
|
return;
|
|
}
|
|
|
|
if (!map_is_loaded) {
|
|
alert('La carte n\'est pas encore chargée, veuillez patienter');
|
|
return;
|
|
}
|
|
|
|
const nodeIds = [];
|
|
const wayIds = [];
|
|
const relationIds = [];
|
|
|
|
mapElements.forEach(element => {
|
|
switch(element.type) {
|
|
case 'node':
|
|
nodeIds.push(element.id);
|
|
break;
|
|
case 'way':
|
|
wayIds.push(element.id);
|
|
break;
|
|
case 'relation':
|
|
relationIds.push(element.id);
|
|
break;
|
|
}
|
|
});
|
|
|
|
// Obtenir les coordonnées du viewport actuel
|
|
const center = map.getCenter();
|
|
const zoom = map.getZoom();
|
|
const width = map.getCanvas().width;
|
|
const height = map.getCanvas().height;
|
|
|
|
// Calculer les limites en utilisant les coordonnées du centre et le zoom
|
|
const west = center.lng - (360 / Math.pow(2, zoom + 1)) * (width / 256);
|
|
const east = center.lng + (360 / Math.pow(2, zoom + 1)) * (width / 256);
|
|
const north = center.lat + (180 / Math.pow(2, zoom + 1)) * (height / 256);
|
|
const south = center.lat - (180 / Math.pow(2, zoom + 1)) * (height / 256);
|
|
|
|
let josmUrl = 'http://localhost:8111/load_and_zoom?';
|
|
const params = [];
|
|
|
|
if (nodeIds.length > 0) {
|
|
params.push(`node${nodeIds.join(',')}`);
|
|
}
|
|
if (wayIds.length > 0) {
|
|
params.push(`way${wayIds.join(',')}`);
|
|
}
|
|
if (relationIds.length > 0) {
|
|
params.push(`relation${relationIds.join(',')}`);
|
|
}
|
|
|
|
// Ajouter la bounding box calculée
|
|
params.push(`left=${west}&right=${east}&top=${north}&bottom=${south}`);
|
|
|
|
josmUrl += params.join('&');
|
|
window.open(josmUrl);
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOMContentLoaded');
|
|
const headers = document.querySelectorAll('th');
|
|
headers.forEach(header => {
|
|
const text = header.textContent;
|
|
const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
|
|
if (match) {
|
|
const [_, completed, total] = match;
|
|
const ratio = completed / total;
|
|
const alpha = ratio.toFixed(2);
|
|
header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
|
|
}
|
|
});
|
|
|
|
document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
|
|
|
|
fetchland();
|
|
|
|
sortTable();
|
|
});
|
|
</script>
|
|
{% endblock %} |