mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
add josm links, turf circles of completion
This commit is contained in:
Tykayn
tykayn
parent
c4cc4a4050
commit
573d4eeb29
8 changed files with 368 additions and 75 deletions
|
|
@ -6,6 +6,13 @@
|
|||
{% 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;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
|
@ -18,6 +25,9 @@
|
|||
</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">
|
||||
|
|
@ -85,9 +95,67 @@
|
|||
</div>
|
||||
|
||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
||||
<script src='{{ asset('js/turf/turf.min.js') }}'></script>
|
||||
<script>
|
||||
const request = `{{query_places|raw}}`;
|
||||
const zip_code = `{{stats.zone}}`;
|
||||
let mapElements = [];
|
||||
|
||||
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}
|
||||
`;
|
||||
}
|
||||
|
||||
async function fetchland() {
|
||||
// Requête pour obtenir le contour administratif
|
||||
|
|
@ -155,45 +223,111 @@ out skel qt;`;
|
|||
}
|
||||
|
||||
console.log('map chargé',data.elements);
|
||||
mapElements = 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': '#0f0',
|
||||
'line-width': 3
|
||||
}
|
||||
});
|
||||
|
||||
const features = [];
|
||||
data.elements.forEach(element => {
|
||||
// Cherche les coordonnées à la racine ou dans center
|
||||
const lat = element.lat || (element.center && element.center.lat);
|
||||
const lon = element.lon || (element.center && element.center.lon);
|
||||
|
||||
if (lat && lon && element.tags && element.tags['name']) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'marker';
|
||||
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>';
|
||||
|
||||
// Créer un élément div pour le texte du nom
|
||||
const nameDiv = document.createElement('div');
|
||||
nameDiv.className = 'marker-name';
|
||||
nameDiv.textContent = element.tags?.name || '(Sans nom)';
|
||||
el.appendChild(nameDiv);
|
||||
|
||||
|
||||
new maplibregl.Marker(el)
|
||||
.setLngLat([lon, lat])
|
||||
.setPopup(new maplibregl.Popup({
|
||||
offset: 25,
|
||||
anchor: 'bottom'
|
||||
})
|
||||
.setHTML(
|
||||
`<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}`
|
||||
)
|
||||
)
|
||||
.addTo(map);
|
||||
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
|
||||
|
|
@ -212,6 +346,47 @@ out skel qt;`;
|
|||
}
|
||||
}
|
||||
|
||||
function openInJOSM() {
|
||||
if (mapElements.length === 0) {
|
||||
alert('Aucun élément à ouvrir dans JOSM');
|
||||
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;
|
||||
}
|
||||
});
|
||||
|
||||
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(',')}`);
|
||||
}
|
||||
|
||||
josmUrl += params.join('&');
|
||||
window.open(josmUrl, '_blank');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('DOMContentLoaded');
|
||||
const headers = document.querySelectorAll('th');
|
||||
|
|
@ -226,6 +401,8 @@ out skel qt;`;
|
|||
}
|
||||
});
|
||||
|
||||
document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
|
||||
|
||||
fetchland();
|
||||
|
||||
sortTable();
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
{% endif %}
|
||||
</a>
|
||||
</td>
|
||||
<td class="text-right" style="background : rgba(0,255,0,{{ commerce.getCompletionPercentage() / 100 }})">
|
||||
{{ commerce.getCompletionPercentage() }}
|
||||
</td>
|
||||
<td class="{{ commerce.mainTag ? 'filled' : '' }}">
|
||||
|
||||
{% if commerce.mainTag == 'amenity=restaurant' or commerce.mainTag == 'amenity=bar' or commerce.mainTag == 'amenity=cafe' %}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
<tr>
|
||||
<th>Nom ({{ stats.places|length }})</th>
|
||||
<th>
|
||||
<i class="bi bi-circle-fill"></i>
|
||||
Completion %
|
||||
</th>
|
||||
<th>
|
||||
<i class="bi bi-tags"></i>
|
||||
Type
|
||||
</th>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue