2024-12-11 17:32:48 +01:00
/ * *
* rechercher les bornes de recharge ,
* afficher des cercles colorés selon la puissance max de la station
* lister les bornes trouvées dans la page
* @ type { boolean }
* /
2024-12-17 11:53:02 +01:00
import config from './config.js'
import utils from './utils.js'
2024-12-18 13:40:58 +01:00
import colorUtils from './color-utils.js'
2024-12-11 23:13:15 +01:00
2024-12-17 11:53:02 +01:00
console . log ( 'config' , config )
2024-12-18 13:40:58 +01:00
let geojsondata
2024-10-17 15:01:47 +02:00
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
// https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
2024-10-18 00:47:01 +02:00
// https://tile.openstreetmap.org/{z}/{x}/{y}.png
// 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
2024-10-17 15:01:47 +02:00
const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
2024-12-14 18:08:00 +01:00
const tileServer _stamen = 'https://a.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
2024-10-17 15:01:47 +02:00
// Créer la carte centrée sur Rouen
2024-12-14 17:39:17 +01:00
// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
2024-12-17 11:53:02 +01:00
2024-12-14 17:39:17 +01:00
// Initialisation de la carte avec la vue centrée sur la ville choisie
2024-12-18 13:40:58 +01:00
let map = L . map ( 'map' )
L . control . scale ( ) . addTo ( map )
2024-12-16 12:54:15 +01:00
2024-12-18 13:40:58 +01:00
function setRandomView ( ) {
2024-12-16 12:54:15 +01:00
console . log ( 'set random view' )
// Choix au hasard d'une ville parmi la liste
2024-12-17 11:53:02 +01:00
let randomCity = utils . cities [ Math . floor ( Math . random ( ) * utils . cities . length ) ]
2024-12-16 12:54:15 +01:00
console . log ( 'randomCity' , randomCity )
2024-12-17 11:53:02 +01:00
map = map . setView ( randomCity . coords , config . initialZoom )
2024-12-16 12:54:15 +01:00
}
2024-12-18 13:40:58 +01:00
function setCoordinatesOfLeafletMapFromQueryParameters ( ) {
2024-12-16 12:54:15 +01:00
// Récupère les paramètres de l'URL
2024-12-17 12:17:33 +01:00
// console.log('window.location', window.location.href, window)
2024-12-18 13:40:58 +01:00
const urlParams = new URLSearchParams ( window . location . href )
2024-12-16 12:54:15 +01:00
2024-12-17 12:17:33 +01:00
// console.log('urlParams', urlParams)
2024-12-16 12:54:15 +01:00
// Récupère les coordonnées et le zoom à partir des paramètres de l'URL
2024-12-18 13:40:58 +01:00
const lat = urlParams . get ( 'lat' )
const lng = urlParams . get ( 'lng' )
const zoom = urlParams . get ( 'zoom' )
2024-12-16 12:54:15 +01:00
2024-12-17 12:17:33 +01:00
// console.log('lat,lng,zoom', lat, lng, zoom) // Vérifie si les paramètres sont présents et valides
2024-12-16 12:54:15 +01:00
if ( lat && lng && zoom ) {
// Initialise la carte avec les coordonnées et le zoom récupérés
2024-12-18 13:40:58 +01:00
map = map . setView ( [ lat , lng ] , zoom )
2024-12-16 12:54:15 +01:00
} else {
// Affiche une erreur si les paramètres sont absents ou invalides
2024-12-18 13:40:58 +01:00
console . error ( 'Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.' )
2024-12-16 12:54:15 +01:00
setRandomView ( )
}
}
2024-12-18 13:40:58 +01:00
function updateURLWithMapCoordinatesAndZoom ( ) {
2024-12-16 12:54:15 +01:00
// Récupère les coordonnées et le niveau de zoom de la carte
2024-12-18 13:40:58 +01:00
const center = map . getCenter ( )
const zoom = map . getZoom ( )
2024-12-16 12:54:15 +01:00
// Construit l'URL avec les paramètres de coordonnées et de zoom
2024-12-18 13:40:58 +01:00
const url = ` #coords=1&lat= ${ center . lat } &lng= ${ center . lng } &zoom= ${ zoom } `
2024-12-17 11:53:02 +01:00
// console.log('updateURLWithMapCoordinatesAndZoom url', url)
2024-12-16 12:54:15 +01:00
// Met à jour l'URL de la page
2024-12-18 13:40:58 +01:00
history . replaceState ( null , null , url )
2024-12-16 12:54:15 +01:00
}
2024-12-14 18:00:09 +01:00
var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
2024-12-18 13:40:58 +01:00
attribution : config . osmMention + '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
2024-12-14 18:00:09 +01:00
} )
var cycle = L . tileLayer ( 'https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png' , {
2024-12-18 13:40:58 +01:00
attribution : config . osmMention + '© <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
2024-12-14 18:00:09 +01:00
} )
var transport = L . tileLayer ( 'https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png' , {
2024-12-18 13:40:58 +01:00
attribution : config . osmMention
2024-12-14 18:00:09 +01:00
} )
let tileGrey =
L . tileLayer ( tileServer , {
2024-12-18 13:40:58 +01:00
attribution : config . osmMention
2024-12-14 18:00:09 +01:00
} )
let stamen =
L . tileLayer ( tileServer _stamen , {
2024-12-18 13:40:58 +01:00
attribution : config . osmMention
2024-12-14 18:00:09 +01:00
} )
var baseLayers = {
'Grey' : tileGrey ,
'Stamen' : stamen ,
'OpenStreetMap' : osm ,
2024-12-14 18:08:00 +01:00
// 'OpenCycleMap': cycle,
2024-12-14 18:00:09 +01:00
'Transport' : transport
}
2024-12-14 17:39:17 +01:00
2024-12-18 13:40:58 +01:00
let stations _bof = 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 , stations _much _speed _wow } // Si vous avez des calques superposables, ajoutez-les ici
2024-10-17 15:01:47 +02:00
2024-12-14 18:00:09 +01:00
const layerControl = L . control . layers ( baseLayers , overlays , { collapsed : true } ) . addTo ( map )
2024-12-14 18:08:00 +01:00
tileGrey . addTo ( map )
2024-12-11 23:13:15 +01:00
2024-10-17 15:01:47 +02:00
function buildOverpassApiUrl ( map , overpassQuery ) {
2024-12-12 00:27:27 +01:00
let baseUrl = 'https://overpass-api.de/api/interpreter'
let bounds = map . getBounds ( ) . getSouth ( ) + ',' + map . getBounds ( ) . getWest ( ) + ',' + map . getBounds ( ) . getNorth ( ) + ',' + map . getBounds ( ) . getEast ( )
let resultUrl , query = ''
2024-10-17 15:01:47 +02:00
2024-12-17 11:53:02 +01:00
if ( config . overrideQuery ) {
2024-10-17 15:01:47 +02:00
query = ` ?data=[out:json][timeout:15];(
2024-12-11 17:32:48 +01:00
node [ amenity = charging _station ] ( $ { bounds } ) ;
) ; out body geom ; `
2024-10-17 15:01:47 +02:00
} else {
2024-12-12 00:27:27 +01:00
let nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');'
let wayQuery = 'way[' + overpassQuery + '](' + bounds + ');'
let relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');'
2024-10-17 15:01:47 +02:00
query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;'
}
resultUrl = baseUrl + query
return resultUrl
}
2024-10-18 00:47:01 +02:00
const tags _to _display _in _popup = [
'name' ,
'capacity' ,
'date_start' ,
2024-10-17 15:01:47 +02:00
'charging_station:output' ,
2024-10-18 00:47:01 +02:00
'socket:type_2' ,
'socket:type2:output' ,
2024-10-17 15:01:47 +02:00
'socket:typee' ,
2024-10-18 00:47:01 +02:00
'socket:typee:output' ,
2024-10-17 15:01:47 +02:00
'socket:type2_combo' ,
2024-10-18 00:47:01 +02:00
'socket:type2_combo:output' ,
2024-10-17 15:01:47 +02:00
'socket:chademo' ,
'operator' , 'ref:EU:EVSE' ,
2024-10-18 00:33:25 +02:00
'network' ,
2024-10-18 00:47:01 +02:00
'opening_hours' ,
2024-10-17 15:01:47 +02:00
'contact' ,
2024-10-18 00:47:01 +02:00
'phone' ,
'contact:phone' ,
'website' ,
'contact:website' ,
'ref' ,
'fee' ,
'payment' ,
'payment:contactless' ,
'authentication:app' ,
'authentication:debit_card' ,
]
2024-12-14 18:00:09 +01:00
const margin _josm _bbox = 0.00001
function createJOSMEditLink ( 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
2024-12-12 00:27:27 +01:00
}
2024-10-17 15:01:47 +02:00
2024-10-18 00:33:25 +02:00
function supprimerMarqueurs ( map ) {
map . eachLayer ( ( layer ) => {
if ( layer instanceof L . Marker ) {
layer . remove ( )
}
} )
}
2024-12-11 23:13:15 +01:00
let coef _reduction _bars = 0.8
2024-10-17 15:01:47 +02:00
2024-12-11 23:13:15 +01:00
function calculerPourcentage ( partie , total , reduc ) {
if ( total === 0 ) {
return 'Division par zéro impossible'
}
let coef _reduction = 1
if ( reduc ) {
coef _reduction = coef _reduction _bars
}
return ( ( partie / total ) * 100 * coef _reduction ) . toFixed ( 1 )
}
function displayStatsFromGeoJson ( resultAsGeojson ) {
let count = resultAsGeojson . features . length
let count _station _output = 0
let count _ref _eu = 0
let output _more _than _300 = 0
let output _more _than _200 = 0
let output _more _than _100 = 0
let output _more _than _50 = 0
let count _station _outputoutput _between _1 _and _50 = 0
let count _output _unknown = 0
let count _estimated _type2combo = 0
let count _found _type2combo = 0
let count _found _type2 = 0
resultAsGeojson . features . map ( feature => {
let found _type2 _combo = false
// trouver si les tags présentent un type combo
let found _type2 = false
// trouver si les tags présentent un type 2
let keys _of _object = Object . keys ( feature . properties . tags )
keys _of _object . map ( tagKey => {
// console.log('tagKey', tagKey)
if ( tagKey . indexOf ( 'type2_combo' ) !== - 1 ) {
found _type2 _combo = true
2024-12-16 12:13:19 +01:00
// console.log('tagkey trouvé combo', tagKey)
2024-12-11 17:32:48 +01:00
}
2024-12-11 23:13:15 +01:00
if ( tagKey . indexOf ( 'type2' ) !== - 1 ) {
found _type2 = true
2024-12-11 17:32:48 +01:00
}
} )
2024-12-17 11:53:02 +01:00
let outputPower = utils . guessOutputPowerFromFeature ( feature )
2024-12-11 23:13:15 +01:00
if ( found _type2 _combo ) {
count _found _type2combo ++
}
if ( found _type2 ) {
count _found _type2 ++
}
if ( outputPower == 0 ) {
count _output _unknown ++
}
if ( outputPower >= 200 && ! found _type2 _combo ) {
/ * *
* si on trouve une puissance supérieure à 200 kW on peut partir du principe que la station dispose d ' une prise type _2 _combo à minima
* /
count _estimated _type2combo ++
}
if ( outputPower > 0 && outputPower < 50 ) {
count _station _outputoutput _between _1 _and _50 ++
}
if ( outputPower >= 50 && outputPower < 100 ) {
output _more _than _50 ++
} else if ( outputPower >= 100 && outputPower < 200 ) {
output _more _than _100 ++
} else if ( outputPower >= 200 && outputPower < 300 ) {
output _more _than _200 ++
} else if ( outputPower >= 300 ) {
feature . properties . puissance _haute = true
output _more _than _300 ++
}
if ( feature . properties . tags [ 'charging_station:output' ] ) {
count _station _output ++
}
if ( feature . properties . tags [ 'ref:EU:EVSE' ] ) {
count _ref _eu ++
}
} )
let bar _powers = ` <div class="bars-container">
< div class = "bar color-unknown" style = "width: ${calculerPourcentage(count_output_unknown, count, true)}%" > $ { count _output _unknown } < / d i v >
< div class = "bar color-power-lesser-than-50" style = "width: ${calculerPourcentage(count_station_outputoutput_between_1_and_50, count, true)}%" > $ { count _station _outputoutput _between _1 _and _50 } < / d i v >
< div class = "bar color-power-lesser-than-100" style = "width: ${calculerPourcentage(output_more_than_50, count, true)}%" > $ { output _more _than _50 } < / d i v >
< div class = "bar color-power-lesser-than-200" style = "width: ${calculerPourcentage(output_more_than_100, count, true)}%" > $ { output _more _than _100 } < / d i v >
< div class = "bar color-power-lesser-than-300" style = "width: ${calculerPourcentage(output_more_than_200, count, true)}%" > $ { output _more _than _200 } < / d i v >
< div class = "bar color-power-lesser-than-max" style = "width: ${calculerPourcentage(output_more_than_300, count, true)}%" > $ { output _more _than _300 } < / d i v >
< / d i v >
`
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/ >
$ { count _ref _eu } ( $ { calculerPourcentage ( count _ref _eu , count ) } % ) ont une référence européenne < i > ref : EU : EVSE < /i>. <br/ >
$ { count _output _unknown } ( $ { calculerPourcentage ( count _output _unknown , count ) } % ) ont une puissance max inconnue < i > * output * < /i>. <br/ >
$ { output _more _than _300 } ( $ { calculerPourcentage ( output _more _than _300 , count ) } % ) ont une puissance max supérieure à 300 kW < i > * output * < /i>. <br/ >
$ { output _more _than _200 } ( $ { calculerPourcentage ( output _more _than _200 , count ) } % ) ont une puissance max supérieure à 200 kW < i > * output * < /i>. <br/ >
$ { output _more _than _100 } ( $ { calculerPourcentage ( output _more _than _100 , count ) } % ) ont une puissance max supérieure à 100 kW < i > * output * < /i>. <br/ >
$ { output _more _than _50 } ( $ { calculerPourcentage ( output _more _than _50 , count ) } % ) ont une puissance max supérieure à 50 kW < i > * output * < /i>. <br/ >
$ { 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/ >
< / d i v > `
$ ( '#found_charging_stations' ) . html ( stats _content )
$ ( '#bars_power' ) . html ( bar _powers )
}
2024-12-11 17:32:48 +01:00
2024-12-12 00:27:27 +01:00
function bindEventsOnJosmRemote ( ) {
let josm _remote _buttons = $ ( ` .josm ` )
2024-12-16 12:13:19 +01:00
// console.log('josm_remote_buttons', josm_remote_buttons[0])
2024-12-14 18:00:09 +01:00
$ ( josm _remote _buttons [ 0 ] ) . on ( 'click' , ( ) => {
2024-12-16 12:13:19 +01:00
// console.log('link', josm_remote_buttons[0])
2024-12-12 00:27:27 +01:00
let josm _link = $ ( josm _remote _buttons [ 0 ] ) . attr ( 'data-href' )
2024-12-16 12:13:19 +01:00
// console.log('lancer la télécommande josm', josm_link)
2024-12-14 18:00:09 +01:00
$ . get ( josm _link , ( res ) => {
2024-12-12 00:27:27 +01:00
console . log ( 'res' , res )
} )
} )
}
2024-12-14 18:00:09 +01:00
2024-12-12 09:50:54 +01:00
const ratio _circle = 0.9
2024-12-14 18:00:09 +01:00
2024-12-11 23:13:15 +01:00
function displayPointsFromApi ( points ) {
geojsondata = osmtogeojson ( points )
2024-12-16 12:13:19 +01:00
// console.log('resultAsGeojson', geojsondata)
2024-12-11 17:32:48 +01:00
2024-12-11 23:13:15 +01:00
displayStatsFromGeoJson ( geojsondata )
2024-12-12 00:27:27 +01:00
let resultLayer = L . geoJson ( geojsondata , {
2024-10-17 15:01:47 +02:00
style : function ( feature ) {
return { color : '#f00' }
} ,
2024-12-11 23:13:15 +01:00
/ * *
* enlever les polygones , ne garder que les points
* @ param feature
* @ param layer
* @ returns { boolean }
* /
2024-10-17 15:01:47 +02:00
filter : function ( feature , layer ) {
2024-12-12 00:27:27 +01:00
let isPolygon = ( feature . geometry ) && ( feature . geometry . type !== undefined ) && ( feature . geometry . type === 'Polygon' )
2024-10-17 15:01:47 +02:00
if ( isPolygon ) {
feature . geometry . type = 'Point'
2024-12-12 00:27:27 +01:00
let polygonCenter = L . latLngBounds ( feature . geometry . coordinates [ 0 ] ) . getCenter ( )
2024-10-17 15:01:47 +02:00
feature . geometry . coordinates = [ polygonCenter . lat , polygonCenter . lng ]
}
return true
} ,
2024-12-14 18:00:09 +01:00
onmoveend : function ( event ) {
2024-12-16 12:13:19 +01:00
// console.log('déplacement terminé')
2024-12-12 00:27:27 +01:00
} ,
2024-10-17 15:01:47 +02:00
onzoomend : function ( event ) {
2024-12-16 12:13:19 +01:00
// console.log('event', event)
2024-10-17 15:01:47 +02:00
} ,
onEachFeature : function ( feature , layer ) {
2024-12-11 23:13:15 +01:00
let popupContent = ''
2024-12-16 12:13:19 +01:00
2024-12-18 13:40:58 +01:00
popupContent += '<div class="sockets-list" >'
2024-12-16 12:13:19 +01:00
let type2 = feature . properties . tags [ 'socket:type2' ]
let type2 _combo = feature . properties . tags [ 'socket:type2_combo' ]
2024-12-18 13:40:58 +01:00
if ( type2 ) {
popupContent += ' <img class="icon-img" src="img/Type2_socket.svg" alt="prise de type 2">'
if ( type2 !== 'yes' ) {
popupContent += '<span class="socket-counter">x ' + type2 + '</span>'
2024-12-16 12:13:19 +01:00
}
}
2024-12-18 13:40:58 +01:00
if ( feature . properties . tags [ 'socket:type2_combo' ] ) {
2024-12-16 12:13:19 +01:00
2024-12-18 13:40:58 +01:00
popupContent += ' <img class="icon-img" src="img/type2_combo.svg" alt="prise de type 2 combo CCS">'
if ( type2 _combo !== 'yes' ) {
popupContent += '<span class="socket-counter">x ' + type2 _combo + '</span>'
2024-12-16 12:13:19 +01:00
}
}
2024-12-18 13:40:58 +01:00
popupContent += '</div>'
popupContent += '<div class="key-values" >'
2024-10-17 15:01:47 +02:00
// ne montrer que certains champs dans la popup
tags _to _display _in _popup . forEach ( function ( key ) {
if ( tags _to _display _in _popup . indexOf ( key ) ) {
let value = feature . properties . tags [ key ]
if ( value ) {
2024-12-11 17:32:48 +01:00
if ( value . indexOf ( 'http' ) !== - 1 ) {
value = '<a href="' + value + '">' + value + '</a>'
2024-11-26 21:31:43 +01:00
}
popupContent = popupContent + '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
2024-10-17 15:01:47 +02:00
}
}
} )
2024-12-18 13:40:58 +01:00
popupContent += '</div>'
2024-10-17 15:01:47 +02:00
layer . bindPopup ( popupContent )
2024-12-17 11:53:02 +01:00
let outPowerGuessed = utils . guessOutputPowerFromFeature ( feature )
let color = colorUtils . getColor ( feature )
2024-12-11 17:32:48 +01:00
let displayOutPowerGuessed = '? kW'
if ( outPowerGuessed ) {
displayOutPowerGuessed = outPowerGuessed + ' kW max'
2024-11-26 21:31:43 +01:00
}
2024-12-11 17:32:48 +01:00
if ( ! popupContent ) {
2024-12-16 12:13:19 +01:00
popupContent = ` <span class="no-data"> Aucune information renseignée,
2024-12-14 17:39:17 +01:00
< a class = "edit-button" href = "https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}" > ajoutez la dans OpenStreetMap ! < / a > < / s p a n > `
2024-11-26 21:31:43 +01:00
}
2024-12-12 00:27:27 +01:00
let link _josm = createJOSMEditLink ( feature )
2024-12-14 18:08:00 +01:00
// console.log('link_josm', link_josm)
2024-12-14 18:00:09 +01:00
// 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>
2024-12-14 17:39:17 +01:00
< a class = "edit-button" href = "https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}" > ✏ ️ < / a > < a c l a s s = " e d i t - b u t t o n j o s m " d a t a - h r e f = " $ { l i n k _ j o s m } " h r e f = " # " > J O S M < / a > < s p a n c l a s s = " c o l o r - i n d i c a t i o n " s t y l e = " b a c k g r o u n d - c o l o r : $ { c o l o r } ; " > $ { d i s p l a y O u t P o w e r G u e s s e d } < / s p a n > < s p a n c l a s s = " p o p u p - c o n t e n t " > $ { p o p u p C o n t e n t } < / s p a n > `
2024-11-26 21:31:43 +01:00
2024-12-11 17:32:48 +01:00
let radius = 20
2024-11-26 21:31:43 +01:00
if ( outPowerGuessed > 300 ) {
2024-12-12 09:50:54 +01:00
radius = 70 * ratio _circle
2024-12-11 17:32:48 +01:00
} else if ( outPowerGuessed > 200 ) {
2024-12-12 09:50:54 +01:00
radius = 60 * ratio _circle
2024-12-11 17:32:48 +01:00
} else if ( outPowerGuessed > 100 ) {
2024-12-12 09:50:54 +01:00
radius = 50 * ratio _circle
2024-12-11 17:32:48 +01:00
} else if ( outPowerGuessed > 50 ) {
2024-12-12 09:50:54 +01:00
radius = 40 * ratio _circle
2024-12-11 17:32:48 +01:00
} else if ( outPowerGuessed > 20 ) {
2024-12-12 09:50:54 +01:00
radius = 30 * ratio _circle
2024-12-11 17:32:48 +01:00
} else if ( outPowerGuessed > 7 ) {
2024-12-12 09:50:54 +01:00
radius = 20 * ratio _circle
2024-11-26 21:31:43 +01:00
}
2024-12-18 13:40:58 +01:00
let zoom = map . getZoom ( )
let opacity = 0.1
if ( zoom < 16 ) {
opacity = 0.5
}
2024-10-17 23:57:47 +02:00
let circle = L . circle ( layer . _latlng , {
2024-10-18 00:33:25 +02:00
color : color ,
fillColor : color ,
2024-12-18 13:40:58 +01:00
fillOpacity : opacity ,
colorOpacity : opacity ,
2024-10-18 00:33:25 +02:00
radius : radius
} ) . addTo ( map )
2024-10-17 15:01:47 +02:00
2024-12-18 13:40:58 +01:00
let circle _center = L . circle ( layer . _latlng , {
color : 'black' ,
fillColor : color ,
fillOpacity : 1 ,
radius : 0.1
} ) . addTo ( map )
2024-10-17 23:57:47 +02:00
circle . bindPopup ( html )
circle . on ( {
2024-10-17 15:01:47 +02:00
mouseover : function ( ) {
this . openPopup ( )
2024-12-12 00:27:27 +01:00
bindEventsOnJosmRemote ( )
2024-10-17 15:01:47 +02:00
} ,
mouseout : function ( ) {
2024-12-16 12:13:19 +01:00
// setTimeout(() => this.closePopup(), 15000)
2024-10-17 15:01:47 +02:00
} ,
click : function ( ) {
this . openPopup ( )
2024-12-18 13:40:58 +01:00
bindEventsOnJosmRemote ( )
2024-10-17 15:01:47 +02:00
} ,
} )
} ,
} )
2024-12-12 00:27:27 +01:00
2024-10-17 15:01:47 +02:00
}
function makeCssClassFromTags ( tags ) {
2024-12-16 12:13:19 +01:00
// console.log('tags', tags)
2024-10-17 15:01:47 +02:00
let tagKeys = Object . keys ( tags )
2024-12-16 12:13:19 +01:00
// console.log('tagKeys', tagKeys)
2024-10-17 15:01:47 +02:00
if ( ! tags ) {
return ''
}
let listOfClasses = [ ]
tagKeys . forEach ( ( element ) => {
listOfClasses . push ( 'tag-' + element + '_' + tags [ element ] . replace ( ':' , '--' ) . replace ( ' ' , '-' ) )
} )
return listOfClasses . join ( ' ' )
}
function getIconFromTags ( tags ) {
let iconFileName = ''
// let iconFileName = 'icon_restaurant.png';
if ( tags [ 'man_made' ] ) {
iconFileName = 'fountain.png'
}
return iconFileName
}
2024-12-11 23:13:15 +01:00
// $('#toggleMinPower_50').on('click', toggleMinPower(50))
// $('#toggleMinPower_100').on('click', toggleMinPower(100))
// document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower))
2024-12-16 12:13:19 +01:00
2024-12-11 23:13:15 +01:00
function toggleMinPower ( showHighPower ) {
console . log ( 'toggle' , showHighPower )
2024-12-14 18:00:09 +01:00
showHighPower = ! showHighPower
addFilteredMarkers ( showHighPower )
this . textContent = showHighPower ? 'Montrer puissance haute' : 'Montrer puissance normale'
2024-12-11 23:13:15 +01:00
}
function addFilteredMarkers ( showHighPower ) {
2024-12-18 13:40:58 +01:00
allMarkers . clearLayers ( ) // Supprimer les marqueurs existants
2024-12-11 23:13:15 +01:00
console . log ( 'addFilteredMarkers: clear des marqueurs fait' )
let counter = 0
geojsondata . features . forEach ( function ( feature ) {
if ( feature . properties . puissance _haute === showHighPower ) {
counter ++
2024-12-12 00:27:27 +01:00
let marker = L . marker ( feature . geometry . coordinates ) . bindPopup ( feature . properties . puissance _haute ? 'Puissance haute' : 'Puissance normale' )
2024-12-18 13:40:58 +01:00
allMarkers . addLayer ( marker )
2024-12-11 23:13:15 +01:00
}
} )
console . log ( 'addFilteredMarkers: ' , counter )
2024-12-11 17:32:48 +01:00
}
2024-10-17 15:01:47 +02:00
let isLoading = false
function loadOverpassQuery ( ) {
// ne pas charger si on recherche déjà
if ( ! isLoading ) {
isLoading = true
$ ( '#spinning_icon' ) . fadeIn ( )
2024-12-12 00:27:27 +01:00
let queryTextfieldValue = $ ( '#query-textfield' ) . val ( )
let overpassApiUrl = buildOverpassApiUrl ( map , queryTextfieldValue )
2024-10-17 15:01:47 +02:00
$ . get ( overpassApiUrl , function ( geoDataPointsFromApi ) {
displayPointsFromApi ( geoDataPointsFromApi )
$ ( '#spinning_icon' ) . fadeOut ( )
2024-10-18 00:33:25 +02:00
$ ( '#message-loading' ) . fadeOut ( )
2024-10-17 15:01:47 +02:00
isLoading = false
} ) // end of the getting from overpass API
}
}
$ ( '#spinning_icon' ) . hide ( )
2024-10-18 00:33:25 +02:00
$ ( '#message-loading' ) . hide ( )
2024-10-17 15:01:47 +02:00
2024-12-12 00:27:27 +01:00
function onMapMoveEnd ( ) {
2024-12-14 18:00:09 +01:00
let center = map . getCenter ( )
let zoom = map . getZoom ( )
2024-12-12 00:27:27 +01:00
let infos = ` Lat: ${ center . lat } , Lon: ${ center . lng } , Zoom : ${ zoom } `
if ( zoom > 10 ) {
loadOverpassQuery ( )
2024-12-14 18:00:09 +01:00
} else {
infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)'
2024-12-12 00:27:27 +01:00
}
2024-12-14 18:00:09 +01:00
$ ( '#infos_carte' ) . html ( infos )
2024-12-16 12:54:15 +01:00
updateURLWithMapCoordinatesAndZoom ( )
2024-12-12 00:27:27 +01:00
}
2024-12-16 12:54:15 +01:00
setCoordinatesOfLeafletMapFromQueryParameters ( )
2024-12-14 18:00:09 +01:00
map . on ( 'moveend' , onMapMoveEnd )
2024-12-16 12:54:15 +01:00
2024-12-14 18:00:09 +01:00
$ ( document ) . ready ( function ( ) {
bindEventsOnJosmRemote ( )
2024-12-12 00:27:27 +01:00
onMapMoveEnd ( )
2024-12-14 18:00:09 +01:00
} )
2024-12-16 12:13:19 +01:00
/ *
boutons de toggle
* /
// test
$ ( '#test' ) . on ( 'click' , function ( ) {
2024-12-18 13:40:58 +01:00
console . log ( 'filteredMarkers' , allMarkers )
2024-12-16 12:13:19 +01:00
supprimerMarqueurs ( map )
// loadOverpassQuery()
} )