tykayn/libre-charge-map
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

liens itinéraire

Browse Source
This commit is contained in:
Tykayn 2024-12-14 18:00:09 +01:00 committed by tykayn
parent e689f381ad
commit 8d9962f5a1
2 changed files with 106 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
js/main.js
View File

@ -17,48 +17,70 @@ let unknown_color = '#c0b1b1' // color for unknown power output of the station
// https://tile.openstreetmap.org/{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' // 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png' const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
const tileServer_stamen = 'https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png'
// Créer la carte centrée sur Rouen // Créer la carte centrée sur Rouen
// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques // Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
let cities = [ let cities = [
{ name: "Paris", coords: [48.8566, 2.3522] }, { name: 'Paris', coords: [48.8566, 2.3522] },
{ name: "Marseille", coords: [43.2965, 5.3698] }, { name: 'Marseille', coords: [43.2965, 5.3698] },
{ name: "Lyon", coords: [45.7640, 4.8357] }, { name: 'Lyon', coords: [45.7640, 4.8357] },
{ name: "Toulouse", coords: [43.6042, 1.4437] }, { name: 'Toulouse', coords: [43.6042, 1.4437] },
{ name: "Nice", coords: [43.7101, 7.2620] }, { name: 'Nice', coords: [43.7101, 7.2620] },
{ name: "Nantes", coords: [47.2184, -1.5536] }, { name: 'Nantes', coords: [47.2184, -1.5536] },
{ name: "Strasbourg", coords: [48.5831, 7.7521] }, { name: 'Strasbourg', coords: [48.5831, 7.7521] },
{ name: "Montpellier", coords: [43.6167, 3.8742] }, { name: 'Montpellier', coords: [43.6167, 3.8742] },
{ name: "Bordeaux", coords: [44.8378, -0.5792] }, { name: 'Bordeaux', coords: [44.8378, -0.5792] },
{ name: "Lille", coords: [50.6293, 3.1466] }, { name: 'Lille', coords: [50.6293, 3.1466] },
{ name: "Rennes", coords: [48.1120, -1.6823] }, { name: 'Rennes', coords: [48.1120, -1.6823] },
{ name: "Toulon", coords: [43.1230, 5.9291] }, { name: 'Toulon', coords: [43.1230, 5.9291] },
{ name: "Le Havre", coords: [49.4943, 0.1079] }, { name: 'Le Havre', coords: [49.4943, 0.1079] },
{ name: "Saint-Etienne", coords: [45.4380, 4.3841] }, { name: 'Saint-Etienne', coords: [45.4380, 4.3841] },
{ name: "Grenoble", coords: [45.1667, 5.7295] }, { name: 'Grenoble', coords: [45.1667, 5.7295] },
{ name: "Rouen", coords: [49.4431, 1.0820] }, { name: 'Rouen', coords: [49.4431, 1.0820] },
{ name: "Dijon", coords: [47.3221, 5.0446] }, { name: 'Dijon', coords: [47.3221, 5.0446] },
{ name: "Angers", coords: [47.4786, -0.5551] }, { name: 'Angers', coords: [47.4786, -0.5551] },
{ name: "Nîmes", coords: [43.8366, 4.3623] }, { name: 'Nîmes', coords: [43.8366, 4.3623] },
{ name: "Reims", coords: [49.2500, 4.0333] } { name: 'Reims', coords: [49.2500, 4.0333] }
]; ]
// Choix au hasard d'une ville parmi la liste // Choix au hasard d'une ville parmi la liste
let randomCity = cities[Math.floor(Math.random() * cities.length)]; let randomCity = cities[Math.floor(Math.random() * cities.length)]
console.log('randomCity', randomCity) console.log('randomCity', randomCity)
// Initialisation de la carte avec la vue centrée sur la ville choisie // Initialisation de la carte avec la vue centrée sur la ville choisie
let map = L.map('map').setView(randomCity.coords, initialZoom); let map = L.map('map').setView(randomCity.coords, initialZoom)
// var map = L.map('map').setView([49.4438, 1.0993], initialZoom) var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' + attribution: osmMention+'&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
// 'area(id:3600075628)->.searchArea;' + })
// 'node[amenity=charging_station](area.searchArea);' +
// 'out body geom;'
L.tileLayer(tileServer, { var cycle = L.tileLayer('https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', {
maxZoom: 21, attribution: osmMention+'&copy; <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
attribution: osmMention, })
}).addTo(map)
var transport = L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', {
attribution: osmMention
})
let tileGrey =
L.tileLayer(tileServer, {
attribution: osmMention
})
let stamen =
L.tileLayer(tileServer_stamen, {
attribution: osmMention
})
var baseLayers = {
'Grey': tileGrey,
'Stamen': stamen,
'OpenStreetMap': osm,
'OpenCycleMap': cycle,
'Transport': transport
}
let overlays = {} // Si vous avez des calques superposables, ajoutez-les ici
const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map)
let filteredMarkers = L.layerGroup().addTo(map) let filteredMarkers = L.layerGroup().addTo(map)
@ -110,17 +132,18 @@ const tags_to_display_in_popup = [
'authentication:app', 'authentication:app',
'authentication:debit_card', 'authentication:debit_card',
] ]
const margin_josm_bbox= 0.00001 const margin_josm_bbox = 0.00001
function createJOSMEditLink(feature) {
function createJOSMEditLink (feature) {
console.log('createJOSMEditLink feature', feature) console.log('createJOSMEditLink feature', feature)
var coordinates = feature.geometry.coordinates; var coordinates = feature.geometry.coordinates
var nodeId = feature.properties.id; var nodeId = feature.properties.id
var left = coordinates[0] - margin_josm_bbox; var left = coordinates[0] - margin_josm_bbox
var right = coordinates[0] + margin_josm_bbox; var right = coordinates[0] + margin_josm_bbox
var bottom = coordinates[1] - margin_josm_bbox; var bottom = coordinates[1] - margin_josm_bbox
var top = coordinates[1] + margin_josm_bbox; var top = coordinates[1] + margin_josm_bbox
var josmUrl = `http://127.0.0.1:8111/load_and_zoom?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}`; var josmUrl = `http://127.0.0.1:8111/load_and_zoom?changeset_hashtags=IRVE&layer_name=irve-depuis-OSM&left=${left}&top=${top}&right=${right}&bottom=${bottom}&select=${nodeId}`
return josmUrl; return josmUrl
} }
function supprimerMarqueurs (map) { function supprimerMarqueurs (map) {
@ -314,21 +337,23 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo,
$('#bars_power').html(bar_powers) $('#bars_power').html(bar_powers)
} }
let geojsondata; let geojsondata
function bindEventsOnJosmRemote () { function bindEventsOnJosmRemote () {
let josm_remote_buttons = $(`.josm`) let josm_remote_buttons = $(`.josm`)
console.log('josm_remote_buttons',josm_remote_buttons[0]) console.log('josm_remote_buttons', josm_remote_buttons[0])
$(josm_remote_buttons[0]).on('click',()=>{ $(josm_remote_buttons[0]).on('click', () => {
console.log('link', josm_remote_buttons[0]) console.log('link', josm_remote_buttons[0])
let josm_link = $(josm_remote_buttons[0]).attr('data-href') let josm_link = $(josm_remote_buttons[0]).attr('data-href')
console.log('lancer la télécommande josm', josm_link) console.log('lancer la télécommande josm', josm_link)
$.get(josm_link, (res)=>{ $.get(josm_link, (res) => {
console.log('res', res) console.log('res', res)
}) })
}) })
} }
const ratio_circle = 0.9 const ratio_circle = 0.9
function displayPointsFromApi (points) { function displayPointsFromApi (points) {
geojsondata = osmtogeojson(points) geojsondata = osmtogeojson(points)
@ -354,7 +379,7 @@ function displayPointsFromApi (points) {
} }
return true return true
}, },
onmoveend: function(event){ onmoveend: function (event) {
console.log('déplacement terminé') console.log('déplacement terminé')
}, },
onzoomend: function (event) { onzoomend: function (event) {
@ -390,7 +415,9 @@ function displayPointsFromApi (points) {
} }
let link_josm = createJOSMEditLink(feature) let link_josm = createJOSMEditLink(feature)
console.log('link_josm', link_josm) console.log('link_josm', link_josm)
let html = `itinéraire <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"> 🚗</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">🚴‍♀️</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">👠</a> // boutons d'itinéraire
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>` <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 radius = 20 let radius = 20
@ -433,7 +460,6 @@ function displayPointsFromApi (points) {
// link josm buttons to get request // link josm buttons to get request
} }
function makeCssClassFromTags (tags) { function makeCssClassFromTags (tags) {
@ -471,9 +497,9 @@ $('#query-button').on('click', function () {
function toggleMinPower (showHighPower) { function toggleMinPower (showHighPower) {
console.log('toggle', showHighPower) console.log('toggle', showHighPower)
showHighPower = !showHighPower; showHighPower = !showHighPower
addFilteredMarkers(showHighPower); addFilteredMarkers(showHighPower)
this.textContent = showHighPower ? "Montrer puissance haute" : "Montrer puissance normale"; this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'
} }
function addFilteredMarkers (showHighPower) { function addFilteredMarkers (showHighPower) {
@ -515,19 +541,19 @@ $('#spinning_icon').hide()
$('#message-loading').hide() $('#message-loading').hide()
function onMapMoveEnd () { function onMapMoveEnd () {
let center = map.getCenter(); let center = map.getCenter()
let zoom = map.getZoom(); let zoom = map.getZoom()
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}` let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
if (zoom > 10) { if (zoom > 10) {
loadOverpassQuery() loadOverpassQuery()
}else{ } else {
infos += "(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)" infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)'
} }
$("#infos_carte").html(infos); $('#infos_carte').html(infos)
} }
map.on('moveend', onMapMoveEnd); map.on('moveend', onMapMoveEnd)
$(document).ready(function() { $(document).ready(function () {
bindEventsOnJosmRemote(); bindEventsOnJosmRemote()
onMapMoveEnd() onMapMoveEnd()
}); })

26
styles/style.css
View File

@ -61,8 +61,8 @@ h2 {
#overpass-api-controls { #overpass-api-controls {
position: fixed; position: fixed;
top: 0; top: -0.5rem;
right: 1em; left: 4em;
padding: 10px; padding: 10px;
background-color: transparent; background-color: transparent;
border: 0; border: 0;
@ -93,6 +93,21 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
border: solid 1px #497cd3ff; border: solid 1px #497cd3ff;
float: right; float: right;
} }
#query-button{
min-width: 10em;
}
.navigation-link{
background: white;
border-radius: 0.25em;
float:none;
position:relative;
top: 5.5em;
left: 0;
}
.navigation-link:hover{
border: black;
background: #96b1ea;
}
#query-button:hover, #query-button:hover,
.edit-button:hover { .edit-button:hover {
@ -106,9 +121,6 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
} }
#query-button {
min-width: 10em;
}
.pull-left { .pull-left {
float: left; float: left;
@ -143,8 +155,8 @@ a {
#spinning_icon svg { #spinning_icon svg {
position: fixed; position: fixed;
top: 1.5rem; top: 0.5rem;
left: 0.8rem; right: 3rem;
background: white; background: white;
border-radius: 100%; border-radius: 100%;
width: 3rem; width: 3rem;