150 lines
3.7 KiB
PHP
150 lines
3.7 KiB
PHP
<!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>
|