mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
refacto naming exports js librechargemap with lcm_ prefix
This commit is contained in:
Tykayn
tykayn
parent
7100bc1d52
commit
c194a858b1
8 changed files with 110 additions and 95 deletions
758
js/lcm_main.js
Normal file
758
js/lcm_main.js
Normal file
|
|
@ -0,0 +1,758 @@
|
|||
/**
|
||||
* rechercher les bornes de recharge,
|
||||
* afficher des cercles colorés selon la puissance max de la station
|
||||
* lister les bornes trouvées dans la page
|
||||
* @type {boolean}
|
||||
*/
|
||||
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'
|
||||
let geojsondata;
|
||||
let lastLatLng;
|
||||
|
||||
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
|
||||
// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
|
||||
// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
|
||||
// https://tile.openstreetmap.org/{z}/{x}/{y}.png
|
||||
// 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
|
||||
|
||||
|
||||
// Créer la carte centrée sur Rouen
|
||||
// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
|
||||
|
||||
// Initialisation de la carte avec la vue centrée sur la ville choisie
|
||||
let map = L.map('map')
|
||||
L.control.scale().addTo(map)
|
||||
|
||||
/**
|
||||
* filtres à toggle par des boutons dans la page
|
||||
* à appliquer à chaque rafraîchissement des points geojson
|
||||
* TODO: make buttons and filter in refresh circles
|
||||
*/
|
||||
let filterStatesAvailable = ['hide', 'show', 'showOnly']
|
||||
|
||||
let filters_features = {
|
||||
display_unknown_max_power_station : filterStatesAvailable[1]
|
||||
}
|
||||
let display_type2_sockets = 'show';
|
||||
let display_type2_combo_sockets = 'show';
|
||||
let display_unknown_max_power_station = 'show';
|
||||
let display_known_max_power_station = 'show';
|
||||
let display_type2_combo_sockets_with_cable = 'show';
|
||||
let display_lower_than_50kw = 'show';
|
||||
let display_higer_than_50kw = 'show';
|
||||
let display_lower_than_200kw = 'show';
|
||||
let display_higer_than_200kw = 'show';
|
||||
let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 400kW
|
||||
|
||||
|
||||
function setRandomView() {
|
||||
let randomCity = lcm_utils.cities[Math.floor(Math.random() * lcm_utils.cities.length)];
|
||||
map = map.setView(randomCity.coords, lcm_config.initialZoom);
|
||||
}
|
||||
|
||||
function setCoordinatesOfLeafletMapFromQueryParameters() {
|
||||
const urlParams = new URLSearchParams(window.location.href);
|
||||
const lat = urlParams.get('lat');
|
||||
const lng = urlParams.get('lng');
|
||||
const zoom = urlParams.get('zoom');
|
||||
|
||||
if (lat && lng && zoom) {
|
||||
map = map.setView([lat, lng], zoom);
|
||||
} else {
|
||||
console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.');
|
||||
setRandomView();
|
||||
}
|
||||
}
|
||||
|
||||
function updateURLWithMapCoordinatesAndZoom() {
|
||||
// Récupère les coordonnées et le niveau de zoom de la carte
|
||||
const center = map.getCenter()
|
||||
const zoom = map.getZoom()
|
||||
|
||||
// Construit l'URL avec les paramètres de coordonnées et de zoom
|
||||
const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`
|
||||
// Met à jour l'URL de la page
|
||||
history.replaceState(null, null, url)
|
||||
}
|
||||
|
||||
|
||||
let all_stations_markers = L.layerGroup().addTo(map) // layer group pour tous les marqueurs
|
||||
// let stations_much_speed_wow = L.layerGroup().addTo(map) // layer group des stations rapides
|
||||
|
||||
var osm = L.tileLayer(lcm_config.tileServers.osm, {
|
||||
attribution: lcm_config.osmMention + '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
||||
})
|
||||
|
||||
var cycle = L.tileLayer(lcm_config.tileServers.cycle, {
|
||||
attribution: lcm_config.osmMention + '© <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
|
||||
})
|
||||
|
||||
var transport = L.tileLayer(lcm_config.tileServers.transport, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
|
||||
let tileGrey =
|
||||
L.tileLayer(lcm_config.tileServers.cartodb, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
let stamen =
|
||||
L.tileLayer(lcm_config.tileServers.stamen, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
var baseLayers = {
|
||||
'Grey': tileGrey,
|
||||
'Stamen': stamen,
|
||||
'OpenStreetMap': osm,
|
||||
// 'OpenCycleMap': cycle,
|
||||
'Transport': transport
|
||||
}
|
||||
let overlays = {
|
||||
stations_bof: all_stations_markers
|
||||
}
|
||||
|
||||
const layerControl = L.control.layers(baseLayers, overlays, {collapsed: true}).addTo(map)
|
||||
tileGrey.addTo(map)
|
||||
|
||||
|
||||
function buildOverpassApiUrl(map, overpassQuery) {
|
||||
let baseUrl = 'https://overpass-api.de/api/interpreter';
|
||||
const kilometersMarginForLoading = 2;
|
||||
const marginInDegrees = kilometersMarginForLoading / 111;
|
||||
const south = map.getBounds().getSouth() - marginInDegrees;
|
||||
const west = map.getBounds().getWest() - marginInDegrees;
|
||||
const north = map.getBounds().getNorth() + marginInDegrees;
|
||||
const east = map.getBounds().getEast() + marginInDegrees;
|
||||
let bounds = south + ',' + west + ',' + north + ',' + east;
|
||||
let resultUrl, query = '';
|
||||
|
||||
if (lcm_config.overrideQuery) {
|
||||
query = `?data=[out:json][timeout:15];(
|
||||
nwr[amenity=charging_station](${bounds});
|
||||
);out body geom;`;
|
||||
} else {
|
||||
let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
|
||||
let wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
|
||||
let relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
|
||||
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
|
||||
}
|
||||
resultUrl = baseUrl + query;
|
||||
return resultUrl;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function supprimerMarqueurs() {
|
||||
all_stations_markers.clearLayers();
|
||||
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
layer.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let coef_reduction_bars = 0.8
|
||||
|
||||
function calculerPourcentage(partie, total, reduc) {
|
||||
if (total === 0) {
|
||||
return 'Division par zéro impossible'
|
||||
}
|
||||
let coef_reduction = 1
|
||||
if (reduc) {
|
||||
coef_reduction = coef_reduction_bars
|
||||
}
|
||||
return ((partie / total) * 100 * coef_reduction).toFixed(1)
|
||||
}
|
||||
|
||||
function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
let count = resultAsGeojson.features.length;
|
||||
let count_station_output = 0;
|
||||
let count_ref_eu = 0;
|
||||
let output_more_than_300 = 0;
|
||||
let output_more_than_200 = 0;
|
||||
let output_more_than_100 = 0;
|
||||
let output_more_than_50 = 0;
|
||||
let count_station_outputoutput_between_1_and_50 = 0;
|
||||
let count_output_unknown = 0;
|
||||
let count_estimated_type2combo = 0;
|
||||
let count_found_type2combo = 0;
|
||||
let count_found_type2 = 0;
|
||||
|
||||
resultAsGeojson.features.map(feature => {
|
||||
let found_type2_combo = false;
|
||||
let found_type2 = false;
|
||||
let keys_of_object = Object.keys(feature.properties.tags);
|
||||
keys_of_object.map(tagKey => {
|
||||
if (tagKey.indexOf('type2_combo') !== -1) {
|
||||
found_type2_combo = true;
|
||||
}
|
||||
if (tagKey.indexOf('type2') !== -1) {
|
||||
found_type2 = true;
|
||||
}
|
||||
});
|
||||
let outputPower = lcm_utils.guessOutputPowerFromFeature(feature);
|
||||
if (found_type2_combo) {
|
||||
count_found_type2combo++;
|
||||
}
|
||||
if (found_type2) {
|
||||
count_found_type2++;
|
||||
}
|
||||
if (outputPower == 0) {
|
||||
count_output_unknown++;
|
||||
}
|
||||
// filtres
|
||||
// filtrer les valeurs inconnues
|
||||
|
||||
if(filters_features.display_unknown_max_power_station === 'hide'){
|
||||
return;
|
||||
}
|
||||
if (outputPower >= 200 && !found_type2_combo) {
|
||||
count_estimated_type2combo++;
|
||||
}
|
||||
if (outputPower > 0 && outputPower < 50) {
|
||||
count_station_outputoutput_between_1_and_50++;
|
||||
}
|
||||
if (outputPower >= 50 && outputPower < 100) {
|
||||
output_more_than_50++;
|
||||
} else if (outputPower >= 100 && outputPower < 200) {
|
||||
output_more_than_100++;
|
||||
} else if (outputPower >= 200 && outputPower < 300) {
|
||||
output_more_than_200++;
|
||||
} else if (outputPower >= 300) {
|
||||
feature.properties.puissance_haute = true;
|
||||
output_more_than_300++;
|
||||
}
|
||||
if (feature.properties.tags['charging_station:output']) {
|
||||
count_station_output++;
|
||||
}
|
||||
if (feature.properties.tags['ref:EU:EVSE']) {
|
||||
count_ref_eu++;
|
||||
}
|
||||
});
|
||||
|
||||
let bar_powers = `<div class="bars-container">
|
||||
<div class="bar color-unknown" style="width: ${calculerPourcentage(count_output_unknown, count, true)}%">${count_output_unknown}</div>
|
||||
<div class="bar color-power-lesser-than-50" style="width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%">${count_station_outputoutput_between_1_and_50 ? count_station_outputoutput_between_1_and_50 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-100" style="width: ${calculerPourcentage(output_more_than_50, count, true)}%">${output_more_than_50 ? output_more_than_50 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-200" style="width: ${calculerPourcentage(output_more_than_100, count, true)}%">${output_more_than_100 ? output_more_than_100 : ''}</div>
|
||||
<div class="bar color-power-lesser-than-300" style="width: ${calculerPourcentage(output_more_than_200, count, true)}%">${output_more_than_200 ? output_more_than_200 : '' | ''}</div>
|
||||
<div class="bar color-power-lesser-than-max" style="width: ${calculerPourcentage(output_more_than_300, count, true)}%">${output_more_than_300 ? output_more_than_300 : ''}</div>
|
||||
</div>`;
|
||||
|
||||
let stats_content = `<div class="stats-table">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Nombre</th>
|
||||
<th>Pourcentage</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Puissance inconnue</td>
|
||||
<td>${count_output_unknown}</td>
|
||||
<td>${calculerPourcentage(count_output_unknown, count)}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1-50 kW</td>
|
||||
<td>${count_station_outputoutput_between_1_and_50}</td>
|
||||
<td>${calculerPourcentage(count_station_outputoutput_between_1_and_50, count)}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>50-100 kW</td>
|
||||
<td>${output_more_than_50}</td>
|
||||
<td>${calculerPourcentage(output_more_than_50, count)}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>100-200 kW</td>
|
||||
<td>${output_more_than_100}</td>
|
||||
<td>${calculerPourcentage(output_more_than_100, count)}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>200-300 kW</td>
|
||||
<td>${output_more_than_200}</td>
|
||||
<td>${calculerPourcentage(output_more_than_200, count)}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>300+ kW</td>
|
||||
<td>${output_more_than_300}</td>
|
||||
<td>${calculerPourcentage(output_more_than_300, count)}%</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>`;
|
||||
|
||||
$('#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) {
|
||||
if (points) {
|
||||
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 += '<div class="sockets-list" >'
|
||||
let type2 = feature.properties.tags['socket:type2']
|
||||
let type2_combo = feature.properties.tags['socket:type2_combo']
|
||||
if (type2) {
|
||||
popupContent += ' <img class="icon-img" src="img/Type2_socket.svg" alt="prise de type 2">'
|
||||
if (type2 !== 'yes') {
|
||||
popupContent += '<span class="socket-counter">x ' + type2 + '</span>'
|
||||
}
|
||||
}
|
||||
if (feature.properties.tags['socket:type2_combo']) {
|
||||
|
||||
popupContent += ' <img class="icon-img" src="img/type2_combo.svg" alt="prise de type 2 combo CCS">'
|
||||
if (type2_combo !== 'yes') {
|
||||
popupContent += '<span class="socket-counter">x ' + type2_combo + '</span>'
|
||||
}
|
||||
}
|
||||
popupContent += '</div>'
|
||||
popupContent += '<div class="key-values" >'
|
||||
// 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 = '<a href="' + value + '">' + value + '</a>'
|
||||
}
|
||||
popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
|
||||
}
|
||||
}
|
||||
})
|
||||
popupContent += '</div>'
|
||||
return popupContent;
|
||||
}
|
||||
|
||||
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 (!popupContent) {
|
||||
popupContent = `<span class="no-data"> Aucune information renseignée,
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`;
|
||||
}
|
||||
|
||||
let html = ` <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_car#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en voiture vers cette station"> 🚗</a><a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_bike#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en vélo vers cette station">🚴♀️</a><a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_foot#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire à pied vers cette station">👠</a>
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 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();
|
||||
$('#spinning_icon').fadeOut();
|
||||
$('#message-loading').fadeOut();
|
||||
isLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function refreshDisplay() {
|
||||
supprimerMarqueurs();
|
||||
displayPointsFromApi(geojsondata);
|
||||
}
|
||||
|
||||
|
||||
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();
|
||||
$('#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();
|
||||
});
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
});
|
||||
|
||||
function showActiveFilter(filterVariableName, selectorId) {
|
||||
$(selectorId).attr('class', 'filter-state-' + filterVariableName)
|
||||
}
|
||||
|
||||
|
||||
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(`
|
||||
<strong>${name}</strong><br>
|
||||
Type: ${type}<br>
|
||||
${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');
|
||||
});
|
||||
});
|
||||
|
||||
$('#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() {
|
||||
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()
|
||||
Loading…
Add table
Add a link
Reference in a new issue