mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
🎨 displace search to top
This commit is contained in:
Tykayn
tykayn
parent
e0a042c28b
commit
b30985b581
7 changed files with 581 additions and 291 deletions
346
js/lcm_main.js
346
js/lcm_main.js
|
|
@ -11,6 +11,9 @@ import { sendToJOSM, createJOSMEditLink } from './lcm_editor.js'
|
|||
|
||||
let geojsondata;
|
||||
let lastLatLng;
|
||||
let searchLocationMarker = null;
|
||||
|
||||
|
||||
|
||||
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
|
||||
// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
|
||||
|
|
@ -49,6 +52,164 @@ let display_higer_than_200kw = 'show';
|
|||
let display_chelou = 'show'; // les stations avec une valeur suspecte, plus de 400kW
|
||||
|
||||
|
||||
// Ajouter cette fonction avant searchLocation
|
||||
function moveToLocation(place) {
|
||||
const lat = parseFloat(place.lat);
|
||||
const lon = parseFloat(place.lon);
|
||||
|
||||
if (isNaN(lat) || isNaN(lon)) {
|
||||
console.error('Coordonnées invalides:', place);
|
||||
return;
|
||||
}
|
||||
|
||||
// Supprimer l'ancien marqueur s'il existe
|
||||
if (searchLocationMarker) {
|
||||
map.removeLayer(searchLocationMarker);
|
||||
}
|
||||
|
||||
// Créer un nouveau marqueur avec une icône personnalisée
|
||||
searchLocationMarker = L.marker([lat, lon], {
|
||||
icon: L.divIcon({
|
||||
className: 'search-location-marker',
|
||||
html: '📍',
|
||||
iconSize: [30, 30],
|
||||
iconAnchor: [15, 30]
|
||||
})
|
||||
});
|
||||
|
||||
// Ajouter un popup avec le nom du lieu
|
||||
const popupContent = `
|
||||
<strong>${place.display_name}</strong>
|
||||
${place.type ? `<br>Type: ${place.type}` : ''}
|
||||
${place.context ? `<br>${place.context}` : ''}
|
||||
`;
|
||||
searchLocationMarker.bindPopup(popupContent);
|
||||
|
||||
// Ajouter le marqueur à la carte
|
||||
searchLocationMarker.addTo(map);
|
||||
|
||||
// Centrer la carte sur le lieu
|
||||
map.setView([lat, lon], map.getZoom());
|
||||
|
||||
// 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
|
||||
function searchLocationWithAddok(searchText, mapCenter) {
|
||||
const baseUrl = 'https://demo.addok.xyz/search';
|
||||
const params = new URLSearchParams({
|
||||
q: searchText,
|
||||
limit: 10,
|
||||
lat: mapCenter.lat,
|
||||
lon: mapCenter.lng
|
||||
});
|
||||
|
||||
const url = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
return fetch(url)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur réseau lors de la recherche');
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (!data.features || data.features.length === 0) {
|
||||
throw new Error('Aucun résultat trouvé');
|
||||
}
|
||||
return data.features.map(feature => ({
|
||||
lat: feature.geometry.coordinates[1],
|
||||
lon: feature.geometry.coordinates[0],
|
||||
display_name: feature.properties.label,
|
||||
importance: feature.properties.score,
|
||||
context: feature.properties.context,
|
||||
type: feature.properties.type,
|
||||
city: feature.properties.city,
|
||||
distance: feature.properties.distance
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
// Modifier la fonction searchLocation
|
||||
function searchLocation() {
|
||||
const location = $('#searchLocation').val();
|
||||
if (!location) {
|
||||
alert('Veuillez entrer un lieu à rechercher.');
|
||||
return;
|
||||
}
|
||||
|
||||
const useAddok = $('#useAddok').is(':checked');
|
||||
const searchPromise = useAddok
|
||||
? searchLocationWithAddok(location, map.getCenter())
|
||||
: fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`)
|
||||
.then(response => response.json());
|
||||
|
||||
searchPromise
|
||||
.then(data => {
|
||||
const resultsDropdown = $('#searchResults');
|
||||
resultsDropdown.empty();
|
||||
|
||||
if (!data || data.length === 0) {
|
||||
alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
|
||||
resultsDropdown.hide();
|
||||
return;
|
||||
}
|
||||
|
||||
// Toujours sélectionner le premier résultat
|
||||
moveToLocation(data[0]);
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
resultsDropdown.before(closeButton);
|
||||
|
||||
data.forEach((place, index) => {
|
||||
let displayText = place.display_name;
|
||||
if (useAddok && place.distance) {
|
||||
displayText += ` (${Math.round(place.distance)}m)`;
|
||||
}
|
||||
|
||||
const option = $('<option></option>')
|
||||
.val(index)
|
||||
.text(displayText)
|
||||
.data('place', place);
|
||||
resultsDropdown.append(option);
|
||||
});
|
||||
resultsDropdown.show();
|
||||
closeButton.show();
|
||||
|
||||
// Sélectionner visuellement le premier résultat dans la liste
|
||||
resultsDropdown.val(0);
|
||||
} else {
|
||||
resultsDropdown.hide();
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur lors de la recherche du lieu :', error);
|
||||
alert('Erreur lors de la recherche du lieu : ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function setRandomView() {
|
||||
let randomCity = lcm_utils.cities[Math.floor(Math.random() * lcm_utils.cities.length)];
|
||||
map = map.setView(randomCity.coords, lcm_config.initialZoom);
|
||||
|
|
@ -104,10 +265,22 @@ let stamen =
|
|||
L.tileLayer(lcm_config.tileServers.stamen, {
|
||||
attribution: lcm_config.osmMention
|
||||
})
|
||||
|
||||
// Ajouter après les autres déclarations de tileLayer
|
||||
let bdortho = L.tileLayer('https://wxs.ign.fr/ortho/geoportail/wmts?' +
|
||||
'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ORTHOIMAGERY.ORTHOPHOTOS' +
|
||||
'&STYLE=normal&FORMAT=image/jpeg&TILEMATRIXSET=PM&' +
|
||||
'TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', {
|
||||
attribution: '© <a href="https://geoservices.ign.fr/bdortho">IGN-F/Géoportail</a>',
|
||||
maxZoom: 19
|
||||
});
|
||||
|
||||
// Modifier la définition de baseLayers pour inclure la BD ORTHO
|
||||
var baseLayers = {
|
||||
'Grey': tileGrey,
|
||||
'Stamen': stamen,
|
||||
'OpenStreetMap': osm,
|
||||
'BD ORTHO IGN': bdortho,
|
||||
// 'OpenCycleMap': cycle,
|
||||
'Transport': transport
|
||||
}
|
||||
|
|
@ -669,6 +842,7 @@ function onMapMoveEnd() {
|
|||
// Calculer la distance en km entre l'ancienne et la nouvelle position
|
||||
const distanceKm = map.distance(center, window.lastKnownPosition) / 1000;
|
||||
|
||||
console.log('déplacement de ', distanceKm, 'km')
|
||||
// Ne mettre à jour que si on s'est déplacé de plus de 2km
|
||||
if (distanceKm > 2) {
|
||||
window.lastKnownPosition = center;
|
||||
|
|
@ -679,7 +853,7 @@ function onMapMoveEnd() {
|
|||
// Ajout d'un log pour déboguer
|
||||
console.log("Zoom actuel:", map.getZoom());
|
||||
|
||||
if (map.getZoom() > 12) {
|
||||
if (map.getZoom() >= 12) {
|
||||
console.log("Recherche des issues Osmose...");
|
||||
searchOsmoseIssues(map);
|
||||
} else {
|
||||
|
|
@ -854,19 +1028,42 @@ const osmoseIcon = L.divIcon({
|
|||
iconAnchor: [15, 40]
|
||||
});
|
||||
|
||||
// Ajouter cette nouvelle fonction
|
||||
// Ajouter cette fonction utilitaire pour calculer la distance entre deux points
|
||||
function calculateDistance(lat1, lon1, lat2, lon2) {
|
||||
return L.latLng(lat1, lon1).distanceTo([lat2, lon2]);
|
||||
}
|
||||
|
||||
// Ajouter cette fonction pour vérifier si le calque des stations est actif
|
||||
function isChargingStationLayerActive() {
|
||||
return map.hasLayer(all_stations_markers);
|
||||
}
|
||||
|
||||
// Modifier la fonction searchOsmoseIssues
|
||||
function searchOsmoseIssues(map) {
|
||||
const bounds = map.getBounds();
|
||||
const zoom = map.getZoom();
|
||||
// Construction de la bbox avec l'ordre correct : ouest,sud,est,nord
|
||||
const bbox = `${bounds.getWest()}%2C${bounds.getSouth()}%2C${bounds.getEast()}%2C${bounds.getNorth()}`;
|
||||
|
||||
// URL formatée selon l'exemple fourni
|
||||
const url = `https://osmose.openstreetmap.fr/api/0.3/issues?zoom=${zoom}&item=8410%2C8411&level=1%2C2%2C3&limit=500&bbox=${bbox}`;
|
||||
|
||||
console.log("Recherche des issues Osmose (liste) avec l'URL :", url);
|
||||
osmose_markers.clearLayers();
|
||||
|
||||
// Modifier la vérification des stations existantes
|
||||
const existingStations = [];
|
||||
if (lcm_config.hide_osmose_markers_if_close_to_existing_charging_stations &&
|
||||
isChargingStationLayerActive() && // Nouvelle condition
|
||||
geojsondata &&
|
||||
geojsondata.features) {
|
||||
geojsondata.features.forEach(feature => {
|
||||
if (feature.geometry && feature.geometry.coordinates) {
|
||||
existingStations.push({
|
||||
lat: feature.geometry.coordinates[1],
|
||||
lon: feature.geometry.coordinates[0]
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
|
|
@ -883,22 +1080,27 @@ function searchOsmoseIssues(map) {
|
|||
console.log(`Nombre d'issues Osmose (liste) trouvées: ${issuesList.length}`);
|
||||
|
||||
issuesList.forEach(issueInfo => {
|
||||
// Vérifier si les coordonnées sont valides
|
||||
if (issueInfo.lat == null || issueInfo.lon == null) {
|
||||
console.warn("Issue Osmose sans coordonnées ignorée:", issueInfo);
|
||||
return; // Ignorer cette issue
|
||||
if (issueInfo.lat == null || issueInfo.lon == null || !issueInfo.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const lat = parseFloat(issueInfo.lat);
|
||||
const lon = parseFloat(issueInfo.lon);
|
||||
const issueId = issueInfo.id; // C'est l'UUID
|
||||
|
||||
// Vérifier si l'UUID est valide
|
||||
if (!issueId) {
|
||||
console.warn("Issue Osmose sans ID (UUID) ignorée:", issueInfo);
|
||||
return;
|
||||
// Vérifier la distance avec les stations existantes
|
||||
if (lcm_config.hide_osmose_markers_if_close_to_existing_charging_stations) {
|
||||
const tooClose = existingStations.some(station => {
|
||||
const distance = calculateDistance(lat, lon, station.lat, station.lon);
|
||||
return distance <= lcm_config.hide_osmose_markers_if_close_to_existing_charging_stations_distance;
|
||||
});
|
||||
|
||||
if (tooClose) {
|
||||
console.log(`Marqueur Osmose ignoré car trop proche d'une station existante: ${lat},${lon}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Créer le marqueur Osmose si il n'est pas trop proche d'une station existante
|
||||
const osmoseMarker = L.circle([lat, lon], {
|
||||
color: "purple",
|
||||
fillColor: "purple",
|
||||
|
|
@ -906,7 +1108,7 @@ function searchOsmoseIssues(map) {
|
|||
radius: 10,
|
||||
className: 'leaflet-osmose-layer',
|
||||
pane: 'markerPane',
|
||||
issueId: issueId
|
||||
issueId: issueInfo.id
|
||||
});
|
||||
|
||||
// Préparer une popup de chargement simple
|
||||
|
|
@ -916,8 +1118,7 @@ function searchOsmoseIssues(map) {
|
|||
const clickedMarker = e.target;
|
||||
const storedIssueId = clickedMarker.options.issueId;
|
||||
|
||||
// Afficher immédiatement la popup de chargement
|
||||
clickedMarker.openPopup();
|
||||
handleMarkerClick(clickedMarker, map); // Nouvelle gestion du clic
|
||||
|
||||
const detailUrl = `https://osmose.openstreetmap.fr/api/0.3/issue/${storedIssueId}?langs=auto`;
|
||||
console.log("Récupération des détails pour l'issue:", detailUrl);
|
||||
|
|
@ -978,9 +1179,39 @@ function searchOsmoseIssues(map) {
|
|||
});
|
||||
}
|
||||
|
||||
// Modifier la fonction init pour ajouter le nouveau calque
|
||||
function init() {
|
||||
// Modifier la gestion du clic sur les marqueurs Osmose
|
||||
function handleMarkerClick(marker, map) {
|
||||
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;
|
||||
|
||||
// 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
|
||||
]);
|
||||
|
||||
// Déplacer la carte avec une animation
|
||||
map.once('moveend', () => {
|
||||
marker.openPopup();
|
||||
});
|
||||
|
||||
map.panTo(targetLatLng, {
|
||||
animate: true,
|
||||
duration: 0.5
|
||||
});
|
||||
} else {
|
||||
marker.openPopup();
|
||||
}
|
||||
}
|
||||
|
||||
// Ajouter un écouteur d'événements pour le changement de visibilité des calques
|
||||
function init() {
|
||||
food_places_markers.addTo(map);
|
||||
$('#found_charging_stations').hide();
|
||||
|
||||
|
|
@ -991,8 +1222,18 @@ function init() {
|
|||
"Bornes potentielles (Osmose)": osmose_markers
|
||||
};
|
||||
|
||||
L.control.layers(null, overlayMaps).addTo(map);
|
||||
// Créer deux contrôles de couches séparés
|
||||
const baseLayerControl = L.control.layers(baseLayers, null, {
|
||||
collapsed: true,
|
||||
className: 'leaflet-control-layers base-layers',
|
||||
id: 'base-layers-control'
|
||||
}).addTo(map);
|
||||
|
||||
const overlayControl = L.control.layers(null, overlayMaps, {
|
||||
collapsed: true,
|
||||
className: 'leaflet-control-layers overlay-layers',
|
||||
id: 'overlay-layers-control'
|
||||
}).addTo(map);
|
||||
|
||||
$('#sendToJOSM').on('click', () => {
|
||||
sendToJOSM(map, geojsondata)
|
||||
|
|
@ -1025,9 +1266,25 @@ function init() {
|
|||
}
|
||||
});
|
||||
|
||||
document.getElementById('searchButton').addEventListener('click', searchLocation);
|
||||
|
||||
osmose_markers.addTo(map);
|
||||
|
||||
// Ajouter le contrôle de source de recherche
|
||||
const searchControl = `
|
||||
<div class="search-source-control">
|
||||
<label>
|
||||
<input type="checkbox" id="useAddok" checked>
|
||||
Utiliser Addok (France)
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
$('#searchLocation').after(searchControl);
|
||||
|
||||
// Mettre à jour les marqueurs Osmose quand la visibilité des stations change
|
||||
map.on('overlayremove overlayadd', function (e) {
|
||||
if (e.name === "Stations de recharge" && map.getZoom() > 12) {
|
||||
searchOsmoseIssues(map);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1045,51 +1302,6 @@ function copyCurrentUrl() {
|
|||
|
||||
|
||||
|
||||
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 = $('<option></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é
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue