192 lines
5.6 KiB
PHP
192 lines
5.6 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';
|
|
session_start();
|
|
$domain = 'sentier';
|
|
localize($domain);
|
|
?>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhi566YKgkoys4UAInAeNkU1pkz4JU9I8"></script>
|
|
<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<h1><?php echo gettext("Maps"); ?></h1>
|
|
|
|
<?php
|
|
|
|
try {
|
|
$conn4 = new PDO('sqlite:db_photo.sqlite3');
|
|
$query4 = "SELECT filename, dateoriginal, 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 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();
|
|
}
|
|
?>
|
|
|
|
|
|
<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 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>© 2013-<?php echo date('Y'); ?> sur-le-sentier.fr</small></em></p>
|
|
|
|
<script src='js/lc_lightbox.min.js'></script>
|
|
<script src='js/alloy_finger.min.js'></script>
|
|
|
|
</body>
|
|
|
|
</html>
|