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 utils from './utils.js'
import colorUtils from "./color-utils.js"
import colorUtils from './color-utils.js'
console.log('config', config)
let geojsondata;
let geojsondata
// serveurs de tuiles: https://wiki.openstreetmap.org/wiki/Tile_servers
// 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
// 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
let map = L.map('map');
let map = L.map('map')
L.control.scale().addTo(map)
function setRandomView(){
function setRandomView () {
console.log('set random view')
// Choix au hasard d'une ville parmi la liste
let randomCity = utils.cities[Math.floor(Math.random() * utils.cities.length)]
console.log('randomCity', randomCity)
map = map.setView(randomCity.coords, config.initialZoom)
}
function setCoordinatesOfLeafletMapFromQueryParameters() {
function setCoordinatesOfLeafletMapFromQueryParameters () {
// Récupère les paramètres de l'URL
// 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)
// Récupère les coordonnées et le zoom à partir des paramètres de l'URL
const lat = urlParams.get('lat');
const lng = urlParams.get('lng');
const zoom = urlParams.get('zoom');
const lat = urlParams.get('lat')
const lng = urlParams.get('lng')
const zoom = urlParams.get('zoom')
// console.log('lat,lng,zoom', lat, lng, zoom) // Vérifie si les paramètres sont présents et valides
if (lat && lng && zoom) {
// 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 {
// 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()
}
}
function updateURLWithMapCoordinatesAndZoom() {
function updateURLWithMapCoordinatesAndZoom () {
// Récupère les coordonnées et le niveau de zoom de la carte
const center = map.getCenter();
const zoom = map.getZoom();
const center = map.getCenter()
const zoom = map.getZoom()
// 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)
// 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', {
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', {
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', {
attribution: config.osmMention
attribution: config.osmMention
})
let tileGrey =
L.tileLayer(tileServer, {
attribution: config.osmMention
attribution: config.osmMention
})
let stamen =
L.tileLayer(tileServer_stamen, {
attribution: config.osmMention
attribution: config.osmMention
})
var baseLayers = {
'Grey': tileGrey,
@ -97,11 +96,13 @@ var baseLayers = {
'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)
tileGrey.addTo(map)
let filteredMarkers = L.layerGroup().addTo(map)
function buildOverpassApiUrl (map, overpassQuery) {
@ -172,12 +173,6 @@ function supprimerMarqueurs (map) {
})
}
let coef_reduction_bars = 0.8
function calculerPourcentage (partie, total, reduc) {
@ -285,8 +280,6 @@ ${count_estimated_type2combo} (${calculerPourcentage(count_estimated_type2combo,
$('#bars_power').html(bar_powers)
}
function bindEventsOnJosmRemote () {
let josm_remote_buttons = $(`.josm`)
// console.log('josm_remote_buttons', josm_remote_buttons[0])
@ -336,24 +329,24 @@ function displayPointsFromApi (points) {
onEachFeature: function (feature, layer) {
let popupContent = ''
popupContent+='<div class="sockets-list" >'
popupContent += '<div class="sockets-list" >'
let type2 = feature.properties.tags['socket:type2']
let type2_combo = feature.properties.tags['socket:type2_combo']
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>'
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>'
}
}
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">'
if(type2_combo!=='yes'){
popupContent+= '<span class="socket-counter">x '+type2_combo+'</span>'
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>'
}
}
popupContent+='</div>'
popupContent+='<div class="key-values" >'
popupContent += '</div>'
popupContent += '<div class="key-values" >'
// ne montrer que certains champs dans la popup
tags_to_display_in_popup.forEach(function (key) {
if (tags_to_display_in_popup.indexOf(key)) {
@ -366,7 +359,7 @@ function displayPointsFromApi (points) {
}
}
})
popupContent += '</div>'
popupContent += '</div>'
layer.bindPopup(popupContent)
let outPowerGuessed = utils.guessOutputPowerFromFeature(feature)
@ -401,13 +394,28 @@ function displayPointsFromApi (points) {
radius = 20 * ratio_circle
}
let zoom = map.getZoom()
let opacity = 0.1
if (zoom < 16) {
opacity = 0.5
}
let circle = L.circle(layer._latlng, {
color: color,
fillColor: color,
fillOpacity: 0.5,
fillOpacity: opacity,
colorOpacity: opacity,
radius: radius
}).addTo(map)
let circle_center = L.circle(layer._latlng, {
color: 'black',
fillColor: color,
fillOpacity: 1,
radius: 0.1
}).addTo(map)
circle.bindPopup(html)
circle.on({
mouseover: function () {
@ -419,6 +427,7 @@ function displayPointsFromApi (points) {
},
click: function () {
this.openPopup()
bindEventsOnJosmRemote()
},
})
},
@ -455,7 +464,6 @@ function getIconFromTags (tags) {
// $('#toggleMinPower_100').on('click', toggleMinPower(100))
// document.getElementById('toggleMinPower_300').addEventListener('click', toggleMinPower(showHighPower))
function toggleMinPower (showHighPower) {
console.log('toggle', showHighPower)
showHighPower = !showHighPower
@ -464,7 +472,7 @@ function toggleMinPower (showHighPower) {
}
function addFilteredMarkers (showHighPower) {
filteredMarkers.clearLayers() // Supprimer les marqueurs existants
allMarkers.clearLayers() // Supprimer les marqueurs existants
console.log('addFilteredMarkers: clear des marqueurs fait')
let counter = 0
@ -472,7 +480,7 @@ function addFilteredMarkers (showHighPower) {
if (feature.properties.puissance_haute === showHighPower) {
counter++
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)
@ -529,7 +537,7 @@ boutons de toggle
// test
$('#test').on('click', function () {
console.log('filteredMarkers', filteredMarkers)
console.log('filteredMarkers', allMarkers)
supprimerMarqueurs(map)
// loadOverpassQuery()

12
js/utils.js
View File

@ -19,35 +19,27 @@ const utils = {
let found_type_2 = false
let found_type_chademo = false
// deviner les puissances max selon les capacités de prises
for (var tag in feature.properties.tags) {
if (tag.indexOf('type2') !== -1) {
// console.log('tag type2', tag)
found_type_2 = true
power = 43
}
if (tag.indexOf('chademo') !== -1) {
found_type_chademo = true
// console.log('tag chademo', tag)
power = 63
}
let value = feature.properties.tags[tag]
if (value && tag.toLowerCase().indexOf('output') !== -1) {
// console.log('tag contient output', tag, value)
value = '' + value
if (value.replace) {
value = value.replace(' ')
value = value.replace('kW', '')
}
let power = parseInt(value)
// deviner les types de prises présents
// if (power) {
// console.log('power', power)
// console.log('outputPower', outputPower)
// }
if (power > outputPower) {
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;
float:none;
position:relative;
top: 3.5em;
right: -11.5rem;
top: 5em;
right: -7.9rem;
}
.navigation-link:hover{
border: black;
@ -173,7 +173,7 @@ a {
}
.leaflet-popup-content {
min-width: 15rem;
word-break: break-all;
word-wrap: break-word;
}
@ -189,13 +189,12 @@ a {
}
.popup-key {
min-width: 6rem;
width: 50%;
display: inline-block;
}
.popup-value {
min-width: 10rem;
max-width: 49%;
width: 42%;
text-align: right;
display: inline-block;
padding-right: 1rem;