Bruno21
e66bc829cd
index.php maps.php photo-du-mois.php insert_bdd.php functions.php (localize($domain), data_for_lightbox($data)
189 lines
5.5 KiB
PHP
189 lines
5.5 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><?php echo gettext("Maps"); ?></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';
|
|
$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>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<h1 class="_h1"><?php echo gettext("Maps"); ?></h1>
|
|
|
|
<?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 WHERE lat != '' ORDER BY date DESC";
|
|
|
|
$stmt = $conn4->prepare($query4);
|
|
$stmt->execute();
|
|
|
|
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
$rowcount = count($result);
|
|
|
|
$conn4 = null;
|
|
}
|
|
catch(PDOException $e) {
|
|
echo $e->getMessage();
|
|
}
|
|
?>
|
|
|
|
<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++) {
|
|
/*
|
|
$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;
|
|
|
|
// 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>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
|
|
</html>
|