map on home
This commit is contained in:
Tykayn
tykayn
parent
a5cd69961f
commit
56f62c45bb
14 changed files with 588 additions and 15 deletions
|
|
@ -4,8 +4,46 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
|
||||
|
||||
<style>
|
||||
#citiesMap {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-legend {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: white;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
font-size: 12px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.city-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
|
|
@ -93,6 +131,38 @@
|
|||
vous aider.
|
||||
</p>
|
||||
|
||||
{% if citiesForMap is not empty %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3><i class="bi bi-geo-alt"></i> Carte des villes disponibles</h3>
|
||||
<p class="mb-0">Cliquez sur un marqueur pour voir les statistiques de la ville</p>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="map-container">
|
||||
<div id="citiesMap"></div>
|
||||
<div class="map-legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #28a745;"></div>
|
||||
<span>Complétion > 80%</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #17a2b8;"></div>
|
||||
<span>Complétion 50-80%</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background-color: #ffc107;"></div>
|
||||
<span>Complétion < 50%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<label class="label" for="researchShop">
|
||||
|
|
@ -148,6 +218,7 @@
|
|||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
||||
{# <script src='{{ asset('js/utils.js') }}'></script> #}
|
||||
<script type="module">
|
||||
// import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
|
||||
|
|
@ -157,6 +228,96 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
// Données des villes pour la carte
|
||||
const citiesData = {{ citiesForMap|json_encode|raw }};
|
||||
const mapToken = '{{ maptiler_token }}';
|
||||
|
||||
// Initialiser la carte si des données sont disponibles
|
||||
if (citiesData.length > 0 && mapToken) {
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Créer les features GeoJSON pour la carte
|
||||
const features = citiesData.map(city => ({
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [city.coordinates.lon, city.coordinates.lat]
|
||||
},
|
||||
properties: {
|
||||
name: city.name,
|
||||
zone: city.zone,
|
||||
placesCount: city.placesCount,
|
||||
completionPercent: city.completionPercent,
|
||||
population: city.population,
|
||||
url: city.url
|
||||
}
|
||||
}));
|
||||
|
||||
const geojson = {
|
||||
type: 'FeatureCollection',
|
||||
features: features
|
||||
};
|
||||
|
||||
// Calculer le centre de la carte (moyenne des coordonnées)
|
||||
const bounds = new maplibregl.LngLatBounds();
|
||||
features.forEach(feature => {
|
||||
bounds.extend(feature.geometry.coordinates);
|
||||
});
|
||||
|
||||
// Initialiser la carte
|
||||
const map = new maplibregl.Map({
|
||||
container: 'citiesMap',
|
||||
style: `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`,
|
||||
bounds: bounds,
|
||||
fitBoundsOptions: {
|
||||
padding: 50
|
||||
}
|
||||
});
|
||||
|
||||
// Ajouter les marqueurs
|
||||
features.forEach(feature => {
|
||||
const properties = feature.properties;
|
||||
|
||||
// Déterminer la couleur selon le pourcentage de complétion
|
||||
let color = '#ffc107'; // Jaune par défaut
|
||||
if (properties.completionPercent > 80) {
|
||||
color = '#28a745'; // Vert
|
||||
} else if (properties.completionPercent > 50) {
|
||||
color = '#17a2b8'; // Bleu
|
||||
}
|
||||
|
||||
// Créer le marqueur
|
||||
const marker = new maplibregl.Marker({
|
||||
color: color,
|
||||
scale: 0.8
|
||||
})
|
||||
.setLngLat(feature.geometry.coordinates)
|
||||
.setPopup(
|
||||
new maplibregl.Popup({ offset: 25 })
|
||||
.setHTML(`
|
||||
<div style="min-width: 200px;">
|
||||
<h6 style="margin: 0 0 10px 0; color: #333;">${properties.name}</h6>
|
||||
<div style="font-size: 12px; color: #666;">
|
||||
<div><strong>Code INSEE:</strong> ${properties.zone}</div>
|
||||
<div><strong>Lieux:</strong> ${properties.placesCount}</div>
|
||||
<div><strong>Complétion:</strong> ${properties.completionPercent}%</div>
|
||||
${properties.population ? `<div><strong>Population:</strong> ${properties.population.toLocaleString()}</div>` : ''}
|
||||
</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<a href="${properties.url}" class="btn btn-sm btn-primary" style="text-decoration: none;">
|
||||
Voir les statistiques
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`)
|
||||
)
|
||||
.addTo(map);
|
||||
});
|
||||
|
||||
// Ajouter les contrôles de navigation
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
});
|
||||
}
|
||||
|
||||
// Créer le formulaire email
|
||||
const emailFormHtml = `
|
||||
<form id="emailForm" class="mt-3">
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
<li><a class="dropdown-item" href="{{ path('app_public_latest_changes') }}"><i class="bi bi-clock-fill"></i> {{ 'display.latest_changes'|trans }}</a></li>
|
||||
<li><a class="dropdown-item" href="{{ path('admin_fraicheur_histogramme') }}"><i class="bi bi-clock-history"></i> Fraîcheur de la donnée</a></li>
|
||||
<li><a class="dropdown-item" href="/api/v1/stats/export?pretty=1"><i class="bi bi-download"></i> Export JSON des villes</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/export_csv"><i class="bi bi-filetype-csv"></i> Exporter les villes (CSV)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue