mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
ajout de maplibre sur les stats
This commit is contained in:
Tykayn
tykayn
parent
7edab7891e
commit
cf292c6266
7 changed files with 216 additions and 97 deletions
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
{% block title %}{{ 'display.stats'|trans }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<div class="mt-4 p-4">
|
||||
|
|
@ -24,9 +29,9 @@
|
|||
<i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
|
||||
<br>
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div id="map" style="height: 400px;"></div>
|
||||
<div class="card mt-4">
|
||||
<h1 class="card-title">Tableau des commerces</h1>
|
||||
<h1 class="card-title">Tableau des lieux</h1>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -41,107 +46,106 @@
|
|||
{% for commerce in stats.places %}
|
||||
<tr>
|
||||
<td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">
|
||||
<a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">
|
||||
{% if not commerce.name |length %}
|
||||
<span class="no-name">
|
||||
(lieu sans nom)
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if commerce.name |length > 50 %} {{ commerce.name |slice(0, 50) }}... {% else %} {{ commerce.name }} {% endif %}</a>
|
||||
|
||||
<a href="{{ path('app_admin_commerce', {'id': commerce.id}) }}">{{ commerce.name }}</a>
|
||||
</td>
|
||||
<td style="background-color: {{ commerce.hasAddress() ? 'yellowgreen' : 'transparent' }};">{{ commerce.address }}</td>
|
||||
<td style="background-color: {{ commerce.hasWebsite() ? 'yellowgreen' : 'transparent' }};">{{ commerce.website }}</td>
|
||||
<td style="background-color: {{ commerce.hasWheelchair() ? 'yellowgreen' : 'transparent' }};">{{ commerce.wheelchair }}</td>
|
||||
<td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>
|
||||
<td style="background-color: {{ commerce.hasNote() ? 'yellowgreen' : 'transparent' }};">{{ commerce.note }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
|
||||
<script>
|
||||
|
||||
console.log('go faire une carte ');
|
||||
|
||||
const request = `[out:json][timeout:25];
|
||||
<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
|
||||
<script>
|
||||
const request = `[out:json][timeout:25];
|
||||
area["postal_code"="{{ zip_code }}"]->.searchArea;
|
||||
(
|
||||
nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"](area.searchArea);
|
||||
nw["shop"](area.searchArea);
|
||||
nw["tourism"="museum|hotel|chalet|apartment"](area.searchArea);
|
||||
nw["office"](area.searchArea);
|
||||
nw["amenity"]["cafe|bar|restaurant|library|cinema|fast_food"]["name"~"."](area.searchArea);
|
||||
nw["shop"]["name"~"."](area.searchArea);
|
||||
nw["tourism"="museum|hotel|chalet|apartment"]["name"~"."](area.searchArea);
|
||||
nw["office"]["name"~"."](area.searchArea);
|
||||
);
|
||||
out center;
|
||||
>;
|
||||
out skel qt;
|
||||
`;
|
||||
|
||||
async function fetchland() {
|
||||
const encodedRequest = encodeURIComponent(request);
|
||||
const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
|
||||
const response = await fetch(overpassUrl);
|
||||
const data = await response.json();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
async function fetchland() {
|
||||
const map = new maplibregl.Map({
|
||||
container: 'map',
|
||||
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
||||
center: [2.3488, 48.8534],
|
||||
zoom: 12
|
||||
});
|
||||
|
||||
// Construire la requête Overpass
|
||||
|
||||
const encodedRequest = encodeURIComponent(request);
|
||||
console.log('encodedRequest', encodedRequest);
|
||||
const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
|
||||
const response = await fetch(overpassUrl);
|
||||
const data = await response.json();
|
||||
console.log('data', data);
|
||||
mapboxgl.accessToken = '{{ mapbox_token }}';
|
||||
const map = new mapboxgl.Map({
|
||||
container: 'map',
|
||||
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
||||
|
||||
zoom: 17
|
||||
});
|
||||
|
||||
// Ajouter les marqueurs pour chaque point
|
||||
|
||||
if (data.elements && data.elements.length > 0) {
|
||||
const firstPoint = data.elements[0];
|
||||
if (firstPoint.lat && firstPoint.lon) {
|
||||
// Centrer la carte sur le premier point
|
||||
map.setCenter([firstPoint.lon, firstPoint.lat]);
|
||||
|
||||
// Ajouter un marqueur pour le premier point
|
||||
new mapboxgl.Marker()
|
||||
.setLngLat([firstPoint.lon, firstPoint.lat])
|
||||
.setPopup(new mapboxgl.Popup({ offset: 25 })
|
||||
.setHTML(`<h3>${firstPoint.tags?.name || 'Sans nom'}</h3>`))
|
||||
.addTo(map);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function colorizeHeaders() {
|
||||
const headers = document.querySelectorAll('th');
|
||||
if(headers.length > 0) {
|
||||
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})`;
|
||||
map.on('load', () => {
|
||||
console.log(data.elements);
|
||||
data.elements.forEach(element => {
|
||||
if (element.lat && element.lon) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'marker';
|
||||
el.style.width = '20px';
|
||||
el.style.height = '20px';
|
||||
el.style.borderRadius = '50%';
|
||||
el.style.backgroundColor = '#ff0000';
|
||||
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>';
|
||||
|
||||
new maplibregl.Marker(el)
|
||||
.setLngLat([element.lon, element.lat])
|
||||
.setPopup(new maplibregl.Popup({ offset: 25 })
|
||||
.setHTML(`<a href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank"><h3>${element.tags?.name || 'Sans nom'}</h3></a> <br> ${tagstable}`))
|
||||
.addTo(map);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
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})`;
|
||||
}
|
||||
});
|
||||
|
||||
console.log(request);
|
||||
colorizeHeaders();
|
||||
fetchland();
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
sortTable();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue