mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-10-04 17:04:53 +02:00
up
This commit is contained in:
Tykayn
tykayn
parent
ce029e2c76
commit
bbf1bf3cdd
6 changed files with 336 additions and 71 deletions
33
js/config.js
33
js/config.js
|
|
@ -9,6 +9,35 @@ const config = {
|
|||
cartodb : 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
|
||||
stamen : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',
|
||||
transport : 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
|
||||
}
|
||||
}
|
||||
},
|
||||
tags_to_display_in_popup: [
|
||||
'name',
|
||||
'capacity',
|
||||
'description',
|
||||
'date_start',
|
||||
'charging_station:output',
|
||||
'socket:type_2',
|
||||
'socket:type2:output',
|
||||
'socket:typee',
|
||||
'socket:typee:output',
|
||||
'socket:type2_combo',
|
||||
'socket:type2_combo:output',
|
||||
'socket:chademo',
|
||||
'operator', 'ref:EU:EVSE',
|
||||
'network',
|
||||
'opening_hours',
|
||||
'contact',
|
||||
'phone',
|
||||
'contact:phone',
|
||||
'website',
|
||||
'contact:website',
|
||||
'ref',
|
||||
'fee',
|
||||
'payment',
|
||||
'payment:contactless',
|
||||
'authentication:app',
|
||||
'authentication:debit_card',
|
||||
]
|
||||
}
|
||||
|
||||
export default config
|
||||
|
|
|
|||
29
js/editor.js
Normal file
29
js/editor.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
/**
|
||||
* Fonctions liées à l'édition des données OSM et à l'interaction avec JOSM
|
||||
*/
|
||||
|
||||
export function sendToJOSM(map) {
|
||||
const bounds = map.getBounds();
|
||||
const bbox = `${bounds.getWest()},${bounds.getSouth()},${bounds.getEast()},${bounds.getNorth()}`;
|
||||
|
||||
const josmUrl = `http://127.0.0.1:8111/load_and_zoom?left=${bounds.getWest()}&right=${bounds.getEast()}&top=${bounds.getNorth()}&bottom=${bounds.getSouth()}&select=node[amenity=charging_station]&changeset_hashtags=IRVE&layer_name=irve-depuis-OSM`;
|
||||
|
||||
return fetch(josmUrl)
|
||||
.then(response => {
|
||||
if (response.ok) {
|
||||
console.log('Données envoyées à JOSM avec succès');
|
||||
return true;
|
||||
} else {
|
||||
console.error('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
|
||||
throw new Error('JOSM non accessible');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur JOSM:', error);
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
sendToJOSM
|
||||
};
|
||||
213
js/main.js
213
js/main.js
|
|
@ -7,6 +7,7 @@
|
|||
import config from './config.js'
|
||||
import utils from './utils.js'
|
||||
import colorUtils from './color-utils.js'
|
||||
import editor from './editor.js'
|
||||
|
||||
console.log('config', config)
|
||||
let geojsondata;
|
||||
|
|
@ -86,6 +87,10 @@ function updateURLWithMapCoordinatesAndZoom() {
|
|||
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(config.tileServers.osm, {
|
||||
attribution: config.osmMention + '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
||||
})
|
||||
|
|
@ -113,22 +118,26 @@ var baseLayers = {
|
|||
// 'OpenCycleMap': cycle,
|
||||
'Transport': transport
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
let overlays = {
|
||||
stations_bof: all_stations_markers
|
||||
// , stations_much_speed_wow
|
||||
} // Si vous avez des calques superposables, ajoutez-les ici
|
||||
}
|
||||
|
||||
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'
|
||||
let bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast()
|
||||
// Ajouter une marge de 2 kilomètres autour des bounds
|
||||
// Conversion approximative: 1 degré = 111km à l'équateur
|
||||
const kilometersMarginForLoading = 2
|
||||
const marginInDegrees = kilometersMarginForLoading / 111 // 2 kilomètres convertis en degrés
|
||||
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 (config.overrideQuery) {
|
||||
|
|
@ -144,36 +153,8 @@ function buildOverpassApiUrl(map, overpassQuery) {
|
|||
}
|
||||
resultUrl = baseUrl + query
|
||||
return resultUrl
|
||||
}
|
||||
}
|
||||
|
||||
const tags_to_display_in_popup = [
|
||||
'name',
|
||||
'capacity',
|
||||
'description',
|
||||
'date_start',
|
||||
'charging_station:output',
|
||||
'socket:type_2',
|
||||
'socket:type2:output',
|
||||
'socket:typee',
|
||||
'socket:typee:output',
|
||||
'socket:type2_combo',
|
||||
'socket:type2_combo:output',
|
||||
'socket:chademo',
|
||||
'operator', 'ref:EU:EVSE',
|
||||
'network',
|
||||
'opening_hours',
|
||||
'contact',
|
||||
'phone',
|
||||
'contact:phone',
|
||||
'website',
|
||||
'contact:website',
|
||||
'ref',
|
||||
'fee',
|
||||
'payment',
|
||||
'payment:contactless',
|
||||
'authentication:app',
|
||||
'authentication:debit_card',
|
||||
]
|
||||
const margin_josm_bbox = 0.00001
|
||||
|
||||
function createJOSMEditLink(feature) {
|
||||
|
|
@ -288,6 +269,48 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
</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>`
|
||||
|
||||
/**
|
||||
|
||||
let stats_content = `<div class="stats">
|
||||
Statistiques des <strong>${count}</strong> stations trouvées: <br/>
|
||||
${count_station_output} (${calculerPourcentage(count_station_output, count)}%) ont une info de puissance max délivrée <i>charging_station:output</i>. <br/>
|
||||
|
|
@ -300,13 +323,14 @@ ${output_more_than_50} (${calculerPourcentage(output_more_than_50, count)}%) ont
|
|||
${count_found_type2combo} (${calculerPourcentage(count_found_type2combo, count)}%) ont un prise combo définie <i>*type2_combo*</i>. <br/>
|
||||
${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo, count)}%) ont une prise combo présumée à partir de la puissance max trouvée mais non spécifiée <i>*type2_combo*</i>. <br/>${count_found_type2} (${calculerPourcentage(count_found_type2, count)}%) ont un prise type2 définie <i>*type2*</i>. <br/>
|
||||
</div>`
|
||||
|
||||
*
|
||||
*/
|
||||
$('#found_charging_stations').html(stats_content)
|
||||
$('#bars_power').html(bar_powers)
|
||||
}
|
||||
|
||||
function bindEventsOnJosmRemote() {
|
||||
let josm_remote_buttons = $(`.josm`)
|
||||
let josm_remote_buttons = $(`#sendToJOSM`)
|
||||
// console.log('josm_remote_buttons', josm_remote_buttons[0])
|
||||
$(josm_remote_buttons[0]).on('click', () => {
|
||||
// console.log('link', josm_remote_buttons[0])
|
||||
|
|
@ -383,8 +407,8 @@ function makePopupOfFeature(feature) {
|
|||
popupContent += '</div>'
|
||||
popupContent += '<div class="key-values" >'
|
||||
// ne montrer que certains champs dans la popup
|
||||
tags_to_display_in_popup.forEach(function (key) {
|
||||
if (tags_to_display_in_popup.indexOf(key)) {
|
||||
config.tags_to_display_in_popup.forEach(function (key) {
|
||||
if (config.tags_to_display_in_popup.indexOf(key)) {
|
||||
let value = feature.properties.tags[key]
|
||||
if (value) {
|
||||
if (value.indexOf('http') !== -1) {
|
||||
|
|
@ -599,7 +623,20 @@ function onMapMoveEnd() {
|
|||
loadOverpassQuery()
|
||||
}
|
||||
$('#infos_carte').html(infos)
|
||||
updateURLWithMapCoordinatesAndZoom()
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -618,6 +655,9 @@ $(document).ready(function () {
|
|||
$('#load').on('click', function () {
|
||||
loadOverpassQuery()
|
||||
})
|
||||
$('#toggleSidePanel').on('click', function () {
|
||||
$('body').toggleClass('side-panel-open')
|
||||
})
|
||||
// filtres
|
||||
// boutons de toggle et de cycle de visibilité
|
||||
//
|
||||
|
|
@ -643,6 +683,7 @@ function showActiveFilter(filterVariableName, selectorId) {
|
|||
$(selectorId).attr('class', 'filter-state-' + filterVariableName)
|
||||
}
|
||||
|
||||
|
||||
function cycleVariableState(filterVariableName, selectorId) {
|
||||
console.log('filterVariableName', filterVariableName, filterStatesAvailable)
|
||||
if (filterVariableName) {
|
||||
|
|
@ -674,3 +715,93 @@ $('#toggle-stats').on('click', function() {
|
|||
$(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);
|
||||
|
||||
// Ajouter l'événement de recherche sur le déplacement de la carte
|
||||
map.on('moveend', function() {
|
||||
if (map.getZoom() > 13) { // Ajuster le niveau de zoom selon vos besoins
|
||||
searchFoodPlaces(map);
|
||||
} else {
|
||||
food_places_markers.clearLayers();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('sendToJOSM').addEventListener('click', () => {
|
||||
editor.sendToJOSM(map)
|
||||
.then(() => {
|
||||
alert('Données envoyées à JOSM avec succès !');
|
||||
})
|
||||
.catch(() => {
|
||||
alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue