diff --git a/README.md b/README.md
index 2083844..823d599 100644
--- a/README.md
+++ b/README.md
@@ -10,8 +10,14 @@ développé par tykayn - https://www.cipherbliss.com - à partir d'un squelette
Mastodon: https://mastodon.cipherbliss.com/@tykayn
# Fonctionnalités
-Affichage des stations de recharge colorées selon leur puissance maximale délivrée sur un totem.
-Changement de fond de carte.
+- Affichage des stations de recharge colorées selon leur puissance maximale délivrée sur un totem.
+- Changement de fond de carte.
+- Voir les restaurants.
+- Recherche d'un lieu.
+- Visite d'une des villes les plus peuplées de France au hasard.
+- Affichage des bornes suggérées à l'intégration par Osmose.
+- Proposition de correction dans JOSM.
+- Voir la zone dans Panoramax.
# comment ça marche ?
Avec une lib qui affiche un fond de carte sur lequel on peut naviguer et des marqueurs, on demande poliment à un site web, Overpass Turbo, quels sont les points et polygones d'OpenStreetMap correspondant à plusieurs types de restaurants et lieux où l'on peut trouver à manger et à boire à consommer sur place ou à emporter.
@@ -32,6 +38,8 @@ Gnu Affero 3+
# servir le site localement
Ouvrir la page index.html dans votre navigateur préféré, ou utiliser le paquet npm `serve`.
+Recomplilez les styles scss avec `bash styles.sh`.
+
# Requête overpass
```javascript
diff --git a/js/lcm_main.js b/js/lcm_main.js
index 73a2ba0..3a0bcf4 100644
--- a/js/lcm_main.js
+++ b/js/lcm_main.js
@@ -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 = '' +
'' + ''
- let ii=0
+ let ii = 0
let keys = Object.keys(feature.properties.tags)
- keys.forEach( (elem, val) => {
- console.log('elem, val', elem, val)
- content += ''+elem+' '+feature.properties.tags[elem]+' ' + elem + ' ' + feature.properties.tags[elem] + ' ' +
'
'
@@ -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(`
${name} ⚡
',
+ 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 = `${issueDetails.title?.auto || 'Titre non disponible'} ${issueDetails.subtitle.auto}
`;
+ }
+
+ let proposedTags = '';
+ if (issueDetails.new_elems && issueDetails.new_elems[0] && issueDetails.new_elems[0].add) {
+ proposedTags = '';
+ popupContent += `
Tags proposés : ${proposedTags}`;
+ }
+
+ // Construire le lien JOSM /import
+ const josmFixUrl = `http://localhost:8111/import?url=https://osmose.openstreetmap.fr/api/0.3/issue/${storedIssueId}/fix/0`;
+
+ popupContent += `
+ `;
+
+ // 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.Voir sur Osmose `);
+ 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 = $('