mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-04 17:04:53 +02:00
graphs avancés up cartes
This commit is contained in:
Tykayn
tykayn
parent
c8e3cf2ada
commit
d76c06402d
2 changed files with 70 additions and 104 deletions
|
|
@ -177,13 +177,15 @@
|
|||
<div class="alert alert-info mb-3">Aucun objet sélectionné pour ce thème, rien à charger dans JOSM.</div>
|
||||
{% endif %}
|
||||
<div id="themeMap"></div>
|
||||
|
||||
{% if geojson is defined %}
|
||||
{# On n'utilise plus geojson côté PHP, la carte sera alimentée dynamiquement via Overpass en JS #}
|
||||
{% endif %}
|
||||
{% 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>
|
||||
<div class="mb-3">
|
||||
<a href="https://overpass-turbo.eu/?Q={{ overpass_query|url_encode }}" target="_blank" class="btn btn-outline-primary mt-2">
|
||||
<i class="bi bi-geo"></i> Vérifier sur Overpass Turbo
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="stats-grid">
|
||||
|
|
@ -258,106 +260,70 @@
|
|||
{{ parent() }}
|
||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
||||
<script>
|
||||
const geojson = {{ geojson|raw }};
|
||||
const overpassQuery = `{% if overpass_query is defined %}{{ overpass_query|e('js') }}{% endif %}`;
|
||||
const mapToken = '{{ maptiler_token }}';
|
||||
const mapCenter = {{ center|json_encode|raw }};
|
||||
let mapInstance = null;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('[DEBUG] mapToken:', mapToken);
|
||||
console.log('[DEBUG] geojson:', geojson);
|
||||
console.log('[DEBUG] geojson.features:', geojson ? geojson.features : undefined);
|
||||
console.log('[DEBUG] mapCenter:', mapCenter);
|
||||
if (mapToken && geojson && geojson.features && geojson.features.length > 0) {
|
||||
console.log('[DEBUG] Initialisation de la carte Maplibre...');
|
||||
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
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
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><br>
|
||||
${f.properties.uuid ? `<a href='/edit/${f.properties.zip_code}/${encodeURIComponent(f.properties.name)}/${f.properties.uuid}' target='_blank'>📝 Modifier ce lieu</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) {
|
||||
console.warn('[DEBUG] mapToken manquant ou vide');
|
||||
}
|
||||
if (!geojson) {
|
||||
console.warn('[DEBUG] geojson manquant ou vide');
|
||||
}
|
||||
if (!geojson || !geojson.features || geojson.features.length === 0) {
|
||||
console.warn('[DEBUG] geojson.features vide ou non défini');
|
||||
}
|
||||
// Affichage d'un message dans la page
|
||||
const mapDiv = document.getElementById('themeMap');
|
||||
if (mapDiv) {
|
||||
mapDiv.innerHTML = '<div style="color:red;font-weight:bold;padding:2em;text-align:center;">Carte non initialisée : données manquantes ou incomplètes (voir console pour debug)</div>';
|
||||
}
|
||||
if (!overpassQuery) {
|
||||
document.getElementById('themeMap').innerHTML = '<div class="alert alert-warning">Aucune requête Overpass disponible pour ce thème.</div>';
|
||||
return;
|
||||
}
|
||||
// Initialiser la carte
|
||||
mapInstance = new maplibregl.Map({
|
||||
container: 'themeMap',
|
||||
style: 'https://api.maptiler.com/maps/streets/style.json?key=' + mapToken,
|
||||
center: [2, 48],
|
||||
zoom: 13
|
||||
});
|
||||
mapInstance.addControl(new maplibregl.NavigationControl());
|
||||
// Requête Overpass
|
||||
fetch('https://overpass-api.de/api/interpreter', {
|
||||
method: 'POST',
|
||||
body: overpassQuery,
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (!data.elements || data.elements.length === 0) {
|
||||
document.getElementById('themeMap').innerHTML = '<div class="alert alert-warning">Aucun objet trouvé via Overpass pour ce thème.</div>';
|
||||
return;
|
||||
}
|
||||
// Centrage carte
|
||||
let lats = [], lons = [];
|
||||
data.elements.forEach(e => {
|
||||
if (e.lat && e.lon) {
|
||||
lats.push(e.lat); lons.push(e.lon);
|
||||
} else if (e.type === 'way' && e.center) {
|
||||
lats.push(e.center.lat); lons.push(e.center.lon);
|
||||
}
|
||||
});
|
||||
if (lats.length && lons.length) {
|
||||
const avgLat = lats.reduce((a,b)=>a+b,0)/lats.length;
|
||||
const avgLon = lons.reduce((a,b)=>a+b,0)/lons.length;
|
||||
mapInstance.setCenter([avgLon, avgLat]);
|
||||
}
|
||||
// Marqueurs
|
||||
data.elements.forEach(e => {
|
||||
let lat = e.lat, lon = e.lon;
|
||||
if (!lat && !lon && e.type === 'way' && e.center) {
|
||||
lat = e.center.lat; lon = e.center.lon;
|
||||
}
|
||||
if (!lat || !lon) return;
|
||||
const popupHtml = `<div style='min-width:180px'>
|
||||
<strong>${e.tags && e.tags.name ? e.tags.name : '(sans nom)'}</strong><br>
|
||||
<span class='text-muted'>${e.type} ${e.id}</span><br>
|
||||
<span style='font-size:0.95em;'>${e.tags ? Object.entries(e.tags).map(([k,v]) => `<span><b>${k}</b>: ${v}</span>`).join('<br>') : ''}</span><br>
|
||||
<a href='https://www.openstreetmap.org/${e.type}/${e.id}' target='_blank'>Voir sur OSM</a>
|
||||
</div>`;
|
||||
new maplibregl.Marker({ color: '#198754' })
|
||||
.setLngLat([lon, lat])
|
||||
.setPopup(new maplibregl.Popup({ offset: 18 }).setHTML(popupHtml))
|
||||
.addTo(mapInstance);
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
document.getElementById('themeMap').innerHTML = '<div class="alert alert-danger">Erreur lors de la requête Overpass : ' + err + '</div>';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div class="col-md-6 col-12">
|
||||
<h3>Carte des lieux</h3>
|
||||
<div id="streetMap" style="height: 300px; width: 100%; border-radius: 8px;"></div>
|
||||
<span class="is-info"> Si il manque des lieux dans cette rue c'est parce que les objets n'ont pas d'attribut "addr:street" et "addr:housenumber"</span>
|
||||
<span class="is-info"> Si il manque des lieux dans cette rue c'est parce que les objets n'ont pas d'attribut "contact:street" et "contact:housenumber". Les addresses des commerces et autres lieux doivent toujours être sur des noeuds distincts dans OpenStreetMap.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue