ajout des suggestions osmose

This commit is contained in:
Tykayn 2025-04-18 16:50:26 +02:00 committed by tykayn
parent 522f48f887
commit e0a042c28b
8 changed files with 429 additions and 769 deletions

View file

@ -7,7 +7,7 @@
import lcm_config from './lcm_config.js'
import lcm_utils from './lcm_utils.js'
import lcm_color_utils from './lcm_color_utils.js'
import {sendToJOSM, createJOSMEditLink} from './lcm_editor.js'
import { sendToJOSM, createJOSMEditLink } from './lcm_editor.js'
let geojsondata;
let lastLatLng;
@ -115,7 +115,7 @@ let overlays = {
stations: all_stations_markers
}
const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map)
tileGrey.addTo(map)
@ -286,17 +286,35 @@ function displayStatsFromGeoJson(resultAsGeojson) {
$('#bars_power').html(bar_powers);
}
function bindEventsOnJosmRemote() {
let josm_remote_buttons = $(`#sendToJOSM`)
$(josm_remote_buttons[0]).on('click', () => {
let josm_link = $(josm_remote_buttons[0]).attr('data-href')
$.get(josm_link, (res) => {
console.log('res', res)
})
})
// Modifier bindEventsOnJosmRemote pour cibler les boutons dans un contexte (la popup)
function bindEventsOnJosmRemote(popupElement) {
// Cible tous les liens JOSM à l'intérieur de l'élément popup fourni
$(popupElement).find('.edit-button.josm').each(function () {
// Utiliser .off().on() pour éviter les liaisons multiples si la popup est rouverte
$(this).off('click').on('click', (event) => {
event.preventDefault(); // Empêcher le comportement par défaut du lien
let josm_link = $(this).attr('data-href');
console.log('Sending command to JOSM:', josm_link);
// Utiliser fetch pour la requête GET vers JOSM (plus moderne que $.get)
fetch(josm_link)
.then(response => {
if (!response.ok) {
// Gérer les erreurs de communication avec JOSM
console.error('JOSM remote control error:', response.status, response.statusText);
alert('Erreur de communication avec JOSM. Assurez-vous que JOSM est lancé et que le contrôle à distance est activé.');
} else {
console.log('JOSM command sent successfully.');
// Optionnel: Afficher une notification de succès
}
})
.catch(error => {
console.error('Failed to send command to JOSM:', error);
alert('Impossible d\'envoyer la commande à JOSM. Est-il lancé et le contrôle à distance activé ?');
});
});
});
}
function displayPointsFromApi(points, convert_to_osm_json) {
if (points && convert_to_osm_json) {
geojsondata = osmtogeojson(points);
@ -306,7 +324,7 @@ function displayPointsFromApi(points, convert_to_osm_json) {
let resultLayer = L.geoJson(geojsondata, {
style: function (feature) {
return {color: '#f00'};
return { color: '#f00' };
},
filter: function (feature, layer) {
let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon');
@ -475,8 +493,7 @@ function eachFeature(feature, layer) {
circle_alert.on({
mouseover: function () {
this.openPopup();
bindEventsOnJosmRemote();
updateExternalEditorsLinks();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
mouseout: function () {
@ -484,8 +501,7 @@ function eachFeature(feature, layer) {
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote();
updateExternalEditorsLinks();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
@ -519,7 +535,7 @@ function eachFeature(feature, layer) {
circle.on({
mouseover: function () {
this.openPopup();
bindEventsOnJosmRemote();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
mouseout: function () {
@ -527,7 +543,7 @@ function eachFeature(feature, layer) {
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
});
@ -543,12 +559,12 @@ function bindFullDetails(feature) {
let content = '<table>' +
'<tbody>' + ''
let ii=0
let ii = 0
let keys = Object.keys(feature.properties.tags)
keys.forEach( (elem, val) => {
console.log('elem, val', elem, val)
content += '<tr><td>'+elem+'</td><td>'+feature.properties.tags[elem]+'</td></tr>';
ii++;
keys.forEach((elem, val) => {
console.log('elem, val', elem, val)
content += '<tr><td>' + elem + '</td><td>' + feature.properties.tags[elem] + '</td></tr>';
ii++;
})
content += '</tbody>' +
'</table>'
@ -660,6 +676,16 @@ function onMapMoveEnd() {
}
}
// Ajout d'un log pour déboguer
console.log("Zoom actuel:", map.getZoom());
if (map.getZoom() > 12) {
console.log("Recherche des issues Osmose...");
searchOsmoseIssues(map);
} else {
console.log("Zoom trop faible pour les issues Osmose");
osmose_markers.clearLayers();
}
}
setCoordinatesOfLeafletMapFromQueryParameters()
@ -784,12 +810,10 @@ function searchFoodPlaces(map) {
const query = `
[out:json][timeout:25];
(
node["amenity"="restaurant"](${bbox});
node["amenity"="cafe"](${bbox});
nwr["amenity"="restaurant"](${bbox});
nwr["amenity"="cafe"](${bbox});
);
out body;
>;
out skel qt;`;
out center;`;
const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`;
@ -798,21 +822,21 @@ function searchFoodPlaces(map) {
fetch(url)
.then(response => response.json())
.then(data => {
const geojson = osmtogeojson(data);
geojson.features.forEach(feature => {
const coords = feature.geometry.coordinates;
const properties = feature.properties;
const name = properties.tags.name || 'Sans nom';
const type = properties.tags.amenity;
data.elements.forEach(element => {
// Utiliser les coordonnées du centre pour les ways et relations
const lat = element.lat || element.center.lat;
const lon = element.lon || element.center.lon;
const name = element.tags.name || 'Sans nom';
const type = element.tags.amenity;
const marker = L.marker([coords[1], coords[0]], {
const marker = L.marker([lat, lon], {
icon: foodIcon
});
marker.bindPopup(`
<strong>${name}</strong><br>
Type: ${type}<br>
${properties.tags.cuisine ? 'Cuisine: ' + properties.tags.cuisine : ''}
${element.tags.cuisine ? 'Cuisine: ' + element.tags.cuisine : ''}
`);
food_places_markers.addLayer(marker);
@ -821,16 +845,150 @@ function searchFoodPlaces(map) {
.catch(error => console.error('Erreur lors de la recherche des restaurants:', error));
}
// Modifier la fonction init pour ajouter le contrôle des couches
// Ajouter après la déclaration des autres variables globales
let osmose_markers = L.layerGroup();
const osmoseIcon = L.divIcon({
className: 'osmose-marker-drop',
html: '<div class="osmose-marker-inner">⚡</div>',
iconSize: [30, 40],
iconAnchor: [15, 40]
});
// Ajouter cette nouvelle fonction
function searchOsmoseIssues(map) {
const bounds = map.getBounds();
const zoom = map.getZoom();
// Construction de la bbox avec l'ordre correct : ouest,sud,est,nord
const bbox = `${bounds.getWest()}%2C${bounds.getSouth()}%2C${bounds.getEast()}%2C${bounds.getNorth()}`;
// URL formatée selon l'exemple fourni
const url = `https://osmose.openstreetmap.fr/api/0.3/issues?zoom=${zoom}&item=8410%2C8411&level=1%2C2%2C3&limit=500&bbox=${bbox}`;
console.log("Recherche des issues Osmose (liste) avec l'URL :", url);
osmose_markers.clearLayers();
fetch(url)
.then(response => {
if (!response.ok) {
return response.text().then(text => { throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}. Réponse : ${text}`); });
}
return response.json();
})
.then(data => {
if (!data || !Array.isArray(data.issues)) {
console.warn("Réponse Osmose (liste) inattendue ou pas d'issues:", data);
return;
}
const issuesList = data.issues;
console.log(`Nombre d'issues Osmose (liste) trouvées: ${issuesList.length}`);
issuesList.forEach(issueInfo => {
// Vérifier si les coordonnées sont valides
if (issueInfo.lat == null || issueInfo.lon == null) {
console.warn("Issue Osmose sans coordonnées ignorée:", issueInfo);
return; // Ignorer cette issue
}
const lat = parseFloat(issueInfo.lat);
const lon = parseFloat(issueInfo.lon);
const issueId = issueInfo.id; // C'est l'UUID
// Vérifier si l'UUID est valide
if (!issueId) {
console.warn("Issue Osmose sans ID (UUID) ignorée:", issueInfo);
return;
}
const osmoseMarker = L.circle([lat, lon], {
color: "purple",
fillColor: "purple",
fillOpacity: 0.8,
radius: 10,
className: 'leaflet-osmose-layer',
pane: 'markerPane',
issueId: issueId
});
// Préparer une popup de chargement simple
osmoseMarker.bindPopup("Chargement des détails...");
osmoseMarker.on('click', function (e) {
const clickedMarker = e.target;
const storedIssueId = clickedMarker.options.issueId;
// Afficher immédiatement la popup de chargement
clickedMarker.openPopup();
const detailUrl = `https://osmose.openstreetmap.fr/api/0.3/issue/${storedIssueId}?langs=auto`;
console.log("Récupération des détails pour l'issue:", detailUrl);
fetch(detailUrl)
.then(response => {
if (!response.ok) {
return response.text().then(text => { throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}. Réponse : ${text}`); });
}
return response.json();
})
.then(issueDetails => {
// Construire le contenu de la popup avec les détails
let popupContent = `<strong>${issueDetails.title?.auto || 'Titre non disponible'}</strong><br>`;
if (issueDetails.subtitle?.auto) {
popupContent += `<p>${issueDetails.subtitle.auto}</p>`;
}
let proposedTags = '';
if (issueDetails.new_elems && issueDetails.new_elems[0] && issueDetails.new_elems[0].add) {
proposedTags = '<table class="proposed-tags">';
issueDetails.new_elems[0].add.forEach(tag => {
proposedTags += `<tr><td>${tag.k}</td><td>${tag.v}</td></tr>`;
});
proposedTags += '</table>';
popupContent += `<div class="proposed-tags-container"><h4>Tags proposés :</h4>${proposedTags}</div>`;
}
// Construire le lien JOSM /import
const josmFixUrl = `http://localhost:8111/import?url=https://osmose.openstreetmap.fr/api/0.3/issue/${storedIssueId}/fix/0`;
popupContent += `
<div class="action-buttons">
<a class="edit-button josm" data-href="${josmFixUrl}" href="#" title="Ouvre JOSM et charge la correction proposée"> Réparer dans JOSM</a>
<a href="https://osmose.openstreetmap.fr/fr/issue/${storedIssueId}" target="_blank" title="Voir les détails de l'alerte sur le site Osmose">Voir sur Osmose</a>
</div>`;
// Mettre à jour le contenu de la popup et s'assurer qu'elle est ouverte
clickedMarker.setPopupContent(popupContent);
clickedMarker.openPopup(); // Rouvrir pour ajuster la taille si nécessaire
// Lier l'événement au bouton JOSM DANS la popup
bindEventsOnJosmRemote(clickedMarker.getPopup().getElement());
})
.catch(error => {
console.error("Erreur lors de la récupération des détails de l'issue Osmose:", error);
clickedMarker.setPopupContent(`Erreur lors du chargement des détails.<br><a href="https://osmose.openstreetmap.fr/fr/issue/${storedIssueId}" target="_blank">Voir sur Osmose</a>`);
clickedMarker.openPopup();
});
});
osmose_markers.addLayer(osmoseMarker);
});
})
.catch(error => {
console.error('Erreur détaillée lors de la recherche de la liste des issues Osmose:', error);
});
}
// Modifier la fonction init pour ajouter le nouveau calque
function init() {
food_places_markers.addTo(map);
$('#found_charging_stations').hide();
// Ajouter le contrôle des couches
// Mettre à jour le contrôle des calques
const overlayMaps = {
"Stations de recharge": all_stations_markers,
"Restaurants et cafés": food_places_markers
"Restaurants et cafés": food_places_markers,
"Bornes potentielles (Osmose)": osmose_markers
};
L.control.layers(null, overlayMaps).addTo(map);
@ -851,23 +1009,25 @@ function init() {
console.log('Données envoyées à JOSM avec succès !');
})
.catch(() => {
alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
alert('Erreur : JOSM doit être ouvert avec l\'option de télécommande "Contrôle à distance" activée dans ses paramètres (accédez-y avec F12)');
});
});
$('#searchButton').on('click', searchLocation);
$('#shareUrl').on('click', copyCurrentUrl);
$('#searchResults').on('change', function() {
$('#searchResults').on('change', function () {
const selectedIndex = $(this).val();
if (selectedIndex !== null) {
const selectedPlace = $(this).find('option:selected').data('place');
moveToLocation(selectedPlace);
}
});
document.getElementById('searchButton').addEventListener('click', searchLocation);
osmose_markers.addTo(map);
}
@ -882,52 +1042,56 @@ function copyCurrentUrl() {
document.execCommand('copy');
document.body.removeChild(dummy);
}
function searchLocation() {
const location = $('#searchLocation').val();
if (!location) {
alert('Veuillez entrer un lieu à rechercher.');
return;
}
const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`;
fetch(url)
.then(response => response.json())
.then(data => {
const resultsDropdown = $('#searchResults');
resultsDropdown.empty(); // Clear previous results
if (data.length === 0) {
alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
resultsDropdown.hide();
} else if (data.length === 1) {
const place = data[0];
moveToLocation(place);
resultsDropdown.hide();
} else {
data.forEach((place, index) => {
const option = $('<option></option>')
.val(index)
.text(`${place.display_name} (${place.lat}, ${place.lon})`);
resultsDropdown.append(option);
});
resultsDropdown.show();
}
})
.catch(error => {
console.error('Erreur lors de la recherche du lieu :', error);
alert('Erreur lors de la recherche du lieu.');
});
}
function moveToLocation(place) {
const lat = parseFloat(place.lat);
const lon = parseFloat(place.lon);
map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
}
init()
function searchLocation() {
const location = $('#searchLocation').val();
if (!location) {
alert('Veuillez entrer un lieu à rechercher.');
return;
}
const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`;
fetch(url)
.then(response => response.json())
.then(data => {
const resultsDropdown = $('#searchResults');
resultsDropdown.empty(); // Clear previous results
if (data.length === 0) {
alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
resultsDropdown.hide();
} else if (data.length === 1) {
const place = data[0];
moveToLocation(place);
resultsDropdown.hide();
} else {
data.forEach((place, index) => {
const option = $('<option></option>')
.val(index)
.text(`${place.display_name} (${place.lat}, ${place.lon})`);
resultsDropdown.append(option);
});
resultsDropdown.show();
}
})
.catch(error => {
console.error('Erreur lors de la recherche du lieu :', error);
alert('Erreur lors de la recherche du lieu.');
});
}
function moveToLocation(place) {
const lat = parseFloat(place.lat);
const lon = parseFloat(place.lon);
map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
}
init()
// Créer un nouveau pane pour les marqueurs Osmose avec un zIndex plus élevé
map.createPane('osmosePane');
map.getPane('osmosePane').style.zIndex = 1000;

View file

@ -31,7 +31,7 @@ const lcm_utils = {
if (value && tag.toLowerCase().indexOf('output') !== -1) {
value = '' + value
if (value.indexOf(';') !== -1) {
console.log('value output multiple', value)
// console.log('value output multiple', value)
let explode = value.split(';')
explode.forEach(elem => {
if (value.replace) {
@ -56,7 +56,7 @@ const lcm_utils = {
}
}
}
feature.properties.outputPower = outputPower
return outputPower
},
@ -65,26 +65,26 @@ const lcm_utils = {
* villes les plus peuplées de France
*/
cities: [
{name: 'Paris', coords: [48.8566, 2.3522]},
{name: 'Marseille', coords: [43.2965, 5.3698]},
{name: 'Lyon', coords: [45.7640, 4.8357]},
{name: 'Toulouse', coords: [43.6042, 1.4437]},
{name: 'Nice', coords: [43.7101, 7.2620]},
{name: 'Nantes', coords: [47.2184, -1.5536]},
{name: 'Strasbourg', coords: [48.5831, 7.7521]},
{name: 'Montpellier', coords: [43.6167, 3.8742]},
{name: 'Bordeaux', coords: [44.8378, -0.5792]},
{name: 'Lille', coords: [50.6293, 3.1466]},
{name: 'Rennes', coords: [48.1120, -1.6823]},
{name: 'Toulon', coords: [43.1230, 5.9291]},
{name: 'Le Havre', coords: [49.4943, 0.1079]},
{name: 'Saint-Etienne', coords: [45.4380, 4.3841]},
{name: 'Grenoble', coords: [45.1667, 5.7295]},
{name: 'Rouen', coords: [49.4431, 1.0820]},
{name: 'Dijon', coords: [47.3221, 5.0446]},
{name: 'Angers', coords: [47.4786, -0.5551]},
{name: 'Nîmes', coords: [43.8366, 4.3623]},
{name: 'Reims', coords: [49.2500, 4.0333]}
{ name: 'Paris', coords: [48.8566, 2.3522] },
{ name: 'Marseille', coords: [43.2965, 5.3698] },
{ name: 'Lyon', coords: [45.7640, 4.8357] },
{ name: 'Toulouse', coords: [43.6042, 1.4437] },
{ name: 'Nice', coords: [43.7101, 7.2620] },
{ name: 'Nantes', coords: [47.2184, -1.5536] },
{ name: 'Strasbourg', coords: [48.5831, 7.7521] },
{ name: 'Montpellier', coords: [43.6167, 3.8742] },
{ name: 'Bordeaux', coords: [44.8378, -0.5792] },
{ name: 'Lille', coords: [50.6293, 3.1466] },
{ name: 'Rennes', coords: [48.1120, -1.6823] },
{ name: 'Toulon', coords: [43.1230, 5.9291] },
{ name: 'Le Havre', coords: [49.4943, 0.1079] },
{ name: 'Saint-Etienne', coords: [45.4380, 4.3841] },
{ name: 'Grenoble', coords: [45.1667, 5.7295] },
{ name: 'Rouen', coords: [49.4431, 1.0820] },
{ name: 'Dijon', coords: [47.3221, 5.0446] },
{ name: 'Angers', coords: [47.4786, -0.5551] },
{ name: 'Nîmes', coords: [43.8366, 4.3623] },
{ name: 'Reims', coords: [49.2500, 4.0333] }
]
}
export default lcm_utils