From e689f381ad02d41927c9050d3de8f83461eda9a0 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Sat, 14 Dec 2024 17:39:17 +0100
Subject: [PATCH] random city at start, nav links

---
 js/main.js       | 41 +++++++++++++++++++++++++++++++++++++----
 styles/style.css |  1 +
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/js/main.js b/js/main.js
index 4c20d79..dba0413 100644
--- a/js/main.js
+++ b/js/main.js
@@ -19,14 +19,44 @@ let unknown_color = '#c0b1b1' // color for unknown power output of the station
 const tileServer = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'
 
 // Créer la carte centrée sur Rouen
-var map = L.map('map').setView([49.4438, 1.0993], initialZoom)
+// Liste des 20 villes les plus peuplées de France avec leurs coordonnées géographiques
+let cities = [
+	{ name: "Paris", coords: [48.8566, 2.3522] },
+	{ name: "Marseille", coords: [43.2965, 5.3698] },
+	{ name: "Lyon", coords: [45.7640, 4.8357] },
+	{ name: "Toulouse", coords: [43.6042, 1.4437] },
+	{ name: "Nice", coords: [43.7101, 7.2620] },
+	{ name: "Nantes", coords: [47.2184, -1.5536] },
+	{ name: "Strasbourg", coords: [48.5831, 7.7521] },
+	{ name: "Montpellier", coords: [43.6167, 3.8742] },
+	{ name: "Bordeaux", coords: [44.8378, -0.5792] },
+	{ name: "Lille", coords: [50.6293, 3.1466] },
+	{ name: "Rennes", coords: [48.1120, -1.6823] },
+	{ name: "Toulon", coords: [43.1230, 5.9291] },
+	{ name: "Le Havre", coords: [49.4943, 0.1079] },
+	{ name: "Saint-Etienne", coords: [45.4380, 4.3841] },
+	{ name: "Grenoble", coords: [45.1667, 5.7295] },
+	{ name: "Rouen", coords: [49.4431, 1.0820] },
+	{ name: "Dijon", coords: [47.3221, 5.0446] },
+	{ name: "Angers", coords: [47.4786, -0.5551] },
+	{ name: "Nîmes", coords: [43.8366, 4.3623] },
+	{ name: "Reims", coords: [49.2500, 4.0333] }
+];
+
+// Choix au hasard d'une ville parmi la liste
+let randomCity = cities[Math.floor(Math.random() * cities.length)];
+console.log('randomCity', randomCity)
+// Initialisation de la carte avec la vue centrée sur la ville choisie
+let map = L.map('map').setView(randomCity.coords, initialZoom);
+
+// var map = L.map('map').setView([49.4438, 1.0993], initialZoom)
 // 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:25];' +
 // 'area(id:3600075628)->.searchArea;' +
 // 'node[amenity=charging_station](area.searchArea);' +
 // 'out body geom;'
 
 L.tileLayer(tileServer, {
-	maxZoom: 19,
+	maxZoom: 21,
 	attribution: osmMention,
 }).addTo(map)
 
@@ -354,11 +384,14 @@ function displayPointsFromApi (points) {
 				displayOutPowerGuessed = outPowerGuessed + ' kW max'
 			}
 			if (!popupContent) {
-				popupContent = `<span class="no-data"> Aucune information renseignée, <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`
+				popupContent = `<span class="no-data"> Aucune information renseignée, 
+
+<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`
 			}
 			let link_josm = createJOSMEditLink(feature)
 			console.log('link_josm', link_josm)
-			let html = `<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`
+			let html = `itinéraire <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"> 🚗</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">🚴‍♀️</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">👠</a>
+<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a><a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a> <span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span><span class="popup-content">${popupContent}</span>`
 
 			let radius = 20
 			if (outPowerGuessed > 300) {
diff --git a/styles/style.css b/styles/style.css
index 6aaed74..0341cf2 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -84,6 +84,7 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 }
 
 #query-button,
+.navigation-link,
 .edit-button {
 	background: #497cd3;
 	padding: 0.5em 1em;