`;
$('#found_charging_stations').html(stats_content);
$('#bars_power').html(bar_powers);
}
// 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);
}
displayStatsFromGeoJson(geojsondata);
let resultLayer = L.geoJson(geojsondata, {
style: function (feature) {
return { color: '#f00' };
},
filter: function (feature, layer) {
let isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === 'Polygon');
if (isPolygon) {
feature.geometry.type = 'Point';
let polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
feature.geometry.coordinates = [polygonCenter.lat, polygonCenter.lng];
}
return true;
},
onmoveend: function (event) {
// console.log('déplacement terminé');
},
onzoomend: function (event) {
supprimerMarqueurs();
displayPointsFromApi();
},
onEachFeature: eachFeature,
});
}
function makePopupOfFeature(feature) {
let popupContent = ''
popupContent += '
'
let type2 = feature.properties.tags['socket:type2']
let type2_combo = feature.properties.tags['socket:type2_combo']
if (type2) {
popupContent += ' '
if (type2 !== 'yes') {
popupContent += 'x ' + type2 + ''
}
}
if (feature.properties.tags['socket:type2_combo']) {
popupContent += ' '
if (type2_combo !== 'yes') {
popupContent += 'x ' + type2_combo + ''
}
}
popupContent += '
'
popupContent += '
'
// ne montrer que certains champs dans la popup
lcm_config.tags_to_display_in_popup.forEach(function (key) {
if (lcm_config.tags_to_display_in_popup.indexOf(key)) {
let value = feature.properties.tags[key]
if (value) {
if (value.indexOf('http') !== -1) {
value = '' + value + ''
}
popupContent = popupContent + ' ' + key + ' :' + value + ''
}
}
})
popupContent += '
'
return popupContent;
}
/**
* application des filtres dans la sélection des bornes à afficher
* @param feature
* @param layer
*/
function eachFeature(feature, layer) {
let link_josm = createJOSMEditLink(feature);
let popupContent = makePopupOfFeature(feature);
layer.bindPopup(popupContent);
let outPowerGuessed = lcm_utils.guessOutputPowerFromFeature(feature);
let color = lcm_color_utils.getColor(feature);
let displayOutPowerGuessed = '? kW';
if (outPowerGuessed) {
displayOutPowerGuessed = outPowerGuessed + ' kW max';
if (display_unknown_max_power_station === 'show_only') {
return;
}
} else {
// on cache cette station si on ne veut pas voir les stations à la puissance inconnue
if (display_unknown_max_power_station === 'hide') {
return;
}
}
/**
* bornes sans informations, suggérer d'ajouter des tags dans OSM
*/
if (!popupContent) {
popupContent = ` Aucune information renseignée,
ajoutez la dans OpenStreetMap!`;
}
// Ajout du lien vers Panoramax
const panoramaxLink = `https://api.panoramax.xyz/#focus=map&map=16.7/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}&speed=250`;
let html = ` 🚗🚴♀️👠✏️JOSM${displayOutPowerGuessed}${popupContent}`;
let zoom = map.getZoom();
let radius = 20;
let opacity = 0.5;
let ratio_circle = 10;
if (zoom < 13) {
ratio_circle = 5;
} else if (zoom < 15) {
ratio_circle = 1;
opacity = 0.25;
} else if (zoom <= 16) {
ratio_circle = 0.5;
} else if (zoom <= 18) {
ratio_circle = 0.25;
}
if (!layer._latlng) {
if (lastLatLng) {
layer._latlng = lastLatLng;
}
} else {
lastLatLng = layer._latlng;
}
if (!outPowerGuessed) {
radius = radius * ratio_circle;
} else {
/**
* limiter la taille du cercle pour les valeurs aberrantes
* les mettre en valeur en les plafonnant à 1 de plus que le maximum attendu en lcm_config
*/
if (outPowerGuessed > lcm_config.max_possible_station_output) {
console.error("valeur suspecte outPowerGuessed", outPowerGuessed, feature)
outPowerGuessed = lcm_config.max_possible_station_output + 1
}
radius = outPowerGuessed * ratio_circle;
}
/**
* gestion des marqueurs d'alertes
*/
// info de câble manquant
if (display_alert_cable_missing) {
let keys = Object.keys(feature.properties)
/**
* on considère l'information de câble manquante uniquement dans le cas où une info de socket de type 2 est présente mais pas le tag socket:type2_cable.
*/
if (keys.indexOf('socket:type2') !== -1 && keys.indexOf('socket:type2_cable') === -1) {
let circle_alert = L.circle(layer._latlng, {
color: 'red',
fillColor: 'orange',
fillOpacity: 1,
colorOpacity: 0.5,
radius: 20
})
circle_alert.bindPopup("information de câble manquante");
circle_alert.on({
mouseover: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
});
circle_alert.addTo(all_stations_markers);
}
}
/**
* affichage des marqueurs de stations de recharge
*/
let circle = L.circle(layer._latlng, {
color: color,
fillColor: color,
fillOpacity: opacity,
colorOpacity: opacity,
radius: radius
}).addTo(all_stations_markers);
if (zoom > 15) {
let circle_center = L.circle(layer._latlng, {
color: 'black',
fillColor: color,
fillOpacity: 1,
radius: 0.1
}).addTo(all_stations_markers);
}
circle.bindPopup(html);
circle.on({
mouseover: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
});
}
function bindFullDetails(feature) {
$('#fullDetails').on('click', () => {
console.log('details', feature)
console.log("$('#current_station_infos')", $('#current_station_infos')[0])
let content = '
' +
'' + ''
let ii = 0
let keys = Object.keys(feature.properties.tags)
keys.forEach((elem, val) => {
console.log('elem, val', elem, val)
content += '
`;
// 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();
// Mettre à jour le contrôle des calques
const overlayMaps = {
"Stations de recharge": all_stations_markers,
"Restaurants et cafés": food_places_markers,
"Bornes potentielles (Osmose)": osmose_markers
};
L.control.layers(null, overlayMaps).addTo(map);
$('#sendToJOSM').on('click', () => {
sendToJOSM(map, geojsondata)
.then(() => {
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');
});
});
$('#josmLink').on('click', () => {
sendToJOSM(map, geojsondata)
.then(() => {
console.log('Données envoyées à JOSM avec succès !');
})
.catch(() => {
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 () {
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);
}
function copyCurrentUrl() {
const url = window.location.href;
var dummy = document.createElement('input'),
text = window.location.href;
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
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 = $('')
.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;
'
if (type2 !== 'yes') {
popupContent += 'x ' + type2 + ''
}
}
if (feature.properties.tags['socket:type2_combo']) {
popupContent += ' 
'
if (type2_combo !== 'yes') {
popupContent += 'x ' + type2_combo + ''
}
}
popupContent += '
${displayOutPowerGuessed}
${popupContent}`;
let zoom = map.getZoom();
let radius = 20;
let opacity = 0.5;
let ratio_circle = 10;
if (zoom < 13) {
ratio_circle = 5;
} else if (zoom < 15) {
ratio_circle = 1;
opacity = 0.25;
} else if (zoom <= 16) {
ratio_circle = 0.5;
} else if (zoom <= 18) {
ratio_circle = 0.25;
}
if (!layer._latlng) {
if (lastLatLng) {
layer._latlng = lastLatLng;
}
} else {
lastLatLng = layer._latlng;
}
if (!outPowerGuessed) {
radius = radius * ratio_circle;
} else {
/**
* limiter la taille du cercle pour les valeurs aberrantes
* les mettre en valeur en les plafonnant à 1 de plus que le maximum attendu en lcm_config
*/
if (outPowerGuessed > lcm_config.max_possible_station_output) {
console.error("valeur suspecte outPowerGuessed", outPowerGuessed, feature)
outPowerGuessed = lcm_config.max_possible_station_output + 1
}
radius = outPowerGuessed * ratio_circle;
}
/**
* gestion des marqueurs d'alertes
*/
// info de câble manquant
if (display_alert_cable_missing) {
let keys = Object.keys(feature.properties)
/**
* on considère l'information de câble manquante uniquement dans le cas où une info de socket de type 2 est présente mais pas le tag socket:type2_cable.
*/
if (keys.indexOf('socket:type2') !== -1 && keys.indexOf('socket:type2_cable') === -1) {
let circle_alert = L.circle(layer._latlng, {
color: 'red',
fillColor: 'orange',
fillOpacity: 1,
colorOpacity: 0.5,
radius: 20
})
circle_alert.bindPopup("information de câble manquante");
circle_alert.on({
mouseover: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
});
circle_alert.addTo(all_stations_markers);
}
}
/**
* affichage des marqueurs de stations de recharge
*/
let circle = L.circle(layer._latlng, {
color: color,
fillColor: color,
fillOpacity: opacity,
colorOpacity: opacity,
radius: radius
}).addTo(all_stations_markers);
if (zoom > 15) {
let circle_center = L.circle(layer._latlng, {
color: 'black',
fillColor: color,
fillOpacity: 1,
radius: 0.1
}).addTo(all_stations_markers);
}
circle.bindPopup(html);
circle.on({
mouseover: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote(this.getPopup().getElement());
bindFullDetails(feature);
},
});
}
function bindFullDetails(feature) {
$('#fullDetails').on('click', () => {
console.log('details', feature)
console.log("$('#current_station_infos')", $('#current_station_infos')[0])
let content = '