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

up style

Browse Source
This commit is contained in:
Tykayn 2024-12-18 13:40:58 +01:00 committed by tykayn
parent d78bd89900
commit 01e6acd3d2
3 changed files with 66 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
js/main.js
View File

@ -6,10 +6,10 @@
*/ */
import config from './config.js' import config from './config.js'
import utils from './utils.js' import utils from './utils.js'
import colorUtils from "./color-utils.js" import colorUtils from './color-utils.js'
console.log('config', config) console.log('config', config)
let geojsondata; let geojsondata
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers // serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
// https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png // https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png
@ -22,72 +22,71 @@ const tileServer_stamen = 'https://a.tile.openstreetmap.fr/osmfr/{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
// 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'); let map = L.map('map')
L.control.scale().addTo(map)
function setRandomView () {
function setRandomView(){
console.log('set random view') console.log('set random view')
// Choix au hasard d'une ville parmi la liste // Choix au hasard d'une ville parmi la liste
let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)] let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)]
console.log('randomCity', randomCity) console.log('randomCity', randomCity)
map = map.setView(randomCity.coords, config.initialZoom) map = map.setView(randomCity.coords, config.initialZoom)
} }
function setCoordinatesOfLeafletMapFromQueryParameters() {
function setCoordinatesOfLeafletMapFromQueryParameters () {
// Récupère les paramètres de l'URL // Récupère les paramètres de l'URL
// console.log('window.location', window.location.href, window) // console.log('window.location', window.location.href, window)
const urlParams = new URLSearchParams(window.location.href); const urlParams = new URLSearchParams(window.location.href)
// console.log('urlParams', urlParams) // console.log('urlParams', urlParams)
// Récupère les coordonnées et le zoom à partir des paramètres de l'URL // Récupère les coordonnées et le zoom à partir des paramètres de l'URL
const lat = urlParams.get('lat'); const lat = urlParams.get('lat')
const lng = urlParams.get('lng'); const lng = urlParams.get('lng')
const zoom = urlParams.get('zoom'); const zoom = urlParams.get('zoom')
// console.log('lat,lng,zoom', lat, lng, zoom) // Vérifie si les paramètres sont présents et valides // console.log('lat,lng,zoom', lat, lng, zoom) // Vérifie si les paramètres sont présents et valides
if (lat && lng && zoom) { if (lat && lng && zoom) {
// Initialise la carte avec les coordonnées et le zoom récupérés // Initialise la carte avec les coordonnées et le zoom récupérés
map = map.setView([lat, lng], zoom); map = map.setView([lat, lng], zoom)
} else { } else {
// Affiche une erreur si les paramètres sont absents ou invalides // Affiche une erreur si les paramètres sont absents ou invalides
console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.'); console.error('Les paramètres de coordonnées et de zoom doivent être présents dans l\'URL.')
setRandomView() setRandomView()
} }
} }
function updateURLWithMapCoordinatesAndZoom() { function updateURLWithMapCoordinatesAndZoom () {
// Récupère les coordonnées et le niveau de zoom de la carte // Récupère les coordonnées et le niveau de zoom de la carte
const center = map.getCenter(); const center = map.getCenter()
const zoom = map.getZoom(); const zoom = map.getZoom()
// Construit l'URL avec les paramètres de coordonnées et de zoom // Construit l'URL avec les paramètres de coordonnées et de zoom
const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`; const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`
// console.log('updateURLWithMapCoordinatesAndZoom url', url) // console.log('updateURLWithMapCoordinatesAndZoom url', url)
// Met à jour l'URL de la page // Met à jour l'URL de la page
history.replaceState(null, null, url); history.replaceState(null, null, url)
} }
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: config.osmMention+'&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors' attribution: config.osmMention + '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}) })
var cycle = L.tileLayer('https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', { var cycle = L.tileLayer('https://{s}.tile.opencyclemap.org/{z}/{x}/{y}.png', {
attribution: config.osmMention+'&copy; <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors' attribution: config.osmMention + '&copy; <a href="https://www.opencyclemap.org/">OpenCycleMap</a> contributors'
}) })
var transport = L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', { var transport = L.tileLayer('https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png', {
attribution: config.osmMention attribution: config.osmMention
}) })
let tileGrey = let tileGrey =
L.tileLayer(tileServer, { L.tileLayer(tileServer, {
attribution: config.osmMention attribution: config.osmMention
}) })
let stamen = let stamen =
L.tileLayer(tileServer_stamen, { L.tileLayer(tileServer_stamen, {
attribution: config.osmMention attribution: config.osmMention
}) })
var baseLayers = { var baseLayers = {
'Grey': tileGrey, 'Grey': tileGrey,
@ -97,11 +96,13 @@ var baseLayers = {
'Transport': transport 'Transport': transport
} }
let overlays = {} // Si vous avez des calques superposables, ajoutez-les ici 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
const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map) const layerControl = L.control.layers(baseLayers, overlays, { collapsed: true }).addTo(map)
tileGrey.addTo(map) tileGrey.addTo(map)
let filteredMarkers = L.layerGroup().addTo(map)
function buildOverpassApiUrl (map, overpassQuery) { function buildOverpassApiUrl (map, overpassQuery) {
@ -172,12 +173,6 @@ function supprimerMarqueurs (map) {
}) })
} }
let coef_reduction_bars = 0.8 let coef_reduction_bars = 0.8
function calculerPourcentage (partie, total, reduc) { function calculerPourcentage (partie, total, reduc) {
@ -285,8 +280,6 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo,
$('#bars_power').html(bar_powers) $('#bars_power').html(bar_powers)
} }
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])
@ -336,24 +329,24 @@ function displayPointsFromApi (points) {
onEachFeature: function (feature, layer) { onEachFeature: function (feature, layer) {
let popupContent = '' let popupContent = ''
popupContent+='<div class="sockets-list" >' popupContent += '<div class="sockets-list" >'
let type2 = feature.properties.tags['socket:type2'] let type2 = feature.properties.tags['socket:type2']
let type2_combo = feature.properties.tags['socket:type2_combo'] let type2_combo = feature.properties.tags['socket:type2_combo']
if(type2){ if (type2) {
popupContent+=' <img class="icon-img" src="img/Type2_socket.svg" alt="prise de type 2">' popupContent += ' <img class="icon-img" src="img/Type2_socket.svg" alt="prise de type 2">'
if(type2!=='yes'){ if (type2 !== 'yes') {
popupContent+= '<span class="socket-counter">x '+type2+'</span>' popupContent += '<span class="socket-counter">x ' + type2 + '</span>'
} }
} }
if(feature.properties.tags['socket:type2_combo']){ if (feature.properties.tags['socket:type2_combo']) {
popupContent+=' <img class="icon-img" src="img/type2_combo.svg" alt="prise de type 2 combo CCS">' popupContent += ' <img class="icon-img" src="img/type2_combo.svg" alt="prise de type 2 combo CCS">'
if(type2_combo!=='yes'){ if (type2_combo !== 'yes') {
popupContent+= '<span class="socket-counter">x '+type2_combo+'</span>' popupContent += '<span class="socket-counter">x ' + type2_combo + '</span>'
} }
} }
popupContent+='</div>' popupContent += '</div>'
popupContent+='<div class="key-values" >' popupContent += '<div class="key-values" >'
// ne montrer que certains champs dans la popup // ne montrer que certains champs dans la popup
tags_to_display_in_popup.forEach(function (key) { tags_to_display_in_popup.forEach(function (key) {
if (tags_to_display_in_popup.indexOf(key)) { if (tags_to_display_in_popup.indexOf(key)) {
@ -366,7 +359,7 @@ function displayPointsFromApi (points) {
} }
} }
}) })
popupContent += '</div>' popupContent += '</div>'
layer.bindPopup(popupContent) layer.bindPopup(popupContent)
let outPowerGuessed = utils.guessOutputPowerFromFeature(feature) let outPowerGuessed = utils.guessOutputPowerFromFeature(feature)
@ -401,13 +394,28 @@ function displayPointsFromApi (points) {
radius = 20 * ratio_circle radius = 20 * ratio_circle
} }
let zoom = map.getZoom()
let opacity = 0.1
if (zoom < 16) {
opacity = 0.5
}
let circle = L.circle(layer._latlng, { let circle = L.circle(layer._latlng, {
color: color, color: color,
fillColor: color, fillColor: color,
fillOpacity: 0.5, fillOpacity: opacity,
colorOpacity: opacity,
radius: radius radius: radius
}).addTo(map) }).addTo(map)
let circle_center = L.circle(layer._latlng, {
color: 'black',
fillColor: color,
fillOpacity: 1,
radius: 0.1
}).addTo(map)
circle.bindPopup(html) circle.bindPopup(html)
circle.on({ circle.on({
mouseover: function () { mouseover: function () {
@ -419,6 +427,7 @@ function displayPointsFromApi (points) {
}, },
click: function () { click: function () {
this.openPopup() this.openPopup()
bindEventsOnJosmRemote()
}, },
}) })
}, },
@ -455,7 +464,6 @@ function getIconFromTags (tags) {
// $('#toggleMinPower_100').on('click', toggleMinPower(100)) // $('#toggleMinPower_100').on('click', toggleMinPower(100))
// document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower)) // document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower))
function toggleMinPower (showHighPower) { function toggleMinPower (showHighPower) {
console.log('toggle', showHighPower) console.log('toggle', showHighPower)
showHighPower = !showHighPower showHighPower = !showHighPower
@ -464,7 +472,7 @@ function toggleMinPower (showHighPower) {
} }
function addFilteredMarkers (showHighPower) { function addFilteredMarkers (showHighPower) {
filteredMarkers.clearLayers() // Supprimer les marqueurs existants allMarkers.clearLayers() // Supprimer les marqueurs existants
console.log('addFilteredMarkers: clear des marqueurs fait') console.log('addFilteredMarkers: clear des marqueurs fait')
let counter = 0 let counter = 0
@ -472,7 +480,7 @@ function addFilteredMarkers (showHighPower) {
if (feature.properties.puissance_haute === showHighPower) { if (feature.properties.puissance_haute === showHighPower) {
counter++ counter++
let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale') let marker = L.marker(feature.geometry.coordinates).bindPopup(feature.properties.puissance_haute ? 'Puissance haute' : 'Puissance normale')
filteredMarkers.addLayer(marker) allMarkers.addLayer(marker)
} }
}) })
console.log('addFilteredMarkers: ', counter) console.log('addFilteredMarkers: ', counter)
@ -529,7 +537,7 @@ boutons de toggle
// test // test
$('#test').on('click', function () { $('#test').on('click', function () {
console.log('filteredMarkers', filteredMarkers) console.log('filteredMarkers', allMarkers)
supprimerMarqueurs(map) supprimerMarqueurs(map)
// loadOverpassQuery() // loadOverpassQuery()

12
js/utils.js
View File

@ -19,35 +19,27 @@ const utils = {
let found_type_2 = false let found_type_2 = false
let found_type_chademo = false let found_type_chademo = false
// deviner les puissances max selon les capacités de prises
for (var tag in feature.properties.tags) { for (var tag in feature.properties.tags) {
if (tag.indexOf('type2') !== -1) { if (tag.indexOf('type2') !== -1) {
// console.log('tag type2', tag)
found_type_2 = true found_type_2 = true
power = 43 power = 43
} }
if (tag.indexOf('chademo') !== -1) { if (tag.indexOf('chademo') !== -1) {
found_type_chademo = true found_type_chademo = true
// console.log('tag chademo', tag)
power = 63 power = 63
} }
let value = feature.properties.tags[tag] let value = feature.properties.tags[tag]
if (value && tag.toLowerCase().indexOf('output') !== -1) { if (value && tag.toLowerCase().indexOf('output') !== -1) {
// console.log('tag contient output', tag, value)
value = '' + value value = '' + value
if (value.replace) { if (value.replace) {
value = value.replace(' ') value = value.replace(' ')
value = value.replace('kW', '') value = value.replace('kW', '')
} }
let power = parseInt(value) let power = parseInt(value)
// deviner les types de prises présents
// if (power) {
// console.log('power', power)
// console.log('outputPower', outputPower)
// }
if (power > outputPower) { if (power > outputPower) {
outputPower = power outputPower = power
// console.log('power', power)
} }
} }
} }

11
styles/style.css
View File

@ -101,8 +101,8 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
border-radius: 0.25em; border-radius: 0.25em;
float:none; float:none;
position:relative; position:relative;
top: 3.5em; top: 5em;
right: -11.5rem; right: -7.9rem;
} }
.navigation-link:hover{ .navigation-link:hover{
border: black; border: black;
@ -173,7 +173,7 @@ a {
} }
.leaflet-popup-content { .leaflet-popup-content {
min-width: 15rem;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
} }
@ -189,13 +189,12 @@ a {
} }
.popup-key { .popup-key {
min-width: 6rem; width: 50%;
display: inline-block; display: inline-block;
} }
.popup-value { .popup-value {
min-width: 10rem; width: 42%;
max-width: 49%;
text-align: right; text-align: right;
display: inline-block; display: inline-block;
padding-right: 1rem; padding-right: 1rem;