From 01e6acd3d2f43c5ccc02d443e9174eca5315c3c9 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 18 Dec 2024 13:40:58 +0100
Subject: [PATCH] up style

---
 js/main.js       | 110 +++++++++++++++++++++++++----------------------
 js/utils.js      |  12 +-----
 styles/style.css |  11 +++--
 3 files changed, 66 insertions(+), 67 deletions(-)

diff --git a/js/main.js b/js/main.js
index cc74beb..bfeb07a 100644
--- a/js/main.js
+++ b/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,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()
diff --git a/js/utils.js b/js/utils.js
index 8021e30..38a3521 100644
--- a/js/utils.js
+++ b/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)
 					}
 				}
 			}
diff --git a/styles/style.css b/styles/style.css
index 7f1afec..8f1b874 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -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;