iFrame GMaps

-photo-du-mois.php

css/sls.css

@@ -119,6 +119,10 @@ a:link, a:visited {
 	font-size: 0.75em
 	}
 
+.exif a:link {
+  text-decoration: none;
+}
+
 .navPage {
 	display: block;
 	margin-left: auto;

functions.php

@@ -292,6 +292,15 @@ function data_for_lightbox($data) {
 	$iso = $data['iso'];
 	$exif = $model . " \u{30FB} " .  $objectif . " \u{30FB} " .  $speed . " \u{30FB} " .  $aperture . " \u{30FB} " .  $iso . "ISO";
 	
+	$latitude = $data['lat'];
+	$longitude = $data['long'];
+	$altitude = $data['alt'];
+	
+	$da = isset($exif['EXIF']['DateTimeOriginal']) ? $exif['EXIF']['DateTimeOriginal'] : '';
+	
+	$gps = (!empty($longitude) && !empty($latitude)) ? $latitude . "," . $longitude : "";
+	
+	//$gps = $longitude . "," . $latitude;
 	
 	$title = $data['title'];
 	$legende = $data['legende'];
@@ -325,6 +334,7 @@ function data_for_lightbox($data) {
 	$lightbox['big'] = $big;
 	$lightbox['keywords'] = $keywords;
 	$lightbox['creator'] = $creator;
+	$lightbox['gps'] = $gps;
 
 	/*
 		Array

index.php

@@ -26,8 +26,12 @@
 	
 	<link rel="stylesheet" type="text/css" href="css/sls.css" />
 
-<?php
+   <?php include 'functions.php'; 
+	   $domain = 'sentier';
+	   localize($domain);
+	?>
 
+<?php
 //Get a list of file paths using the glob function.
 $fileList = glob('vegas/img/*.{jpg,jpeg,JPG,JPEG,heic,HEIC,webp,WEBP}', GLOB_BRACE);
 
@@ -40,6 +44,7 @@ $host = $pv_URIprotocol . $_SERVER['HTTP_HOST'];
 
 $wp = (($_SERVER['SERVER_NAME'] == "sur-le-sentier.fr") ? "blog" : "wordpress");
 
+/*
 //if ($_SERVER['SERVER_NAME'] == 'airbook.local')
 $root = $_SERVER['DOCUMENT_ROOT'];
 //$root = dirname($_SERVER['SCRIPT_FILENAME']); // /Users/bruno/Sites/sls
@@ -59,6 +64,7 @@ bind_textdomain_codeset($domain, 'UTF-8');
 textdomain($domain);
 
 $nation = array('fr_FR' => gettext('French'), 'en_US' => gettext('English') , 'de_DE' => gettext('German'), 'es_ES' => gettext('Spanish') );
+*/
 ?>
 
 </head>

maps.php

@@ -15,20 +15,19 @@
    		#map{
 		   width: 100%;
 		   height: 400px;
-	   		}
+	   	}
 		#mapCanvas {
 			width: 100%;
 			height: 650px;
 		}
    </style>
 	   
-<?php include 'functions.php'; 
+	<?php include 'functions.php'; 
-$domain = 'sentier';
+	$domain = 'sentier';
-localize($domain);
+	localize($domain);
-?>
+	?>
-
+	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhi566YKgkoys4UAInAeNkU1pkz4JU9I8"></script>
 	<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>			
-	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
 
 </head>
 
@@ -56,25 +55,38 @@ localize($domain);
 			}
 ?>
 
-<div id="mapCanvas"></div>
 
-<script>
+	<script>
 		function initMap() {
 			var map;
 			var bounds = new google.maps.LatLngBounds();
 			var mapOptions = {
-				mapTypeId: 'roadmap'
+				// Nous définissons le type de carte (ici carte routière)
+				mapTypeId: 'roadmap',
+				// Nous activons les options de contrôle de la carte (plan, satellite...)
+				mapTypeControl: true,
+				mapTypeControlOptions: {
+					// Position de Plan|Satellite 
+					position: google.maps.ControlPosition.TOP_LEFT,
+					// Cette option sert à définir comment les options se placent
+					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
+				},
+				zoomControl: true,
+				zoomControlOptions: {
+					position: google.maps.ControlPosition.RIGHT_CENTER,
+				}
 			};
 							
 			// Display a map on the web page
 			map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
-			map.setTilt(100);
+			map.setTilt(100);	//
 				
 			// Multiple markers location, latitude, and longitude
 			var markers = [
 				<?php
 					$a = "";
 					for( $i = 0; $i < $rowcount; $i++) {
+						// '4 => icons'
 						$a .=  '["'.$result[$i]['filename'].'", '.$result[$i]['lat'].', '.$result[$i]['long'].'],' . "\r\n"; 
 						} 
 					$a = substr_replace($a, '', -3, 1);
@@ -87,24 +99,10 @@ localize($domain);
 				<?php
 					$b = "";
 					for( $i = 0; $i < $rowcount; $i++) {
-						/*
-						$thumb = host() . str_replace("photos/img", "photos/thumb", $result[$i]['filename']);
-						$keywords = str_replace(',', " \u{30FB} ", clean_keywords($result[$i]['keywords']));
-						$title = $result[$i]['title'];
-						$legende = $result[$i]['legende'];
-						$file = basename($result[$i]['filename']);
-						if (!empty($title)) $x = $title;
-						elseif (!empty($legende)) $x= $legende;
-						else $x = $file;
-						$big = host() . $result[$i]['filename'];
-						*/
-						//$tab = array();
-						//$tab = $result[$i];
 
-						//_pr($result[$i]);
 						$lb = data_for_lightbox($result[$i]);
 						
-						$b .= '[\'<div class="info_content"><h3>' . htmlspecialchars($lb['title_thumb']) . '</h3><div class="gm_thumb"><a href="' . $lb['big'] . '"  title="' . htmlspecialchars($lb['title']) .  '" data-lcl-txt="' . htmlspecialchars($lb['title']) . '" data-lcl-author="' . htmlspecialchars($lb['exif']) . '"><img src="' . $lb['thumb'] . '" /></a></div><p>' . htmlspecialchars($lb['title']) . '</p><p>' . htmlspecialchars($lb['legende']) . '</p><p>' . htmlspecialchars($lb['keywords']) . '</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'] . '" /></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;
@@ -149,7 +147,11 @@ localize($domain);
 		
 		// Load initialize function
 		google.maps.event.addDomListener(window, 'load', initMap);
-		</script>
+	</script>
+	
+
+	<div id="mapCanvas"></div>
+
 		
 	<script type='text/javascript'>
 			$(document).ready(function() {
@@ -177,12 +179,12 @@ localize($domain);
 			});
 		</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 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>@sur-le-sentier.fr 2022</small></em></p>
+	<p><em><small>@sur-le-sentier.fr 2022</small></em></p>
 
-<script src='js/lc_lightbox.min.js'></script>
+	<script src='js/lc_lightbox.min.js'></script>
-<script src='js/alloy_finger.min.js'></script>
+	<script src='js/alloy_finger.min.js'></script>
 			
 </body>
 			

photo-du-mois.php

@@ -33,7 +33,7 @@ else $page = intval($_GET['page']);
 <?php
 try {
 	$conn4 = new PDO('sqlite:db_photo.sqlite3');
-	$query4 = "SELECT filename, date, lens, speed, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, title, creator, keywords, metering, flash, focal, wb, program FROM photos ORDER BY date DESC LIMIT ? OFFSET ?";
+	$query4 = "SELECT filename, date, lens, speed, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, title, creator, keywords, metering, flash, focal, wb, program FROM photos WHERE id='26' ORDER BY date DESC LIMIT ? OFFSET ?";
 	//nb d'archive par page
 	$limit = 13;
 	$offset = $limit * ($page -1);
@@ -66,10 +66,44 @@ try {
 	?>
 		<p class="titrePhoto"><?php echo $lb['title']; ?></p>
 		<p class="legendePhoto"><?php echo $lb['legende']; ?></p>
-	<?php } 
+		<?php if (!empty($lb['gps']) && false) {  ?>
+		<p class="titrePhoto">
+			<a href = "https://maps.google.com/maps?q=<?php echo $lb['gps']; ?>&t=&z=9&ie=UTF8&iwloc=&output=embed" title="Google Maps Iframe" data-lcl-txt="LC Lightbox can handle any iframe:&lt;br/&gt; for example you can also display websites and Google Documents &lt;em&gt;(then Word docs, PDFs, etc)&lt;/em&gt;" data-lcl-author="@sur-le-sentier.fr"><?php echo "\u{2693} "; ?></a>
+		</p>
+		<?php } ?>
+		<?php
+		/*
+		🌍
+		globe centré sur l’Europe et l’Afrique
+		Unicode: U+1F30D, UTF-8: F0 9F 8C 8D
+		⚓︎
+		ANCHOR
+		Unicode: U+2693 U+FE0E, UTF-8: E2 9A 93 EF B8 8E
+			*/
+		//echo  "\u{1F30D} ";
+		/*
+		<!--
+		# Feature-Policy
+		<IfModule mod_headers.c>
+			Header set Feature-Policy "geolocation 'self'; vibrate 'none'"
+		</IfModule>
+		-->
 		
-	echo '<div class="exif">';
+		*/
-	echo $lb['exif'];
+		?>
+
+	<?php 
+	}
+	
+	if (!empty($lb['gps'])) {
+		$map = '<a href = "https://maps.google.com/maps?q=' . $lb['gps'] . '&t=&z=9&ie=UTF8&iwloc=&output=embed" title="' . $lb['title'] . '" data-lcl-txt="' . $lb['legende'] . '">' . " \u{30FB}  \u{2693} " . '</a>';
+		}
+	else {
+		$map = '';
+		}
+
+	echo '<div class="exif" id="lcl_gm">';
+	echo $lb['exif'] . $map;
 	echo '</div>';
 ?>
 
@@ -158,6 +192,26 @@ try {
 		  rclick_prevent : true,
 	  });
 
+		var $obj3 = lc_lightbox('#lcl_gm a', {
+			img_zoom : true,
+			open_close_time : 100,
+			ol_time_diff : 100,
+			max_width : '65%',
+			max_height : '65%',
+			wrap_class : 'lcl_zoomin_oc',
+			skin : 'minimal',
+			data_position : 'rside',
+			cmd_position : 'inner',
+			show_title : true,
+			show_descr : true,
+			show_author : true,	
+			fullscreen : true,
+			fs_img_behavior : 'smart',
+			browser_fs_mode : false,
+			touchswipe : true,
+			rclick_prevent : true,
+		});
+
   });
   </script>