22-03-2022

2022-03-22 19:28:28 +01:00
parent 0a3eb3d379
commit 414346b7f1
10 changed files with 1440 additions and 39 deletions
--- a/maps2.php
+++ b/maps2.php
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>Photo du mois</title>
+	<link rel="stylesheet" href="css/sls.css">
+	 
+    <link rel='stylesheet' href='css/lc_lightbox.min.css' />
+    <link rel='stylesheet' href='css/open_close_fx.css' />
+    <link rel='stylesheet' href='css/minimal.css' />
+    <style>
+   		#map{
+		   width: 100%;
+		   height: 400px;
+	   		}
+		#mapCanvas {
+			width: 100%;
+			height: 650px;
+		}
+   </style>
+	   
+<?php include 'functions.php'; ?>
+
+	<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>
+
+<body>
+
+	
+<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>
+
+<?php
+	$page = 1;
+	
+	try {
+		$conn4 = new PDO('sqlite:db_photo.sqlite3');
+		$query4 = "SELECT filename, date, lens, exposure, iso, width, height, html, aperture, model, lat, long, alt, legende, copyright, titre, createur, keywords FROM photos WHERE lat != '' ORDER BY date DESC LIMIT ? OFFSET ?";
+		//nb d'archive par page
+		$limit = 13;
+		$offset = $limit * ($page -1);
+		//echo "offset: " . $offset;
+	
+		$stmt = $conn4->prepare($query4);
+		$stmt->execute(array($limit, $offset));
+		
+		$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
+		$rowcount = count($result);
+		
+		$conn4 = null;
+		}
+		catch(PDOException $e) {
+			echo $e->getMessage();
+			}
+		
+		//_pr($result);
+?>
+
+<div id="mapCanvas"></div>
+
+<script>
+		function initMap() {
+			var map;
+			var bounds = new google.maps.LatLngBounds();
+			var mapOptions = {
+				mapTypeId: 'roadmap'
+			};
+							
+			// Display a map on the web page
+			map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
+			map.setTilt(100);
+				
+			// Multiple markers location, latitude, and longitude
+			var markers = [
+				<?php
+					$a = "";
+					for( $i = 0; $i < $rowcount; $i++) {
+						$a .=  '["'.$result[$i]['filename'].'", '.$result[$i]['lat'].', '.$result[$i]['long'].'],' . "\r\n"; 
+						} 
+					$a = substr_replace($a, '', -3, 1);
+					echo $a;
+				?>
+			];
+								
+			// Info window content
+			var infoWindowContent = [
+				<?php
+					$b = "";
+					for( $i = 0; $i < $rowcount; $i++) {
+						$b .= '[\'<div class="info_content"><h3>' . $result[$i]['filename'] . '</h3><p>' . $result[$i]['lat'] . '</p></div>\'],' . "\r\n";				
+						} 
+					$b = substr_replace($b, '', -3, 1);
+					echo $b;
+				?>
+			];
+				
+			// Add multiple markers to map
+			var infoWindow = new google.maps.InfoWindow(), marker, i;
+			
+			// Place each marker on the map  
+			for( i = 0; i < markers.length; i++ ) {
+				
+				var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
+				bounds.extend(position);
+				marker = new google.maps.Marker({
+					position: position,
+					map: map,
+					icon: markers[i][3],
+					title: markers[i][0]
+				});
+				
+				// Add info window to marker   
+				
+				google.maps.event.addListener(marker, 'click', (function(marker, i) {
+					return function() {
+						infoWindow.setContent(infoWindowContent[i][0]);
+						infoWindow.open(map, marker);
+					}
+				})(marker, i));
+				
+				
+				// Center the map to fit all markers on the screen
+				map.fitBounds(bounds);
+			}
+		
+			// Set zoom level
+			var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
+				this.setZoom(6);
+				google.maps.event.removeListener(boundsListener);
+			});
+		}
+		
+		// Load initialize function
+		google.maps.event.addDomListener(window, 'load', initMap);
+		</script>
+		
+
+		
+<p><em><small>@ 2022</small></em></p>
+			
+<script src='js/lc_lightbox.min.js'></script>
+<script src='js/alloy_finger.min.js'></script>
+			
+</body>
+			
+</html>