31-03-2022
index.php maps.php photo-du-mois.php insert_bdd.php functions.php (localize($domain), data_for_lightbox($data)
This commit is contained in:
166
maps.php
166
maps.php
@@ -5,7 +5,7 @@
|
||||
<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>
|
||||
<title><?php echo gettext("Maps"); ?></title>
|
||||
<link rel="stylesheet" href="css/sls.css">
|
||||
|
||||
<link rel='stylesheet' href='css/lc_lightbox.min.css' />
|
||||
@@ -16,9 +16,16 @@
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
#mapCanvas {
|
||||
width: 100%;
|
||||
height: 650px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<?php include 'functions.php'; ?>
|
||||
<?php include 'functions.php';
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
?>
|
||||
|
||||
<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>
|
||||
@@ -28,21 +35,16 @@
|
||||
<body>
|
||||
|
||||
|
||||
<h1 class="_h1"><?php echo gettext("Photo du mois"); ?></h1>
|
||||
<h1 class="_h1"><?php echo gettext("Maps"); ?></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;
|
||||
$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 lat != '' ORDER BY date DESC";
|
||||
|
||||
$stmt = $conn4->prepare($query4);
|
||||
$stmt->execute(array($limit, $offset));
|
||||
$stmt->execute();
|
||||
|
||||
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
$rowcount = count($result);
|
||||
@@ -52,38 +54,132 @@
|
||||
catch(PDOException $e) {
|
||||
echo $e->getMessage();
|
||||
}
|
||||
|
||||
_pr($result);
|
||||
|
||||
$imgLat = $result[0]['lat'];
|
||||
$imgLng = $result[0]['long'];
|
||||
?>
|
||||
|
||||
<div id="mapCanvas"></div>
|
||||
|
||||
<script>
|
||||
var myCenter = new google.maps.LatLng(<?php echo $imgLat; ?>, <?php echo $imgLng; ?>);
|
||||
function initialize(){
|
||||
var mapProp = {
|
||||
center:myCenter,
|
||||
zoom:10,
|
||||
mapTypeId:google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
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++) {
|
||||
/*
|
||||
$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 = substr_replace($b, '', -3, 1);
|
||||
echo $b;
|
||||
?>
|
||||
];
|
||||
|
||||
// Add multiple markers to map
|
||||
var infoWindow = new google.maps.InfoWindow(), marker, i;
|
||||
|
||||
var map = new google.maps.Map(document.getElementById("map"),mapProp);
|
||||
|
||||
var marker = new google.maps.Marker({
|
||||
position:myCenter,
|
||||
animation:google.maps.Animation.BOUNCE
|
||||
// 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]
|
||||
});
|
||||
|
||||
marker.setMap(map);
|
||||
|
||||
// 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);
|
||||
}
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
</script>
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
|
||||
<p><em><small>@ 2022</small></em></p>
|
||||
// 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>
|
||||
|
||||
<script type='text/javascript'>
|
||||
$(document).ready(function() {
|
||||
|
||||
var $obj = lc_lightbox('.gm_thumb a', {
|
||||
img_zoom : true,
|
||||
open_close_time : 200,
|
||||
ol_time_diff : 100,
|
||||
wrap_class : 'lcl_zoomin_oc',
|
||||
skin : 'minimal', // minimal | light | dark
|
||||
data_position : 'over',
|
||||
cmd_position : 'inner',
|
||||
txt_hidden : false,
|
||||
//shox_title : true, // s'il faut afficher les titres
|
||||
show_descr : false, // s'il faut afficher les descriptions
|
||||
//show_author : true, // s'il faut afficher les auteurs
|
||||
fullscreen : true,
|
||||
fs_img_behavior : 'smart',
|
||||
fs_only : 500,
|
||||
browser_fs_mode : true,
|
||||
txt_toggle_cmd : true,
|
||||
rclick_prevent : true,
|
||||
});
|
||||
|
||||
});
|
||||
</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>@sur-le-sentier.fr 2022</small></em></p>
|
||||
|
||||
<script src='js/lc_lightbox.min.js'></script>
|
||||
<script src='js/alloy_finger.min.js'></script>
|
||||
|
||||
Reference in New Issue
Block a user