liens itinéraire
This commit is contained in:
parent
e689f381ad
commit
8d9962f5a1
148
js/main.js
148
js/main.js
@ -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://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
|
||||
// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
|
||||
let cities = [
|
||||
{ name: "Paris", coords: [48.8566, 2.3522] },
|
||||
{ name: "Marseille", coords: [43.2965, 5.3698] },
|
||||
{ name: "Lyon", coords: [45.7640, 4.8357] },
|
||||
{ name: "Toulouse", coords: [43.6042, 1.4437] },
|
||||
{ name: "Nice", coords: [43.7101, 7.2620] },
|
||||
{ name: "Nantes", coords: [47.2184, -1.5536] },
|
||||
{ name: "Strasbourg", coords: [48.5831, 7.7521] },
|
||||
{ name: "Montpellier", coords: [43.6167, 3.8742] },
|
||||
{ name: "Bordeaux", coords: [44.8378, -0.5792] },
|
||||
{ name: "Lille", coords: [50.6293, 3.1466] },
|
||||
{ name: "Rennes", coords: [48.1120, -1.6823] },
|
||||
{ name: "Toulon", coords: [43.1230, 5.9291] },
|
||||
{ name: "Le Havre", coords: [49.4943, 0.1079] },
|
||||
{ name: "Saint-Etienne", coords: [45.4380, 4.3841] },
|
||||
{ name: "Grenoble", coords: [45.1667, 5.7295] },
|
||||
{ name: "Rouen", coords: [49.4431, 1.0820] },
|
||||
{ name: "Dijon", coords: [47.3221, 5.0446] },
|
||||
{ name: "Angers", coords: [47.4786, -0.5551] },
|
||||
{ name: "Nîmes", coords: [43.8366, 4.3623] },
|
||||
{ name: "Reims", coords: [49.2500, 4.0333] }
|
||||
];
|
||||
{ name: 'Paris', coords: [48.8566, 2.3522] },
|
||||
{ name: 'Marseille', coords: [43.2965, 5.3698] },
|
||||
{ name: 'Lyon', coords: [45.7640, 4.8357] },
|
||||
{ name: 'Toulouse', coords: [43.6042, 1.4437] },
|
||||
{ name: 'Nice', coords: [43.7101, 7.2620] },
|
||||
{ name: 'Nantes', coords: [47.2184, -1.5536] },
|
||||
{ name: 'Strasbourg', coords: [48.5831, 7.7521] },
|
||||
{ name: 'Montpellier', coords: [43.6167, 3.8742] },
|
||||
{ name: 'Bordeaux', coords: [44.8378, -0.5792] },
|
||||
{ name: 'Lille', coords: [50.6293, 3.1466] },
|
||||
{ name: 'Rennes', coords: [48.1120, -1.6823] },
|
||||
{ name: 'Toulon', coords: [43.1230, 5.9291] },
|
||||
{ name: 'Le Havre', coords: [49.4943, 0.1079] },
|
||||
{ name: 'Saint-Etienne', coords: [45.4380, 4.3841] },
|
||||
{ name: 'Grenoble', coords: [45.1667, 5.7295] },
|
||||
{ name: 'Rouen', coords: [49.4431, 1.0820] },
|
||||
{ name: 'Dijon', coords: [47.3221, 5.0446] },
|
||||
{ name: 'Angers', coords: [47.4786, -0.5551] },
|
||||
{ name: 'Nîmes', coords: [43.8366, 4.3623] },
|
||||
{ name: 'Reims', coords: [49.2500, 4.0333] }
|
||||
]
|
||||
|
||||
// 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)
|
||||
// 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)
|
||||
// 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' +
|
||||
// 'area(id:3600075628)->.searchArea;' +
|
||||
// 'node[amenity=charging_station](area.searchArea);' +
|
||||
// 'out body geom;'
|
||||
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: osmMention+'© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
||||
})
|
||||
|
||||
L.tileLayer(tileServer, {
|
||||
maxZoom: 21,
|
||||
attribution: osmMention,
|
||||
}).addTo(map)
|
||||
var cycle = L.tileLayer('https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', {
|
||||
attribution: osmMention+'© <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
@ -110,17 +132,18 @@ const tags_to_display_in_popup = [
|
||||
'authentication:app',
|
||||
'authentication:debit_card',
|
||||
]
|
||||
const margin_josm_bbox= 0.00001
|
||||
function createJOSMEditLink(feature) {
|
||||
const margin_josm_bbox = 0.00001
|
||||
|
||||
function createJOSMEditLink (feature) {
|
||||
console.log('createJOSMEditLink feature', feature)
|
||||
var coordinates = feature.geometry.coordinates;
|
||||
var nodeId = feature.properties.id;
|
||||
var left = coordinates[0] - margin_josm_bbox;
|
||||
var right = coordinates[0] + margin_josm_bbox;
|
||||
var bottom = 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}`;
|
||||
return josmUrl;
|
||||
var coordinates = feature.geometry.coordinates
|
||||
var nodeId = feature.properties.id
|
||||
var left = coordinates[0] - margin_josm_bbox
|
||||
var right = coordinates[0] + margin_josm_bbox
|
||||
var bottom = 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}`
|
||||
return josmUrl
|
||||
}
|
||||
|
||||
function supprimerMarqueurs (map) {
|
||||
@ -314,21 +337,23 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo,
|
||||
$('#bars_power').html(bar_powers)
|
||||
}
|
||||
|
||||
let geojsondata;
|
||||
let geojsondata
|
||||
|
||||
function bindEventsOnJosmRemote () {
|
||||
let josm_remote_buttons = $(`.josm`)
|
||||
console.log('josm_remote_buttons',josm_remote_buttons[0])
|
||||
$(josm_remote_buttons[0]).on('click',()=>{
|
||||
console.log('josm_remote_buttons', josm_remote_buttons[0])
|
||||
$(josm_remote_buttons[0]).on('click', () => {
|
||||
console.log('link', josm_remote_buttons[0])
|
||||
let josm_link = $(josm_remote_buttons[0]).attr('data-href')
|
||||
console.log('lancer la télécommande josm', josm_link)
|
||||
$.get(josm_link, (res)=>{
|
||||
$.get(josm_link, (res) => {
|
||||
console.log('res', res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const ratio_circle = 0.9
|
||||
|
||||
function displayPointsFromApi (points) {
|
||||
|
||||
geojsondata = osmtogeojson(points)
|
||||
@ -354,7 +379,7 @@ function displayPointsFromApi (points) {
|
||||
}
|
||||
return true
|
||||
},
|
||||
onmoveend: function(event){
|
||||
onmoveend: function (event) {
|
||||
console.log('déplacement terminé')
|
||||
},
|
||||
onzoomend: function (event) {
|
||||
@ -390,7 +415,9 @@ function displayPointsFromApi (points) {
|
||||
}
|
||||
let link_josm = createJOSMEditLink(feature)
|
||||
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>`
|
||||
|
||||
let radius = 20
|
||||
@ -433,7 +460,6 @@ function displayPointsFromApi (points) {
|
||||
|
||||
// link josm buttons to get request
|
||||
|
||||
|
||||
}
|
||||
|
||||
function makeCssClassFromTags (tags) {
|
||||
@ -471,9 +497,9 @@ $('#query-button').on('click', function () {
|
||||
|
||||
function toggleMinPower (showHighPower) {
|
||||
console.log('toggle', showHighPower)
|
||||
showHighPower = !showHighPower;
|
||||
addFilteredMarkers(showHighPower);
|
||||
this.textContent = showHighPower ? "Montrer puissance haute" : "Montrer puissance normale";
|
||||
showHighPower = !showHighPower
|
||||
addFilteredMarkers(showHighPower)
|
||||
this.textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'
|
||||
}
|
||||
|
||||
function addFilteredMarkers (showHighPower) {
|
||||
@ -515,19 +541,19 @@ $('#spinning_icon').hide()
|
||||
$('#message-loading').hide()
|
||||
|
||||
function onMapMoveEnd () {
|
||||
let center = map.getCenter();
|
||||
let zoom = map.getZoom();
|
||||
let center = map.getCenter()
|
||||
let zoom = map.getZoom()
|
||||
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
|
||||
if (zoom > 10) {
|
||||
loadOverpassQuery()
|
||||
}else{
|
||||
infos += "(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)"
|
||||
} else {
|
||||
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);
|
||||
$(document).ready(function() {
|
||||
bindEventsOnJosmRemote();
|
||||
map.on('moveend', onMapMoveEnd)
|
||||
$(document).ready(function () {
|
||||
bindEventsOnJosmRemote()
|
||||
onMapMoveEnd()
|
||||
});
|
||||
})
|
||||
|
||||
@ -61,8 +61,8 @@ h2 {
|
||||
|
||||
#overpass-api-controls {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 1em;
|
||||
top: -0.5rem;
|
||||
left: 4em;
|
||||
padding: 10px;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@ -93,6 +93,21 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
|
||||
border: solid 1px #497cd3ff;
|
||||
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,
|
||||
.edit-button:hover {
|
||||
@ -106,9 +121,6 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
|
||||
|
||||
}
|
||||
|
||||
#query-button {
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
@ -143,8 +155,8 @@ a {
|
||||
|
||||
#spinning_icon svg {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: 0.8rem;
|
||||
top: 0.5rem;
|
||||
right: 3rem;
|
||||
background: white;
|
||||
border-radius: 100%;
|
||||
width: 3rem;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user