195 lines
6.0 KiB
PHP
195 lines
6.0 KiB
PHP
<?php session_start();
|
|
include 'localize.php';
|
|
$domain = 'sentier';
|
|
localize($domain);
|
|
include 'functions.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='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 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='lc-lightbox/js/lc_lightbox.min.js' type='text/javascript'></script>
|
|
<script src='lc-lightbox/lib/AlloyFinger/alloy_finger.min.js' type='text/javascript'></script>
|
|
|
|
</body>
|
|
|
|
</html>
|