up style
This commit is contained in:
parent
d78bd89900
commit
01e6acd3d2
70
js/main.js
70
js/main.js
@ -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,11 +22,9 @@ 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 () {
|
||||
console.log('set random view')
|
||||
@ -35,38 +33,39 @@ function setRandomView(){
|
||||
console.log('randomCity', randomCity)
|
||||
map = map.setView(randomCity.coords, config.initialZoom)
|
||||
}
|
||||
|
||||
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 () {
|
||||
// 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', {
|
||||
@ -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])
|
||||
@ -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
12
js/utils.js
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user