maps.php
Nouveautés: - AJAX pour récupérer les données depuis la base - Leaflet pour l’API - Openstreetmap pour les cartes
This commit is contained in:
120
maps/index.php
Normal file
120
maps/index.php
Normal file
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
session_start();
|
||||
include '../i18n_setup.php';
|
||||
/*include 'localize.php';
|
||||
$domain = 'sentier';
|
||||
localize($domain);
|
||||
*/
|
||||
include '../functions.php';
|
||||
|
||||
$base = 'db_photo.sqlite3';
|
||||
$chemin = '../photos/img/';
|
||||
$chemin_thumb = str_replace("img", "thumb", $chemin);
|
||||
?>
|
||||
<!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">
|
||||
|
||||
<!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
||||
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
||||
<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'>
|
||||
|
||||
<!-- Fichiers Javascript -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin="" defer></script>
|
||||
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js' defer></script>
|
||||
<script src="js/scripts.js" defer></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>
|
||||
|
||||
<div id="map">
|
||||
<!-- Ici s'affichera la carte -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
var $obj = lc_lightbox('.popup a', {
|
||||
|
||||
img_zoom : true, // whether to enable zooming system
|
||||
author_by_txt : '<?php echo gettext("by"); ?>', // which text is used before the author name, by default is "by"
|
||||
|
||||
slideshow : true, // whether to enable slideshow
|
||||
open_close_time : 200, // durée de l'animation pour l'ouverture et la fermeture de la lightbox
|
||||
ol_time_diff : 100, // animation de superposition avance (à l'ouverture) et retard (à la fermeture) à la fenêtre
|
||||
fading_time : 50, // durée de l'animation de fondu des éléments
|
||||
animation_time : 100,
|
||||
slideshow_time : 4000, // durée de l'intervalle du diaporama
|
||||
autoplay : false, // autoplay slideshow - bool
|
||||
counter : false, // s'il faut afficher le compteur d'éléments
|
||||
progressbar : false, // s'il faut afficher une barre de progression lors de l'exécution du diaporama
|
||||
|
||||
max_width : '95%', // largeur maximale de la lightbox
|
||||
max_height : '95%', // hauteur maximale de la lightbox
|
||||
ol_opacity : 0.7, // overlay opacity / value between 0 and 1
|
||||
ol_color : '#111', // background color of the overlay
|
||||
ol_pattern : false, // overlay patterns - insert the pattern name or false
|
||||
|
||||
wrap_class : 'lcl_fade_oc', // Classes personnalisées ajoutées au wrapper: effet à l'ouverture de la lb (lcl_fade_oc | lcl_zoomin_oc | lcl_rtl_oc)
|
||||
skin : 'minimal', // minimal | light | dark
|
||||
data_position : 'over', // Spécifie où les données des éléments seront affichées. Les modes disponibles sont :over, under|rside|lside
|
||||
cmd_position : 'inner', // Déclare où les commandes doivent être affichées : inner|outer
|
||||
ins_close_pos : 'normal', // set closing button position for inner commands - normal/corner
|
||||
nav_btn_pos : 'normal', // Régle les flèches et la position de lecture/pause. Options disponibles: normal|middle
|
||||
|
||||
txt_hidden : true, // whether to hide texts on lightbox opening - bool or int (related to browser's smaller side)
|
||||
shox_title : true, // s'il faut afficher les titres
|
||||
show_descr : true, // s'il faut afficher les descriptions
|
||||
show_author : true, // s'il faut afficher les auteurs
|
||||
|
||||
thumbs_nav : false, // permet la navigation par vignettes (nécessite des éléments affiche ou images)
|
||||
|
||||
fullscreen : true, // Autoriser ou non le mode plein écran
|
||||
fs_img_behavior : 'smart', //Comportement de l'image en plein écran : fit|fill|smart
|
||||
fs_only : 500, // s'il faut utiliser uniquement l'ouverture de la lightbox en mode plein écran (utile pour les appareils mobiles) : false | (integer)
|
||||
browser_fs_mode : true, // utiliser ou non le mode plein écran du navigateur
|
||||
|
||||
txt_toggle_cmd : true, // s'il faut afficher le bouton de basculement du texte de l'élément
|
||||
download : true, // whether to show element's file download button
|
||||
autoplay_videos : false, // bool / whether to autoplay videos (NB: modern browsers ignore this for deeplinked elements. Not applied if video has poster)
|
||||
touchswipe : true, // permet les interactions tactiles (nécessite AlloyFinger)
|
||||
rclick_prevent : true, // s'il faut éviter le clic droit sur les éléments de la lightbox
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</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>
|
||||
Reference in New Issue
Block a user