208 lines
6.5 KiB
PHP
208 lines
6.5 KiB
PHP
<?php
|
|
session_start();
|
|
include 'i18n_setup.php';
|
|
/*include 'localize.php';
|
|
$domain = 'sentier';
|
|
localize($domain);
|
|
*/
|
|
include 'functions.php';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Sur le sentier: la photos du mois">
|
|
<title><?php echo gettext("Maps"); ?></title>
|
|
<meta name="msapplication-TileColor" content="#2b5797">
|
|
<meta name="msapplication-config" content="/icons/browserconfig.xml">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
|
|
<link rel="manifest" href="/icons/site.webmanifest">
|
|
<link rel="shortcut icon" href="/icons/favicon.ico">
|
|
|
|
<link rel="stylesheet" href="css/sls.css">
|
|
|
|
<link rel='stylesheet' href='lc-lightbox/css/lc_lightbox.min.css'>
|
|
<link rel='stylesheet' href='lc-lightbox/css/open_close_fx.css'>
|
|
<link rel='stylesheet' href='lc-lightbox/skins/minimal.css'>
|
|
<style>
|
|
#map{
|
|
width: 100%;
|
|
height: 400px;
|
|
}
|
|
#mapCanvas {
|
|
width: 100%;
|
|
height: 650px;
|
|
}
|
|
</style>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhi566YKgkoys4UAInAeNkU1pkz4JU9I8"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<h1><?php echo gettext("Maps"); ?></h1>
|
|
|
|
<?php
|
|
|
|
try {
|
|
$conn4 = new PDO('sqlite:db_photo.sqlite3');
|
|
$query4 = "SELECT filename, filesize, dateoriginal, lens, speed, correctexpo, iso, usercomment, comment, model, metering, flash, focal, program, wb, mode, width, height, html, aperture, software, lat, long, alt, keywords, title, creator, city, department, code, country, copyright, legende FROM photos WHERE lat != '' ORDER BY dateoriginal DESC";
|
|
|
|
$stmt = $conn4->prepare($query4);
|
|
$stmt->execute();
|
|
|
|
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
|
$rowcount = count($result);
|
|
|
|
$conn4 = null;
|
|
}
|
|
catch(PDOException $e) {
|
|
echo $e->getMessage();
|
|
}
|
|
|
|
//_pr($result);
|
|
?>
|
|
|
|
|
|
<script>
|
|
function initMap() {
|
|
var map;
|
|
var bounds = new google.maps.LatLngBounds();
|
|
var mapOptions = {
|
|
// 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); //
|
|
|
|
// 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);
|
|
echo $a;
|
|
?>
|
|
];
|
|
|
|
// Info window content
|
|
var infoWindowContent = [
|
|
<?php
|
|
$b = "";
|
|
for( $i = 0; $i < $rowcount; $i++) {
|
|
|
|
$lb = data_for_lightbox($result[$i]);
|
|
|
|
$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;
|
|
?>
|
|
];
|
|
|
|
// 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>
|
|
|
|
|
|
<div id="mapCanvas"></div>
|
|
|
|
|
|
<script>
|
|
$(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>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
|
|
|
<script src='lc-lightbox/js/lc_lightbox.min.js'></script>
|
|
<script src='lc-lightbox/lib/AlloyFinger/alloy_finger.min.js'></script>
|
|
|
|
</body>
|
|
|
|
</html>
|