url coords to share

js/main.js

@@ -44,11 +44,53 @@ let cities = [
 	{ name: 'Reims', coords: [49.2500, 4.0333] }
 ]
 
+
+// Initialisation de la carte avec la vue centrée sur la ville choisie
+let map = L.map('map');
+
+
+function setRandomView(){
+	console.log('set random view')
 // 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)
+	map = map.setView(randomCity.coords, 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);
+
+	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');
+
+	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);
+	} 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.');
+		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();
+
+	// 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}`;
+	console.log('updateURLWithMapCoordinatesAndZoom url', url)
+	// Met à jour l'URL de la page
+	history.replaceState(null, null, url);
+}
+
+
 
 var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 	attribution: osmMention+'&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
@@ -460,7 +502,7 @@ function displayPointsFromApi (points) {
 			let circle = L.circle(layer._latlng, {
 				color: color,
 				fillColor: color,
-				fillOpacity: 0.8,
+				fillOpacity: 0.5,
 				radius: radius
 			}).addTo(map)
 
@@ -567,9 +609,14 @@ function onMapMoveEnd () {
 		infos += '(zoomez au niveau 11 ou plus pour charger les stations en vous déplaçant)'
 	}
 	$('#infos_carte').html(infos)
+	updateURLWithMapCoordinatesAndZoom()
+
 }
 
+setCoordinatesOfLeafletMapFromQueryParameters()
+
 map.on('moveend', onMapMoveEnd)
+
 $(document).ready(function () {
 	bindEventsOnJosmRemote()
 	onMapMoveEnd()

styles/style.css

@@ -101,8 +101,8 @@ img.leaflet-marker-icon.tag-socket\:type2_yes {
 	border-radius: 0.25em;
 	float:none;
 	position:relative;
-	top: 5.5em;
-	left: 0;
+	top: 3.5em;
+	right: -11.5rem;
 }
 .navigation-link:hover{
 	border: black;
@@ -198,6 +198,7 @@ a {
 	max-width: 49%;
 	text-align: right;
 	display: inline-block;
+	padding-right: 1rem;
 }
 
 .bottom-content {
@@ -312,5 +313,15 @@ button{
 	fill: #000;
 }
 .sockets-list{
-	margin-top: 1rem;
+	margin-top: 0.25rem;
+}
+.socket-counter{
+	background: #dedede;
+	margin-top: 1rem;
+	margin-left: -1rem;
+	border-radius: 1rem;
+	padding: 0.25rem;
+}
+.leaflet-interactive{
+	border:solid 3px white;
 }