maps.php

Nouveautés:
- AJAX pour récupérer les données depuis la base
- Leaflet pour l’API
- Openstreetmap pour les cartes

Locale/es_ES/LC_MESSAGES/sentier.po

@@ -8,7 +8,7 @@ msgstr ""
 "Project-Id-Version: sur-le-sentier.fr\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: 2024-12-14 11:46+0100\n"
-"PO-Revision-Date: 2024-12-14 13:41+0100\n"
+"PO-Revision-Date: 2024-12-23 10:21+0100\n"
 "Last-Translator: \n"
 "Language-Team: French <bruno@clicclac.info>\n"
 "Language: es_ES\n"
@@ -857,9 +857,8 @@ msgid "String"
 msgstr "Cadena"
 
 #: vegas/index.php:106
-#, fuzzy
 msgid "<span class=\"green\">Latest</span> images..."
-msgstr "<span class=« green »>Últimas</span> imágenes…"
+msgstr "<span class=« green»>Últimas</span> imágenes…"
 
 #: view_bdd.php:101 view_bdd.php:155 view_bdd2.php:280 view_bdd2.php:306
 msgid "Suppress"

functions.php

@@ -268,8 +268,10 @@ function create_thumb($thumb_w, $thumb_h, $image) {
 */
 
 function in_bdd($image) {
+	global $base;
+	
 	try {
-		$conn3 = new PDO('sqlite:../db_photo.sqlite3');
+		$conn3 = new PDO("sqlite:$base");
 		#$query3 = "SELECT filename FROM photos WHERE instr(filename, '". $file . "') > 0;";
 		$query3 = "SELECT filename FROM photos WHERE filename = :filename";
 		$stmt = $conn3->prepare($query3);
@@ -416,6 +418,8 @@ function data_for_lightbox($data) {
 	global $chemin;
 	//$query4 = "INSERT OR IGNORE INTO photos (filename, filesize, dateoriginal, lens, speed, correctexpo, iso, usercomment, comment, model, metering, flash, focal, program, wb, mode, width, height, html, aperture, software, lat, long, alt, keywords, title, creator, city, department, code, country, copyright, legende);
 
+/*
+*/
 	$filename = $data['filename'];
 	$title_thumb = pathinfo($filename, PATHINFO_FILENAME);
 	
@@ -467,6 +471,7 @@ function data_for_lightbox($data) {
 
 	if (!empty($gps)) {
 		$map = '<a href = "https://maps.google.com/maps?q=' . $gps . '&t=&z=9&ie=UTF8&iwloc=&output=embed" title="' . $title . '" data-lcl-txt="' . $legende . '">' . " \u{30FB}  \u{2693} " . '</a>';
+		$map = htmlspecialchars($map, ENT_QUOTES);
 		}
 	else {
 		$map = '';
@@ -497,6 +502,7 @@ function data_for_lightbox($data) {
 	$description .= "<tr><td>" . gettext("Speed") . "</td><td>" . $speed . "</td></tr>";
 	$description .= "<tr><td>" . gettext("Aperture") . "</td><td>" . $aperture . "</td></tr>";
 	$description .= "<tr><td>" . gettext("Iso") . "</td><td>" .  $iso . "</td></tr>";
+	
 	$description .= "<tr><td>" . gettext("Model") . "</td><td>". $model . "</td></tr>";
 	$description .= "<tr><td>" . gettext("Lens") . "</td><td>" .  $objectif . "</td></tr>";
 	$description .= "<tr><td>" . gettext("Focal") . "</td><td>" .  $focal . "</td></tr>";
@@ -515,11 +521,14 @@ function data_for_lightbox($data) {
 	(!empty($city)) && $description .= "<tr><td>" . gettext("City") . "</td><td>" .  $city . "</td></tr>";
 	(!empty($department)) && $description .= "<tr><td>" . gettext("Department") . "</td><td>" .  $department . "</td></tr>";
 	$code = (!empty($code)) ? " (" . $code . ")" : "";
+
 	(!empty($country)) && $description .= "<tr><td>" . gettext("Country") . "</td><td>" .  $country . $code . "</td></tr>";
 	(!empty($map)) && $description .= "<tr><td>GPS</td><td>" .  $map . "</td></tr>";
+
 	((!empty($comment)) || (!empty($usercomment))) && $description  .= "<tr><td>&nbsp;</td><td>&nbsp;</td></tr>";
 	(!empty($comment)) && $description .= "<tr><td>" . gettext("Comment") . "</td><td>" .  $comment . "</td></tr>";
 	(!empty($usercomment)) && $description .= "<tr><td>" . gettext("User comment") . "</td><td>" .  $usercomment . "</td></tr>";
+/**/
 	$description .= "</table>";
 	
 	$lightbox = array();
@@ -532,10 +541,16 @@ function data_for_lightbox($data) {
 	$lightbox['keywords'] = $keywords;
 	$lightbox['creator'] = $creator;
 	$lightbox['gps'] = $gps;
+	$lightbox['lat'] = $latitude;
+	$lightbox['long'] = $longitude;
 	$lightbox['description'] = $description;
 	$lightbox['width'] = $width;
 	$lightbox['height'] = $height;
 
+
+//_pr($lightbox);
+
+//$lightbox = array();
 	/*
 		Array
 		(

maps.php

@@ -6,6 +6,10 @@ $domain = 'sentier';
 localize($domain);
 */
 include 'functions.php';
+
+$base = 'db_photo.sqlite3';
+$chemin = 'photos/img/';
+$chemin_thumb = str_replace("img", "thumb", $chemin);
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -54,7 +58,7 @@ include 'functions.php';
 <?php
 	
 	try {
-		$conn4 = new PDO('sqlite:db_photo.sqlite3');
+		$conn4 = new PDO("sqlite:$base");
 		$query4 = "SELECT filename, filesize, dateoriginal, lens, speed, correctexpo, iso, usercomment, comment, model, metering, flash, focal, program, wb, mode, width, height, html, aperture, software, lat, long, alt, keywords, title, creator, city, department, code, country, copyright, legende FROM photos WHERE lat != '' ORDER BY dateoriginal DESC";
 	
 		$stmt = $conn4->prepare($query4);
@@ -119,7 +123,8 @@ include 'functions.php';
 
 						$lb = data_for_lightbox($result[$i]);
 						
-						$b .= '[\'<div class="info_content"><h3>' . htmlspecialchars($lb['title_thumb'], ENT_QUOTES) . '</h3><div class="gm_thumb"><a href="' . $lb['big'] . '"  title="' . htmlspecialchars($lb['title'], ENT_QUOTES) .  '" data-lcl-txt="' . htmlspecialchars($lb['title'], ENT_QUOTES) . '" data-lcl-author="' . htmlspecialchars($lb['exif'], ENT_QUOTES) . '"><img src="' . $lb['thumb'] . '" /></a></div><p>' . htmlspecialchars($lb['title'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['legende'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['keywords'], ENT_QUOTES) . '</p></div>\'],' . "\r\n";	
+						//$b .= '[\'<div class="info_content"><h3>' . htmlspecialchars($lb['title_thumb'], ENT_QUOTES) . '</h3><div class="gm_thumb"><a href="' . $lb['big'] . '"  title="' . htmlspecialchars($lb['title'], ENT_QUOTES) .  '" data-lcl-txt="' . htmlspecialchars($lb['title'], ENT_QUOTES) . '" data-lcl-author="' . htmlspecialchars($lb['exif'], ENT_QUOTES) . '"><img src="' . $lb['thumb'] . '" alt="' . htmlspecialchars($lb['title']) . '"></a></div><p>' . htmlspecialchars($lb['title'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['legende'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['keywords'], ENT_QUOTES) . '</p></div>\'],' . "\r\n";	
+						$b .= '[\'<div class="info_content"><h3>' . htmlspecialchars($lb['title_thumb'], ENT_QUOTES) . '</h3><div class="gm_thumb"><a href="' . $lb['big'] . '" title="' . htmlspecialchars($lb['title']) . '" data-lcl-txt="' . htmlspecialchars($lb['description']) . '" data-lcl-author="' . htmlspecialchars($lb['creator']) . '"><img src="' . $lb['thumb'] . '" alt="' . htmlspecialchars($lb['title']) . '"></a></div><p>' . htmlspecialchars($lb['title'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['legende'], ENT_QUOTES) . '</p><p>' . htmlspecialchars($lb['keywords'], ENT_QUOTES) . '</p></div>\'],' . "\r\n";	
 						} 
 					$b = substr_replace($b, '', -3, 1);
 					echo $b;
@@ -174,23 +179,51 @@ include 'functions.php';
 			$(document).ready(function() {
 		
 				var $obj = lc_lightbox('.gm_thumb a', {
-					img_zoom : true,
+
-					open_close_time : 200,
+					img_zoom : true,			// whether to enable zooming system
-					ol_time_diff : 100,
+		 			author_by_txt : '<?php echo gettext("by"); ?>',	// which text is used before the author name, by default is "by"
-					wrap_class : 'lcl_zoomin_oc',
+
-		  		  	skin : 'minimal',			// minimal | light | dark
+		  			slideshow	: true, 		// whether to enable slideshow
-					data_position : 'over',	
+		  			open_close_time : 200,	// durée de l'animation pour l'ouverture et la fermeture de la lightbox
-					cmd_position : 'inner',
+		 			ol_time_diff : 100,		// animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
-					txt_hidden : false,
+		 			fading_time : 50,			// durée de l'animation de fondu des éléments
-		  		  	//shox_title : true,		// s'il faut afficher les titres
+		  			animation_time : 100,
-					show_descr : false,		// s'il faut afficher les descriptions
+		  			slideshow_time : 4000,	// durée de l'intervalle du diaporama
-					//show_author : true,		// s'il faut afficher les auteurs
+		  			autoplay : false, 		// autoplay slideshow - bool
-					fullscreen : true,
+		  			counter : false,			// s'il faut afficher le compteur d'éléments
-					fs_img_behavior : 'smart',
+		  			progressbar : false,		// s'il faut afficher une barre de progression lors de l'exécution du diaporama
-					fs_only : 500,
+
-					browser_fs_mode : true,
+		  			max_width : '95%',		// largeur maximale de la lightbox
-					txt_toggle_cmd : true,
+		 			max_height : '95%',		// hauteur maximale de la lightbox
-					rclick_prevent : true,
+		  			ol_opacity : 0.7, 		// overlay opacity / value between 0 and 1
+		  			ol_color : '#111', 		// background color of the overlay
+		  			ol_pattern : false, 		// overlay patterns - insert the pattern name or false
+
+		  			wrap_class : 'lcl_fade_oc',	// Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
+		  			skin : 'minimal',			// minimal | light | dark
+		  			data_position : 'over',	// Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
+		  			cmd_position : 'inner',	// Déclare où les commandes doivent être affichées : inner|outer
+		  			ins_close_pos	: 'normal', // set closing button position for inner commands - normal/corner	
+		  			nav_btn_pos : 'normal',	// Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
+
+		  			txt_hidden : true, // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side)
+		  			shox_title : true,		// s'il faut afficher les titres
+		  			show_descr : true,		// s'il faut afficher les descriptions
+		  			show_author : true,		// s'il faut afficher les auteurs
+
+		  			thumbs_nav : false,		// permet la navigation par vignettes (nécessite des éléments affiche ou images)
+
+		  			fullscreen : true,		// Autoriser ou non le mode plein écran
+		  			fs_img_behavior : 'smart',	//Comportement de l'image en plein écran : fit|fill|smart
+		  			fs_only : 500,			// s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
+		  			browser_fs_mode : true,	// utiliser ou non le mode plein écran du navigateur
+
+		  			txt_toggle_cmd : true,	// s'il faut afficher le bouton de basculement du texte de l'élément
+		  			download : true,			// whether to show element's file download button
+		  			autoplay_videos : false, // bool / whether to autoplay videos (NB: modern browsers ignore this for deeplinked elements. Not applied if video has poster)
+		  			touchswipe : true,		// permet les interactions tactiles (nécessite AlloyFinger)
+		  			rclick_prevent : true,	// s'il faut éviter le clic droit sur les éléments de la lightbox
+
 					});
 		
 			});

maps/api/liste.php

@@ -0,0 +1,62 @@
+<?php
+// Headers
+/**/
+header('Access-Control-Allow-Origin: *');
+header('Content-Type: application/json; charset=UTF-8');
+header('Access-Control-Allow-Methods: GET');
+header('Access-Control-Max-Age: 3600');
+header('Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');
+
+if($_SERVER['REQUEST_METHOD'] !== 'GET'){
+    http_response_code(405);
+    echo json_encode(['error' => 'Method unauthorized']);
+    exit;
+}
+
+include '../../i18n_setup.php';
+
+$base = '../../db_photo.sqlite3';
+$chemin = 'photos/img/';
+$chemin_thumb = str_replace("img", "thumb", $chemin);
+include '../../functions.php';
+
+
+try {
+	$conn4 = new PDO("sqlite:$base");
+	$query4 = "SELECT filename, filesize, dateoriginal, lens, speed, correctexpo, iso, usercomment, comment, model, metering, flash, focal, program, wb, mode, width, height, html, aperture, software, lat, long, alt, keywords, title, creator, city, department, code, country, copyright, legende FROM photos WHERE lat != '' ORDER BY dateoriginal DESC";
+	#$query4 = "SELECT filename, filesize, dateoriginal, lens, speed, correctexpo, iso, model, metering, flash, focal, program, wb, mode, width, height, aperture, software, lat, long, alt, keywords, title, creator, city, department, code, country, copyright, legende FROM photos WHERE lat != '' ORDER BY dateoriginal DESC";
+	
+	$stmt = $conn4->prepare($query4);
+	$stmt->execute();
+/*
+	$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+			//$rowcount = count($result);
+*/	
+	$for_map=array();
+	
+	while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
+	
+		$f=array();
+		
+		$f = data_for_lightbox($row);
+	
+		//debug_to_console($f['description']);
+		$for_map[]=$f;
+	
+	}
+
+	$conn4 = null;
+	}
+	catch(PDOException $e) {
+		echo $e->getMessage();
+		}
+			
+		//_pr($result);
+		//_pr($for_map);
+/**/
+
+//_pr($for_map['description']);
+//debug_to_console($for_map['description']);
+
+//echo json_encode($result);
+echo json_encode($for_map);

maps/css/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

maps/css/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

maps/css/leaflet.css

@@ -0,0 +1,661 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container img.leaflet-tile {
+	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
+	mix-blend-mode: plus-lighter;
+}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-attribution-flag {
+	display: inline !important;
+	vertical-align: baseline !important;
+	width: 1em;
+	height: 0.6669em;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	background: rgba(255, 255, 255, 0.8);
+	text-shadow: 1px 1px #fff;
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		print-color-adjust: exact;
+		}
+	}

maps/css/styles.css

@@ -0,0 +1,19 @@
+#map{
+    height: 600px;
+}
+
+.popup{
+    display: flex;
+    align-items: center;
+    gap: 10px
+}
+
+.popup h2{
+	text-align: center;
+}
+
+.popup img{
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

maps/index.php

@@ -0,0 +1,120 @@
+<?php 
+session_start(); 
+include '../i18n_setup.php';
+/*include 'localize.php';  
+$domain = 'sentier';
+localize($domain);
+*/
+include '../functions.php';
+
+$base = 'db_photo.sqlite3';
+$chemin = '../photos/img/';
+$chemin_thumb = str_replace("img", "thumb", $chemin);
+?>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+ 		<meta charset="UTF-8">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="description" content="Sur le sentier: la photos du mois">
+		<title><?php echo gettext("Maps"); ?></title>
+		<meta name="msapplication-TileColor" content="#2b5797">
+		<meta name="msapplication-config" content="/icons/browserconfig.xml">
+		<meta name="theme-color" content="#ffffff">
+		<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
+		<link rel="manifest" href="/icons/site.webmanifest">
+		<link rel="shortcut icon" href="/icons/favicon.ico">
+       	
+       	<!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
+		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+        <link rel="stylesheet" href="css/styles.css">
+		<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
+        <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
+        <link rel="stylesheet" href="../css/sls.css">
+	 
+		<link rel='stylesheet' href='../lc-lightbox/css/lc_lightbox.min.css'>
+		<link rel='stylesheet' href='../lc-lightbox/css/open_close_fx.css'>
+		<link rel='stylesheet' href='../lc-lightbox/skins/minimal.css'>
+
+        <!-- Fichiers Javascript -->
+		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" defer></script>
+		<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js' defer></script>
+		<script src="js/scripts.js" defer></script>
+
+        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    </head>
+    
+    <body>
+    
+    	<h1><?php echo gettext("Maps"); ?></h1>
+
+        <div id="map">
+	    <!-- Ici s'affichera la carte -->
+		</div>
+	
+		<script>
+			$(document).ready(function() {
+		
+				var $obj = lc_lightbox('.popup a', {
+
+					img_zoom : true,			// whether to enable zooming system
+		 			author_by_txt : '<?php echo gettext("by"); ?>',	// which text is used before the author name, by default is "by"
+
+		  			slideshow	: true, 		// whether to enable slideshow
+		  			open_close_time : 200,	// durée de l'animation pour l'ouverture et la fermeture de la lightbox
+		 			ol_time_diff : 100,		// animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
+		 			fading_time : 50,			// durée de l'animation de fondu des éléments
+		  			animation_time : 100,
+		  			slideshow_time : 4000,	// durée de l'intervalle du diaporama
+		  			autoplay : false, 		// autoplay slideshow - bool
+		  			counter : false,			// s'il faut afficher le compteur d'éléments
+		  			progressbar : false,		// s'il faut afficher une barre de progression lors de l'exécution du diaporama
+
+		  			max_width : '95%',		// largeur maximale de la lightbox
+		 			max_height : '95%',		// hauteur maximale de la lightbox
+		  			ol_opacity : 0.7, 		// overlay opacity / value between 0 and 1
+		  			ol_color : '#111', 		// background color of the overlay
+		  			ol_pattern : false, 		// overlay patterns - insert the pattern name or false
+
+		  			wrap_class : 'lcl_fade_oc',	// Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
+		  			skin : 'minimal',			// minimal | light | dark
+		  			data_position : 'over',	// Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
+		  			cmd_position : 'inner',	// Déclare où les commandes doivent être affichées : inner|outer
+		  			ins_close_pos	: 'normal', // set closing button position for inner commands - normal/corner	
+		  			nav_btn_pos : 'normal',	// Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
+
+		  			txt_hidden : true, // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side)
+		  			shox_title : true,		// s'il faut afficher les titres
+		  			show_descr : true,		// s'il faut afficher les descriptions
+		  			show_author : true,		// s'il faut afficher les auteurs
+
+		  			thumbs_nav : false,		// permet la navigation par vignettes (nécessite des éléments affiche ou images)
+
+		  			fullscreen : true,		// Autoriser ou non le mode plein écran
+		  			fs_img_behavior : 'smart',	//Comportement de l'image en plein écran : fit|fill|smart
+		  			fs_only : 500,			// s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
+		  			browser_fs_mode : true,	// utiliser ou non le mode plein écran du navigateur
+
+		  			txt_toggle_cmd : true,	// s'il faut afficher le bouton de basculement du texte de l'élément
+		  			download : true,			// whether to show element's file download button
+		  			autoplay_videos : false, // bool / whether to autoplay videos (NB: modern browsers ignore this for deeplinked elements. Not applied if video has poster)
+		  			touchswipe : true,		// permet les interactions tactiles (nécessite AlloyFinger)
+		  			rclick_prevent : true,	// s'il faut éviter le clic droit sur les éléments de la lightbox
+
+					});
+		
+			});
+		</script>
+	
+		<p class="navPage"><a href="../index.php"><?php echo gettext("Home"); ?></a> | <a href="../photo-du-mois.php"><?php echo gettext("Picture of the month"); ?></a></p>
+		
+		<p><em><small>&copy; 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
+
+		<script src='../lc-lightbox/js/lc_lightbox.min.js'></script>
+		<script src='../lc-lightbox/lib/AlloyFinger/alloy_finger.min.js'></script>
+
+    </body>
+</html>

maps/js/Control.FullScreen.css

@@ -0,0 +1,39 @@
+.fullscreen-icon {
+	background-image: url('icon-fullscreen.svg');
+	background-size: 26px 52px;
+}
+
+.fullscreen-icon.leaflet-fullscreen-on {
+	background-position: 0 -26px;
+}
+
+.leaflet-touch .fullscreen-icon {
+	background-position: 2px 2px;
+}
+
+.leaflet-touch .fullscreen-icon.leaflet-fullscreen-on {
+	background-position: 2px -24px;
+}
+
+/* Safari still needs this vendor-prefix: https://caniuse.com/mdn-css_selectors_fullscreen */
+/* stylelint-disable-next-line selector-no-vendor-prefix */
+.leaflet-container:-webkit-full-screen {
+	width: 100% !important;
+	height: 100% !important;
+	z-index: 99999;
+}
+
+.leaflet-container:fullscreen {
+	width: 100% !important;
+	height: 100% !important;
+	z-index: 99999;
+}
+
+.leaflet-pseudo-fullscreen {
+	position: fixed !important;
+	width: 100% !important;
+	height: 100% !important;
+	top: 0 !important;
+	left: 0 !important;
+	z-index: 99999;
+}

maps/js/Control.FullScreen.js

@@ -0,0 +1,284 @@
+/*
+ * leaflet.fullscreen
+ * (c) Bruno B.; MIT License
+ * Uses fragments from the package 'screenfull'
+ */
+(function(root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		// define an AMD module that requires 'leaflet'
+		// and resolve to an object containing leaflet
+		define('leafletFullScreen', ['leaflet'], factory);
+	} else if (typeof module === 'object' && module.exports) {
+		// define a CommonJS module that requires 'leaflet'
+		module.exports = factory(require('leaflet'));
+	} else {
+		// Assume 'leaflet' are loaded into global variable already
+		factory(root.L);
+	}
+}(typeof self !== 'undefined'
+	? self
+	: this, (leaflet) => {
+	'use strict';
+
+	if (typeof document === 'undefined') {
+		console.warn('"window.document" is undefined; leaflet.fullscreen requires this object to access the DOM');
+		return false;
+	}
+
+	const nativeAPI = (() => {
+		const methodMap = [
+			// Standard
+			[
+				'requestFullscreen',
+				'exitFullscreen',
+				'fullscreenElement',
+				'fullscreenEnabled',
+				'fullscreenchange',
+				'fullscreenerror'
+			],
+			// New WebKit
+			[
+				'webkitRequestFullscreen',
+				'webkitExitFullscreen',
+				'webkitFullscreenElement',
+				'webkitFullscreenEnabled',
+				'webkitfullscreenchange',
+				'webkitfullscreenerror'
+			]
+		];
+
+		const baseList = methodMap[0];
+		const ret = {};
+
+		for (const methodList of methodMap) {
+			if (methodList[1] in document) {
+				for (let i = 0; i < methodList.length; i++) {
+					ret[baseList[i]] = methodList[i];
+				}
+				return ret;
+			}
+		}
+
+		return false;
+	})();
+
+	const eventNameMap = {
+		change: nativeAPI.fullscreenchange,
+		error: nativeAPI.fullscreenerror,
+	};
+
+	const fullscreenAPI = {
+		request(element, options) {
+			return new Promise((resolve, reject) => {
+				const onFullScreenEntered = function() {
+					this.off('change', onFullScreenEntered);
+					resolve();
+				}.bind(this);
+
+				this.on('change', onFullScreenEntered);
+				element = element || document.documentElement;
+				const returnPromise = element[nativeAPI.requestFullscreen](options);
+				if (returnPromise instanceof Promise) {
+					returnPromise.then(onFullScreenEntered).catch(reject);
+				}
+			});
+		},
+		exit() {
+			return new Promise((resolve, reject) => {
+				if (!this.isFullscreen) {
+					resolve();
+					return;
+				}
+
+				const onFullScreenExit = function() {
+					this.off('change', onFullScreenExit);
+					resolve();
+				}.bind(this);
+
+				this.on('change', onFullScreenExit);
+				const returnPromise = document[nativeAPI.exitFullscreen]();
+				if (returnPromise instanceof Promise) {
+					returnPromise.then(onFullScreenExit).catch(reject);
+				}
+			});
+		},
+		on(event, callback) {
+			const eventName = eventNameMap[event];
+			if (eventName) {
+				document.addEventListener(eventName, callback, false);
+			}
+		},
+		off(event, callback) {
+			const eventName = eventNameMap[event];
+			if (eventName) {
+				document.removeEventListener(eventName, callback, false);
+			}
+		},
+		nativeAPI: nativeAPI
+	};
+
+	Object.defineProperties(fullscreenAPI, {
+		isFullscreen: {
+			get() {
+				return Boolean(document[nativeAPI.fullscreenElement]);
+			}
+		},
+		isEnabled: {
+			enumerable: true,
+			get() {
+				// Coerce to boolean in case of old WebKit
+				return Boolean(document[nativeAPI.fullscreenEnabled]);
+			}
+		}
+	});
+
+	leaflet.Control.FullScreen = leaflet.Control.extend({
+		options: {
+			position: 'topleft',
+			title: 'Full Screen',
+			titleCancel: 'Exit Full Screen',
+			forceSeparateButton: false,
+			forcePseudoFullscreen: false,
+			fullscreenElement: false
+		},
+
+		_screenfull: fullscreenAPI,
+
+		onAdd(map) {
+			let className = 'leaflet-control-zoom-fullscreen';
+			let container;
+			let content = '';
+
+			if (map.zoomControl && !this.options.forceSeparateButton) {
+				container = map.zoomControl._container;
+			} else {
+				container = leaflet.DomUtil.create('div', 'leaflet-bar');
+			}
+
+			if (this.options.content) {
+				content = this.options.content;
+			} else {
+				className += ' fullscreen-icon';
+			}
+
+			this._createButton(this.options.title, className, content, container, this.toggleFullScreen, this);
+			this._map.fullscreenControl = this;
+
+			this._map.on('enterFullscreen exitFullscreen', this._toggleState, this);
+
+			return container;
+		},
+
+		onRemove() {
+			leaflet.DomEvent
+				.off(this.link, 'click', leaflet.DomEvent.stop)
+				.off(this.link, 'click', this.toggleFullScreen, this);
+
+			if (this._screenfull.isEnabled) {
+				leaflet.DomEvent
+					.off(this._container, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
+					.off(this._container, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, this);
+
+				leaflet.DomEvent
+					.off(document, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
+					.off(document, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, this);
+			}
+		},
+
+		_createButton(title, className, content, container, fn, context) {
+			this.link = leaflet.DomUtil.create('a', className, container);
+			this.link.href = '#';
+			this.link.title = title;
+			this.link.innerHTML = content;
+
+			this.link.setAttribute('role', 'button');
+			this.link.setAttribute('aria-label', title);
+
+			L.DomEvent.disableClickPropagation(container);
+
+			leaflet.DomEvent
+				.on(this.link, 'click', leaflet.DomEvent.stop)
+				.on(this.link, 'click', fn, context);
+
+			if (this._screenfull.isEnabled) {
+				leaflet.DomEvent
+					.on(container, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
+					.on(container, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, context);
+
+				leaflet.DomEvent
+					.on(document, this._screenfull.nativeAPI.fullscreenchange, leaflet.DomEvent.stop)
+					.on(document, this._screenfull.nativeAPI.fullscreenchange, this._handleFullscreenChange, context);
+			}
+
+			return this.link;
+		},
+
+		toggleFullScreen() {
+			const map = this._map;
+			map._exitFired = false;
+			if (map._isFullscreen) {
+				if (this._screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					this._screenfull.exit().then(() => map.invalidateSize());
+				} else {
+					leaflet.DomUtil.removeClass(this.options.fullscreenElement
+						? this.options.fullscreenElement
+						: map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
+			} else {
+				if (this._screenfull.isEnabled && !this.options.forcePseudoFullscreen) {
+					this._screenfull.request(this.options.fullscreenElement
+						? this.options.fullscreenElement
+						: map._container).then(() => map.invalidateSize());
+				} else {
+					leaflet.DomUtil.addClass(this.options.fullscreenElement
+						? this.options.fullscreenElement
+						: map._container, 'leaflet-pseudo-fullscreen');
+					map.invalidateSize();
+				}
+				map.fire('enterFullscreen');
+				map._isFullscreen = true;
+			}
+		},
+
+		_toggleState() {
+			this.link.title = this._map._isFullscreen
+				? this.options.title
+				: this.options.titleCancel;
+			this._map._isFullscreen
+				? L.DomUtil.removeClass(this.link, 'leaflet-fullscreen-on')
+				: L.DomUtil.addClass(this.link, 'leaflet-fullscreen-on');
+		},
+
+		_handleFullscreenChange(ev) {
+			const map = this._map;
+			if (ev.target === map.getContainer() && !this._screenfull.isFullscreen && !map._exitFired) {
+				this._screenfull.exit().then(() => map.invalidateSize());
+				map.fire('exitFullscreen');
+				map._exitFired = true;
+				map._isFullscreen = false;
+			}
+		}
+	});
+
+	leaflet.Map.include({
+		toggleFullscreen() {
+			this.fullscreenControl.toggleFullScreen();
+		}
+	});
+
+	leaflet.Map.addInitHook(function() {
+		if (this.options.fullscreenControl) {
+			this.addControl(leaflet.control.fullscreen(this.options.fullscreenControlOptions));
+		}
+	});
+
+	leaflet.control.fullscreen = function(options) {
+		return new leaflet.Control.FullScreen(options);
+	};
+
+	return { leaflet };
+}));

maps/js/icon-fullscreen.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 26 52" xmlns="http://www.w3.org/2000/svg"><path d="M20.6 36.7H16a.9.9 0 0 1-.8-.8v-4.5c0-.2.2-.4.4-.4h1.4c.3 0 .5.2.5.4v3h3c.2 0 .4.2.4.5v1.4c0 .2-.2.4-.4.4zm-9.9-.8v-4.5c0-.2-.2-.4-.4-.4H8.9c-.3 0-.5.2-.5.4v3h-3c-.2 0-.4.2-.4.5v1.4c0 .2.2.4.4.4H9.9c.4 0 .8-.4.8-.8zm0 10.7V42c0-.4-.4-.8-.8-.8H5.4c-.2 0-.4.2-.4.4v1.4c0 .3.2.5.4.5h3v3c0 .2.2.4.5.4h1.4c.2 0 .4-.2.4-.4zm6.9 0v-3h3c.2 0 .4-.2.4-.5v-1.4c0-.2-.2-.4-.4-.4H16c-.4 0-.8.4-.8.8v4.5c0 .2.2.4.4.4h1.5c.3 0 .5-.2.5-.4zM5 10.3V5.9c0-.5.4-.9.9-.9h4.4c.2 0 .4.2.4.4V7c0 .2-.2.4-.4.4h-3v3c0 .2-.2.4-.4.4H5.4a.4.4 0 0 1-.4-.4zm10.3-4.9V7c0 .2.2.4.4.4h3v3c0 .2.2.4.4.4h1.5c.2 0 .4-.2.4-.4V5.9c0-.5-.4-.9-.9-.9h-4.4c-.2 0-.4.2-.4.4zm5.3 9.9H19c-.2 0-.4.2-.4.4v3h-3c-.2 0-.4.2-.4.4v1.5c0 .2.2.4.4.4h4.4c.5 0 .9-.4.9-.9v-4.4c0-.2-.2-.4-.4-.4zm-9.9 5.3V19c0-.2-.2-.4-.4-.4h-3v-3c0-.2-.2-.4-.4-.4H5.4c-.2 0-.4.2-.4.4v4.4c0 .5.4.9.9.9h4.4c.2 0 .4-.2.4-.4z" fill="currentColor"/></svg>

maps/js/scripts.js

@@ -0,0 +1,99 @@
+// On déclare les coordonnées de Paris
+//let lat = 48.852969;
+//let long = 2.349903;
+// On déclare les coordonnées de Dijon
+let lat = 47.316669;
+let long = 5.01667;
+let limites = [];
+let markers = L.markerClusterGroup();
+
+let map = L.map("map", {
+    zoom: 13,
+    center: [lat, long]
+});
+
+
+L.tileLayer("https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png", {
+    minZoom: 1,
+    maxZoom: 20,
+    attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>'
+}).addTo(map); 
+
+
+// On charge sites.json
+fetch("/maps/api/liste.php")
+    .then(data => data.json())
+    .then(sites => {
+        // On boucle sur les sites
+        for(let site of sites){
+            let coords = [site.lat, site.long];
+            
+            // On charge l'icône du marqueur
+            let icone = L.icon({
+                iconUrl: "/maps/images/poi.png",
+                iconSize: [41,41],
+                iconAnchor: [12.5, 41],
+                popupAnchor: [0, -41]
+/*
+                iconUrl: "/maps/images/pin.png",
+                iconSize: [25,41],
+*/
+            });
+            
+            // On crée le marqueur pour chaque site
+            let marker = L.marker(coords, {
+                icon: icone
+            });
+
+/*
+	$lightbox['title_thumb'] = $title_thumb;
+	$lightbox['exif'] = $exif;
+	$lightbox['title'] = $x;
+	$lightbox['legende'] = $y;
+	$lightbox['thumb'] = $thumb;
+	$lightbox['big'] = $big;
+	$lightbox['keywords'] = $keywords;
+	$lightbox['creator'] = $creator;
+	$lightbox['gps'] = $gps;
+	$lightbox['lat'] = $latitude;
+	$lightbox['long'] = $longitude;
+	$lightbox['description'] = $description;
+	$lightbox['width'] = $width;
+	$lightbox['height'] = $height;
+	<img src="${site.thumb}" alt="${site.filename}"  width="300" height="300">
+	<img src="${site.thumb}" alt="${site.filename}"  width="`+largeur+`" height="`+hauteur+`">
+*/
+
+			if ( parseInt(site.width) <= parseInt(site.height) ) {
+				largeur = 200;
+				hauteur = 300;
+			}
+			else
+			{
+				largeur = 300;
+				hauteur = 200;
+			}
+			
+            let popup = `<div class="popup">
+            <div>
+            				<a href="${site.big}" title="${site.title_thumb}" data-lcl-txt="${site.description}" data-lcl-author="${site.creator}">
+                            	<img src="${site.thumb}" alt="${site.filename}"  width="`+largeur+`" height="`+hauteur+`">
+                            </a>
+                            
+                                <h2>${site.title_thumb}</h2>
+                                <p>${site.exif}</p>
+                            </div>
+                        </div>`;
+
+            marker.bindPopup(popup);
+            limites.push(coords);
+
+            // On ajoute le marqueur au cluster
+            markers.addLayer(marker);
+        }
+
+        // On ajoute les clusters à la carte
+        map.addLayer(markers);
+
+        map.fitBounds(limites);
+    });

maps/test.php

@@ -0,0 +1 @@
+<?php echo "Yop !"; ?>

maps/villes.json

@@ -0,0 +1,26 @@
+{
+    "Paris": {
+        "lat": 48.852969,
+        "lon": 2.349903,
+        "description": "Paris est la capitale de la France et une collectivité à statut particulier. Divisée en vingt arrondissements, elle est le chef-lieu de la région Île-de-France et le siège de la métropole du Grand Paris.",
+        "image": "paris.webp"
+    },
+    "Brest": {
+        "lat": 48.383,
+        "lon": -4.5,
+        "description": "Brest est une commune française, chef-lieu d’arrondissement du département du Finistère dans la région Bretagne. C'est un port important, deuxième port militaire en France après Toulon, situé à l'extrémité ouest de la Bretagne.",
+        "image": "brest.webp"
+    },
+    "Quimper": {
+        "lat": 48.0,
+        "lon": -4.1,
+        "description": "Quimper est une commune française de la région Bretagne située dans le nord-ouest de la France. Préfecture du département du Finistère et siège du Conseil départemental, elle est composée de deux cantons. Elle est également la capitale traditionnelle de la Cornouaille, du Pays Glazik et du Pays de Cornouaille (331 300 habitants en 2009), le siège de l'intercommunalité de Quimper Bretagne occidentale (100 187 habitants en 2014), le siège de l'arrondissement de Quimper et enfin le siège du diocèse de Quimper et Léon. Ses habitants sont appelés les Quimpérois.",
+        "image": "quimper.webp"
+    },
+    "Bayonne": {
+        "lat": 43.5,
+        "lon": -1.467,
+        "description": "Bayonne, Baiona en basque et en gascon, est une commune française et l’une des deux sous-préfectures du département des Pyrénées-Atlantiques, en région Nouvelle-Aquitaine.",
+        "image": "bayonne.webp"
+    }
+}