`;
$('#found_charging_stations').html(stats_content);
$('#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)
})
})
}
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){
console.log('display_alert_cable_missing', display_alert_cable_missing)
let keys = Object.keys(feature.properties)
console.log('feature.properties', keys)
/**
* 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();
updateExternalEditorsLinks();
bindFullDetails(feature);
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote();
updateExternalEditorsLinks();
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();
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote();
},
});
}
function bindFullDetails(feature){
$('#fullDetails'.on('click', ()=>{
$('#current_station_infos').html('
'+feature.properties+'
')
}))
}
function makeCssClassFromTags(tags) {
let tagKeys = Object.keys(tags)
if (!tags) {
return ''
}
let listOfClasses = []
tagKeys.forEach((element) => {
listOfClasses.push('tag-' + element + '_' + tags[element].replace(':', '--').replace(' ', '-'))
})
return listOfClasses.join(' ')
}
function getIconFromTags(tags) {
let iconFileName = ''
// let iconFileName = 'icon_restaurant.png';
if (tags['man_made']) {
iconFileName = 'fountain.png'
}
return iconFileName
}
function toggleMinPower(showHighPower) {
showHighPower = !showHighPower;
addFilteredMarkers(showHighPower);
this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale';
}
function addFilteredMarkers(showHighPower) {
allMarkers.clearLayers();
let counter = 0;
geojsondata.features.forEach(function (feature) {
if (feature.properties.puissance_haute === showHighPower) {
counter++;
let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale');
allMarkers.addLayer(marker);
}
});
}
let isLoading = false
function loadOverpassQuery() {
if (!isLoading) {
isLoading = true;
$('#spinning_icon').fadeIn();
let queryTextfieldValue = $('#query-textfield').val();
let overpassApiUrl = buildOverpassApiUrl(map, queryTextfieldValue);
$.get(overpassApiUrl, function (geoDataPointsFromApi) {
geojsondata = geoDataPointsFromApi;
refreshDisplay(true);
$('#spinning_icon').fadeOut();
$('#message-loading').fadeOut();
isLoading = false;
});
}
}
function refreshDisplay(convert_points_to_osm=false) {
supprimerMarqueurs();
displayPointsFromApi(geojsondata,convert_points_to_osm);
}
function onMapMoveEnd() {
let center = map.getCenter()
let zoom = map.getZoom()
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
if (zoom < 10) {
$('#zoomMessage').show()
} else {
$('#zoomMessage').hide()
loadOverpassQuery()
}
if (map.getZoom() > 14) {
searchFoodPlaces(map);
} else {
food_places_markers.clearLayers();
}
$('#infos_carte').html(infos)
// Stocker les dernières coordonnées connues
if (!window.lastKnownPosition) {
window.lastKnownPosition = center;
updateURLWithMapCoordinatesAndZoom();
} else {
// Calculer la distance en km entre l'ancienne et la nouvelle position
const distanceKm = map.distance(center, window.lastKnownPosition) / 1000;
// Ne mettre à jour que si on s'est déplacé de plus de 2km
if (distanceKm > 2) {
window.lastKnownPosition = center;
updateURLWithMapCoordinatesAndZoom();
}
}
}
setCoordinatesOfLeafletMapFromQueryParameters()
$(document).ready(function () {
bindEventsOnJosmRemote();
onMapMoveEnd();
map.on('moveend', onMapMoveEnd);
$('#spinning_icon').hide();
/**
* boutons de changement de filtres et de rechargement des bornes à l'affichage
*/
$('#removeMarkers').on('click', function () {
supprimerMarqueurs();
});
$('#load').on('click', function () {
loadOverpassQuery();
});
$('#toggleSidePanel').on('click', function () {
$('body').toggleClass('side-panel-open');
});
$('#chercherButton').on('click', function () {
supprimerMarqueurs();
loadOverpassQuery();
});
$('#setRandomView').on('click', function () {
setRandomView();
loadOverpassQuery();
});
$('#filterUnkown').on('click', function () {
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown');
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
refreshDisplay();
});
/**
* toggle des alertes de tags décrivant la présence de cable
*/
$('#cableMissing').on('click', function () {
display_alert_cable_missing = ! display_alert_cable_missing;
showActiveFilter(display_alert_cable_missing, '#cableMissing');
refreshDisplay();
});
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
});
function showActiveFilter(filterVariableName, selectorId) {
$(selectorId).attr('class', 'filter-state-' + filterVariableName)
}
/**
* mettre à jour les liens vers des éditeurs externes
*/
function updateExternalEditorsLinks(){
const center = map.getCenter()
const zoom = map.getZoom()
mapCompleteLink(center.lat,center.lng,zoom)
idLink(center.lat,center.lng,zoom)
}
function mapCompleteLink(lat,lon,zoom){
$("mapCompleteLink").attr('href', `https://mapcomplete.org/charging_stations?z=${zoom}&lat=${lat}&lon=${lon}`)
}
function idLink(lat,lon,zoom){
let href= `https://www.openstreetmap.org/edit?editor=id#map=${zoom}/${lat}/${lon}`
console.log('idlink', href)
$("idLink").attr('href', href)
}
function cycleVariableState(filterVariableName, selectorId) {
console.log('filterVariableName', filterVariableName, filterStatesAvailable)
if (filterVariableName) {
if (filterVariableName == filterStatesAvailable[0]) {
filterVariableName = filterStatesAvailable[1]
} else if (filterVariableName == filterStatesAvailable[1]) {
filterVariableName = filterStatesAvailable[2]
} else if (filterVariableName == filterStatesAvailable[2]) {
filterVariableName = filterStatesAvailable[0]
}
} else {
filterVariableName = filterStatesAvailable[0]
}
showActiveFilter(filterVariableName, selectorId)
console.log('filterVariableName after', filterVariableName)
return filterVariableName
}
// toggle des stats
$('#toggle-stats').on('click', function() {
$('#found_charging_stations').slideToggle();
// Change le symbole de la flèche
let text = $(this).text();
if(text.includes('🔽')) {
$(this).text(text.replace('🔽', '🔼'));
} else {
$(this).text(text.replace('🔼', '🔽'));
}
});
// Ajouter ces variables avec les autres déclarations globales
let food_places_markers = L.layerGroup();
const foodIcon = L.divIcon({
className: 'food-marker',
html: '🍽️',
iconSize: [20, 20],
iconAnchor: [10, 10]
});
// Ajouter cette fonction avec les autres fonctions de recherche
function searchFoodPlaces(map) {
const bounds = map.getBounds();
const bbox = bounds.getSouth() + ',' + bounds.getWest() + ',' + bounds.getNorth() + ',' + bounds.getEast();
const query = `
[out:json][timeout:25];
(
node["amenity"="restaurant"](${bbox});
node["amenity"="cafe"](${bbox});
);
out body;
>;
out skel qt;`;
const url = `https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`;
food_places_markers.clearLayers();
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;
const marker = L.marker([coords[1], coords[0]], {
icon: foodIcon
});
marker.bindPopup(`
${name}
Type: ${type}
${properties.tags.cuisine ? 'Cuisine: ' + properties.tags.cuisine : ''}
`);
food_places_markers.addLayer(marker);
});
})
.catch(error => console.error('Erreur lors de la recherche des restaurants:', error));
}
// Modifier la fonction init pour ajouter le contrôle des couches
function init() {
// ... existing map initialization code ...
// Ajouter le groupe de marqueurs à la carte
food_places_markers.addTo(map);
$('#found_charging_stations').hide();
// Ajouter le contrôle des couches
const overlayMaps = {
"Stations de recharge": all_stations_markers,
"Restaurants et cafés": food_places_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 "Contrôle à distance" activée');
});
});
$('#searchButton').on('click', searchLocation);
$('#shareUrl').on('click', copyCurrentUrl);
document.getElementById('searchButton').addEventListener('click', searchLocation);
}
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(event) {
event.preventDefault();
event.stopPropagation();
const location = document.getElementById('searchLocation').value;
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 => {
if (data.length > 0) {
const place = data[0];
const lat = parseFloat(place.lat);
const lon = parseFloat(place.lon);
map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
} else {
alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
}
})
.catch(error => {
console.error('Erreur lors de la recherche du lieu :', error);
alert('Erreur lors de la recherche du lieu.');
});
}
init()
'
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){
console.log('display_alert_cable_missing', display_alert_cable_missing)
let keys = Object.keys(feature.properties)
console.log('feature.properties', keys)
/**
* 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();
updateExternalEditorsLinks();
bindFullDetails(feature);
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote();
updateExternalEditorsLinks();
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();
},
mouseout: function () {
// setTimeout(() => this.closePopup(), 15000);
},
click: function () {
this.openPopup();
bindEventsOnJosmRemote();
},
});
}
function bindFullDetails(feature){
$('#fullDetails'.on('click', ()=>{
$('#current_station_infos').html('