mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
up styles
This commit is contained in:
Tykayn
tykayn
parent
217416234a
commit
7c80ac4576
9 changed files with 283 additions and 224 deletions
338
js/lcm_main.js
338
js/lcm_main.js
|
|
@ -89,19 +89,19 @@ function moveToLocation(place) {
|
|||
// Ajouter le marqueur à la carte
|
||||
searchLocationMarker.addTo(map);
|
||||
|
||||
// Désactiver temporairement l'événement moveend
|
||||
map.off('moveend', onMapMoveEnd);
|
||||
|
||||
// Centrer la carte sur le lieu
|
||||
map.setView([lat, lon], map.getZoom());
|
||||
|
||||
// Réactiver l'événement moveend après un court délai
|
||||
setTimeout(() => {
|
||||
map.on('moveend', onMapMoveEnd);
|
||||
}, 500);
|
||||
|
||||
// Ouvrir le popup automatiquement
|
||||
searchLocationMarker.openPopup();
|
||||
|
||||
// Faire disparaître le marqueur après 10 secondes
|
||||
// setTimeout(() => {
|
||||
// if (searchLocationMarker) {
|
||||
// map.removeLayer(searchLocationMarker);
|
||||
// searchLocationMarker = null;
|
||||
// }
|
||||
// }, 10000);
|
||||
}
|
||||
|
||||
// Déplacer searchLocationWithAddok avant searchLocation
|
||||
|
|
@ -170,18 +170,20 @@ function searchLocation() {
|
|||
|
||||
// Si il y a plus d'un résultat, les afficher quand même dans la liste
|
||||
if (data.length > 1) {
|
||||
// Ajouter le bouton de fermeture avant la liste des résultats
|
||||
const closeButton = $('<button>')
|
||||
.addClass('close-results-button')
|
||||
.html('❌')
|
||||
.attr('title', 'Fermer les résultats de recherche')
|
||||
.on('click', function () {
|
||||
$('#searchResults').hide();
|
||||
$(this).hide();
|
||||
$('#searchLocation').val('').focus();
|
||||
});
|
||||
// Vérifier si le bouton de fermeture existe déjà
|
||||
if ($('.close-results-button').length === 0) {
|
||||
const closeButton = $('<button>')
|
||||
.addClass('close-results-button')
|
||||
.html('❌')
|
||||
.attr('title', 'Fermer les résultats de recherche')
|
||||
.on('click', function () {
|
||||
$('#searchResults').hide();
|
||||
$(this).hide();
|
||||
$('#searchLocation').val('').focus();
|
||||
});
|
||||
|
||||
resultsDropdown.before(closeButton);
|
||||
resultsDropdown.before(closeButton);
|
||||
}
|
||||
|
||||
data.forEach((place, index) => {
|
||||
let displayText = place.display_name;
|
||||
|
|
@ -196,7 +198,7 @@ function searchLocation() {
|
|||
resultsDropdown.append(option);
|
||||
});
|
||||
resultsDropdown.show();
|
||||
closeButton.show();
|
||||
$('.close-results-button').show();
|
||||
|
||||
// Sélectionner visuellement le premier résultat dans la liste
|
||||
resultsDropdown.val(0);
|
||||
|
|
@ -243,7 +245,7 @@ function updateURLWithMapCoordinatesAndZoom() {
|
|||
}
|
||||
|
||||
|
||||
let all_stations_markers = L.layerGroup() // layer group pour tous les marqueurs
|
||||
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, {
|
||||
|
|
@ -279,17 +281,12 @@ let bdortho = L.tileLayer('https://wxs.ign.fr/ortho/geoportail/wmts?' +
|
|||
// Modifier la définition de baseLayers pour inclure la BD ORTHO
|
||||
var baseLayers = {
|
||||
'Grey': tileGrey,
|
||||
'Stamen': stamen,
|
||||
// 'Stamen': stamen,
|
||||
'OpenStreetMap': osm,
|
||||
'BD ORTHO IGN': bdortho,
|
||||
// 'BD ORTHO IGN': bdortho,
|
||||
// 'OpenCycleMap': cycle,
|
||||
'Transport': transport
|
||||
}
|
||||
// let overlays = {
|
||||
// stations: all_stations_markers
|
||||
// }
|
||||
|
||||
// const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map)
|
||||
tileGrey.addTo(map)
|
||||
|
||||
|
||||
|
|
@ -429,7 +426,7 @@ function displayStatsFromGeoJson(resultAsGeojson, stats) {
|
|||
</div>`;
|
||||
|
||||
let stats_content = `<div class="stats-table">
|
||||
<table>
|
||||
<table style="width: 100%;">
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Nombre</th>
|
||||
|
|
@ -1207,7 +1204,7 @@ function searchOsmoseIssues(map) {
|
|||
|
||||
// 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
|
||||
// clickedMarker.openPopup(); // Rouvrir pour ajuster la taille si nécessaire
|
||||
|
||||
// Lier l'événement au bouton JOSM DANS la popup
|
||||
bindEventsOnJosmRemote(clickedMarker.getPopup().getElement());
|
||||
|
|
@ -1216,7 +1213,7 @@ function searchOsmoseIssues(map) {
|
|||
.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.<br><a href="https://osmose.openstreetmap.fr/fr/issue/${storedIssueId}" target="_blank">Voir sur Osmose</a>`);
|
||||
clickedMarker.openPopup();
|
||||
// clickedMarker.openPopup();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -1234,157 +1231,158 @@ function searchOsmoseIssues(map) {
|
|||
|
||||
// Modifier la gestion du clic sur les marqueurs Osmose
|
||||
function handleMarkerClick(marker, map) {
|
||||
const popup = marker.getPopup();
|
||||
const markerLatLng = marker.getLatLng();
|
||||
// const popup = marker.getPopup();
|
||||
// const markerLatLng = marker.getLatLng();
|
||||
|
||||
// Calculer la position relative du marqueur dans la vue
|
||||
const markerPoint = map.latLngToContainerPoint(markerLatLng);
|
||||
const mapHeight = map.getContainer().clientHeight;
|
||||
// const markerPoint = map.latLngToContainerPoint(markerLatLng);
|
||||
// const mapHeight = map.getContainer().clientHeight;
|
||||
|
||||
// Si le marqueur est dans la moitié supérieure de l'écran
|
||||
if (markerPoint.y < mapHeight / 2) {
|
||||
// Calculer le décalage nécessaire pour centrer la popup
|
||||
const targetLatLng = map.containerPointToLatLng([
|
||||
markerPoint.x,
|
||||
mapHeight / 2
|
||||
]);
|
||||
// if (markerPoint.y < mapHeight / 2) {
|
||||
// Calculer le décalage nécessaire pour centrer la popup
|
||||
// const targetLatLng = map.containerPointToLatLng([
|
||||
// markerPoint.x,
|
||||
// mapHeight / 2
|
||||
// ]);
|
||||
|
||||
// Déplacer la carte avec une animation
|
||||
map.once('moveend', () => {
|
||||
marker.openPopup();
|
||||
});
|
||||
// Déplacer la carte avec une animation
|
||||
// map.once('moveend', () => {
|
||||
// marker.openPopup();
|
||||
// });
|
||||
|
||||
map.panTo(targetLatLng, {
|
||||
animate: true,
|
||||
duration: 0.5
|
||||
});
|
||||
} else {
|
||||
marker.openPopup();
|
||||
}
|
||||
// map.panTo(targetLatLng, {
|
||||
// animate: true,
|
||||
// duration: 0.25
|
||||
// });
|
||||
// } else {
|
||||
// // marker.openPopup();
|
||||
// }
|
||||
}
|
||||
|
||||
// Ajouter un écouteur d'événements pour le changement de visibilité des calques
|
||||
function init() {
|
||||
$(document).ready(function () {
|
||||
bindEventsOnJosmRemote();
|
||||
onMapMoveEnd();
|
||||
map.on('moveend', onMapMoveEnd);
|
||||
$('#spinning_icon').hide();
|
||||
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');
|
||||
|
||||
$('#shareUrl').on('click', copyCurrentUrl);
|
||||
|
||||
// Initialisation des états des checkboxes des filtres selon les valeurs de configuration
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
console.log("checbox ", $(`#${filterId}`), lcm_config.filterConfigs[filterId], lcm_config)
|
||||
$(`#${filterId}`).prop('checked', lcm_config.filterConfigs[filterId]);
|
||||
});
|
||||
// Écouteurs pour les filtres
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
$(`#${filterId}`).on('change', function () {
|
||||
lcm_config[lcm_config.filterConfigs[filterId]] = this.checked;
|
||||
refreshDisplay();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// food_places_markers.addTo(map);
|
||||
|
||||
// Mettre à jour le contrôle des calques
|
||||
const overlayMaps = {
|
||||
// ...baseLayers,
|
||||
"Stations de recharge": all_stations_markers,
|
||||
"Restaurants et cafés": food_places_markers,
|
||||
"Bornes potentielles (Osmose)": osmose_markers
|
||||
};
|
||||
|
||||
const overlayControl = L.control.layers(baseLayers, overlayMaps, {
|
||||
// collapsed: false,
|
||||
className: 'leaflet-control-layers overlay-layers',
|
||||
id: 'overlay-layers-control'
|
||||
})
|
||||
.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);
|
||||
$('#filter_max_output').on('input', function () {
|
||||
const value = $(this).val();
|
||||
console.log('filter_max_output', value, $(this));
|
||||
$('#filter_max_output_display').text(value + ' kW');
|
||||
refreshDisplay();
|
||||
});
|
||||
$('#filter_max_output_slider').on('input', function () {
|
||||
const value = $(this).val();
|
||||
|
||||
lcm_config.filter_max_output_default_value = value;
|
||||
$('#filter_max_output_display').text(value + ' kW');
|
||||
refreshDisplay();
|
||||
});
|
||||
|
||||
|
||||
$('#searchResults').on('change', function () {
|
||||
const selectedIndex = $(this).eq(0).val();
|
||||
if (selectedIndex !== null) {
|
||||
const selectedPlace = $(this).find('option:selected').data('place');
|
||||
moveToLocation(selectedPlace);
|
||||
}
|
||||
});
|
||||
|
||||
osmose_markers.addTo(map);
|
||||
/**
|
||||
* 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 () {
|
||||
console.log('toggleSidePanel', $(this))
|
||||
$('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');
|
||||
|
||||
$('#shareUrl').on('click', copyCurrentUrl);
|
||||
|
||||
// Initialisation des états des checkboxes des filtres selon les valeurs de configuration
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
console.log("checbox ", $(`#${filterId}`), lcm_config.filterConfigs[filterId], lcm_config)
|
||||
$(`#${filterId}`).prop('checked', lcm_config.filterConfigs[filterId]);
|
||||
});
|
||||
// Écouteurs pour les filtres
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
$(`#${filterId}`).on('change', function () {
|
||||
lcm_config[lcm_config.filterConfigs[filterId]] = this.checked;
|
||||
refreshDisplay();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// food_places_markers.addTo(map);
|
||||
|
||||
// Mettre à jour le contrôle des calques
|
||||
const overlayMaps = {
|
||||
// ...baseLayers,
|
||||
// "🗺️ Fond de carte": baseLayers,
|
||||
"⚡ Stations de recharge": all_stations_markers,
|
||||
"☕ Restaurants et cafés": food_places_markers,
|
||||
"💡 Bornes potentielles (Osmose)": osmose_markers
|
||||
};
|
||||
|
||||
const overlayControl = L.control.layers(baseLayers, overlayMaps, {
|
||||
// collapsed: false,
|
||||
className: 'leaflet-control-layers overlay-layers',
|
||||
id: 'overlay-layers-control'
|
||||
})
|
||||
.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);
|
||||
$('#filter_max_output').on('input', function () {
|
||||
const value = $(this).val();
|
||||
console.log('filter_max_output', value, $(this));
|
||||
$('#filter_max_output_display').text(value + ' kW');
|
||||
refreshDisplay();
|
||||
});
|
||||
$('#filter_max_output_slider').on('input', function () {
|
||||
const value = $(this).val();
|
||||
|
||||
lcm_config.filter_max_output_default_value = value;
|
||||
$('#filter_max_output_display').text(value + ' kW');
|
||||
refreshDisplay();
|
||||
});
|
||||
|
||||
|
||||
$('#searchResults').on('change', function () {
|
||||
const selectedIndex = $(this).eq(0).val();
|
||||
if (selectedIndex !== null) {
|
||||
const selectedPlace = $(this).find('option:selected').data('place');
|
||||
moveToLocation(selectedPlace);
|
||||
}
|
||||
});
|
||||
|
||||
osmose_markers.addTo(map);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue