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
|
|
@ -4,26 +4,31 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css' rel='stylesheet' />
|
||||
<link href='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.css' rel='stylesheet' />
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#mapDashboard {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
|
||||
<script src='https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js'></script>
|
||||
<script src='https://cdn.jsdelivr.net/npm/maplibre-gl@3.6.2/dist/maplibre-gl.js'></script>
|
||||
<script>
|
||||
// Définir la fonction labourer dans le scope global
|
||||
function labourer() {
|
||||
window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
|
||||
}
|
||||
|
||||
mapboxgl.accessToken = '{{ mapbox_token }}';
|
||||
// Créer une carte des villes avec les codes postaux
|
||||
let map = new mapboxgl.Map({
|
||||
let map = new maplibregl.Map({
|
||||
container: 'mapDashboard',
|
||||
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
|
||||
center: [2.3488, 48.8534], // Paris
|
||||
|
|
@ -35,13 +40,18 @@
|
|||
async function getAllPostalCodesCoordinates() {
|
||||
const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
|
||||
|
||||
let postalLines = ``;
|
||||
postalCodes.forEach(code => {
|
||||
if (/^\d+$/.test(code)) {
|
||||
postalLines += `nwr["boundary"="postal_code"][postal_code=${code}]["name"~"."];`;
|
||||
}
|
||||
});
|
||||
const query = `[out:json];
|
||||
|
||||
(
|
||||
${postalCodes.map(code => `
|
||||
nwr["boundary"="postal_code"][postal_code=${code}];
|
||||
${postalLines}
|
||||
);
|
||||
out center;`;
|
||||
out center;` ;
|
||||
console.log(query);
|
||||
const response = await fetch('https://overpass-api.de/api/interpreter', {
|
||||
method: 'POST',
|
||||
|
|
@ -52,7 +62,8 @@
|
|||
return data.elements.reduce((acc, element) => {
|
||||
// On associe chaque code postal à ses coordonnées
|
||||
const postalCode = element.tags.postal_code;
|
||||
if (postalCode) {
|
||||
// Vérifier que le lieu a un nom non vide
|
||||
if (postalCode && element.tags.name && element.tags.name.trim() !== '') {
|
||||
acc[postalCode] = [element.lon, element.lat];
|
||||
}
|
||||
return acc;
|
||||
|
|
@ -68,8 +79,10 @@
|
|||
|
||||
// On récupère toutes les coordonnées en une seule fois
|
||||
getAllPostalCodesCoordinates().then(coordinatesMap => {
|
||||
const bounds = new maplibregl.LngLatBounds();
|
||||
|
||||
{% for stat in stats %}
|
||||
{% if not "-" in stat.zone %}
|
||||
|
||||
const coordinatesMapped{{ stat.zone }} = coordinatesMap['{{ stat.zone }}'];
|
||||
if (coordinatesMapped{{ stat.zone }}) {
|
||||
const el = document.createElement('div');
|
||||
|
|
@ -78,18 +91,61 @@
|
|||
el.style.borderRadius = '50%';
|
||||
el.style.backgroundColor = getColorFromPercent({{ stat.completionPercent }});
|
||||
|
||||
new mapboxgl.Marker(el)
|
||||
// Créer un élément pour le marqueur du code postal
|
||||
const postalEl = document.createElement('div');
|
||||
postalEl.style.width = '15px';
|
||||
postalEl.style.height = '15px';
|
||||
postalEl.style.borderRadius = '50%';
|
||||
postalEl.style.backgroundColor = '#0000ff';
|
||||
postalEl.style.border = '2px solid white';
|
||||
postalEl.style.boxShadow = '0 0 4px rgba(0,0,0,0.5)';
|
||||
|
||||
// Ajouter le marqueur principal
|
||||
new maplibregl.Marker(el)
|
||||
.setLngLat(coordinatesMapped{{ stat.zone }})
|
||||
.setPopup(new mapboxgl.Popup().setHTML(`
|
||||
.setPopup(new maplibregl.Popup().setHTML(`
|
||||
<h3>{{ stat.zone }}</h3>
|
||||
<p>Nombre de commerces: {{ stat.placesCount }}</p>
|
||||
<p>Complétude: {{ stat.completionPercent }}%</p>
|
||||
`))
|
||||
.addTo(map);
|
||||
|
||||
// Ajouter le marqueur du code postal légèrement décalé
|
||||
const [lon, lat] = coordinatesMapped{{ stat.zone }};
|
||||
new maplibregl.Marker(postalEl)
|
||||
.setLngLat([lon + 0.001, lat + 0.001]) // Décalage de 0.001 degré
|
||||
.setPopup(new maplibregl.Popup().setHTML(`
|
||||
<h4>Code Postal: {{ stat.zone }}</h4>
|
||||
<p>Zone: {{ stat.zone }}</p>
|
||||
`))
|
||||
.addTo(map);
|
||||
|
||||
bounds.extend(coordinatesMapped{{ stat.zone }});
|
||||
}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
// Ajuster la vue pour montrer tous les marqueurs
|
||||
if (!bounds.isEmpty()) {
|
||||
map.fitBounds(bounds, {
|
||||
padding: 50
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Attendre le chargement du DOM
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Récupérer le bouton labourer
|
||||
const btnLabourer = document.querySelector('#labourer');
|
||||
if (btnLabourer) {
|
||||
// Ajouter l'écouteur d'événement click
|
||||
btnLabourer.addEventListener('click', function() {
|
||||
// Récupérer la valeur du code postal
|
||||
const codePostal = document.querySelector('#app_admin_labourer').value;
|
||||
// Rediriger vers la route de labourage avec le code postal
|
||||
window.location.href = `/admin/labourer/${codePostal}`;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -100,11 +156,11 @@
|
|||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h2>Statistiques : {{ stats|length }} commerces</h2>
|
||||
mapDashboard:
|
||||
<h2>Statistiques : {{ stats|length }} codes postaux</h2>
|
||||
|
||||
<div id="mapDashboard"></div>
|
||||
<input class="form-control" type="text" id="app_admin_labourer" value="75013">
|
||||
<button class="btn btn-default" onclick="labourer() ">Labourer</button>
|
||||
<button class="btn btn-default" id="labourer" >Labourer</button>
|
||||
|
||||
|
||||
<table class="table table-hover table-striped table-responsive">
|
||||
|
|
@ -140,6 +196,7 @@ mapDashboard:
|
|||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Tag</th>
|
||||
<th>Email</th>
|
||||
<th>Date de modification</th>
|
||||
<th>Date de dernier contact</th>
|
||||
|
|
@ -154,11 +211,13 @@ mapDashboard:
|
|||
<tbody>
|
||||
{% for place in places %}
|
||||
<tr>
|
||||
|
||||
<td>{% if place.name %}
|
||||
<a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': place.name|url_encode, 'uuid': place.uuidForUrl}) }}">{{ place.name }}</a>
|
||||
{% else %}
|
||||
<a href="{{ path('app_public_edit', {'zipcode': place.zipCode, 'name': '?', 'uuid': place.uuidForUrl}) }}"><i class="bi bi-question-circle"></i></a>
|
||||
{% endif %} </td>
|
||||
<td>{{ place.mainTag }}</td>
|
||||
<td>{{ place.email }}</td>
|
||||
<td>{{ place.modifiedDate | date('Y-m-d H:i:s') }}</td>
|
||||
<td>{{ place.lastContactAttemptDate | date('Y-m-d H:i:s') }}</td>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue