maps_osm.php
Version OpenStreetMap de maps.php
This commit is contained in:
157
maps_osm.php
Normal file
157
maps_osm.php
Normal file
@@ -0,0 +1,157 @@
|
||||
<?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" 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'>
|
||||
|
||||
<style type="text/css">
|
||||
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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:$base");
|
||||
$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);
|
||||
?>
|
||||
|
||||
<div id="map">
|
||||
<!-- Ici s'affichera la carte -->
|
||||
</div>
|
||||
|
||||
<!-- Fichiers Javascript -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js'></script>
|
||||
<script type="text/javascript">
|
||||
// On initialise la latitude et la longitude de Paris (centre de la carte)
|
||||
var lat = 48.852969;
|
||||
var lon = 2.349903;
|
||||
var macarte = null;
|
||||
var markerClusters; // Servira à stocker les groupes de marqueurs
|
||||
// Nous initialisons une liste de marqueurs
|
||||
var sites = {
|
||||
<?php
|
||||
$a = "";
|
||||
for( $i = 0; $i < $rowcount; $i++) {
|
||||
$a .= '"' . $result[$i]['filename'] . '": { "lat": ' . $result[$i]['lat'] . ', "lon": ' . $result[$i]['long'] . ' },' . "\r\n";
|
||||
}
|
||||
$a = substr_replace($a, '', -3, 1);
|
||||
echo $a;
|
||||
?>
|
||||
};
|
||||
|
||||
// Fonction d'initialisation de la carte
|
||||
function initMap() {
|
||||
// Nous initialisons la liste des marqueurs
|
||||
var markers = [];
|
||||
// Nous définissons le dossier qui contiendra les marqueurs
|
||||
var iconBase = '<?php echo host(); ?>icons/';
|
||||
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
|
||||
macarte = L.map('map').setView([lat, lon], 11);
|
||||
markerClusters = L.markerClusterGroup(); // Nous initialisons les groupes de marqueurs
|
||||
// Nous ajoutons un marqueur
|
||||
//var marker = L.marker([lat, lon]).addTo(macarte);
|
||||
|
||||
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
|
||||
// Il est toujours bien de laisser le lien vers la source des données
|
||||
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
|
||||
minZoom: 1,
|
||||
maxZoom: 20
|
||||
}).addTo(macarte);
|
||||
|
||||
// Nous parcourons la liste des villes
|
||||
for (site in sites) {
|
||||
var myIcon = L.icon({
|
||||
iconUrl: iconBase + "point-of-interest-3.png",
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [25, 50],
|
||||
popupAnchor: [-3, -76],
|
||||
});
|
||||
|
||||
var marker = L.marker([sites[site].lat, sites[site].lon], { icon: myIcon }); //.addTo(macarte);
|
||||
marker.bindPopup(site);
|
||||
markerClusters.addLayer(marker); // Nous ajoutons le marqueur aux groupes
|
||||
markers.push(marker); // Nous ajoutons le marqueur à la liste des marqueurs
|
||||
}
|
||||
|
||||
var group = new L.featureGroup(markers); // Nous créons le groupe des marqueurs pour adapter le zoom
|
||||
macarte.fitBounds(group.getBounds().pad(0.5)); // Nous demandons à ce que tous les marqueurs soient visibles, et ajoutons un padding (pad(0.5)) pour que les marqueurs ne soient pas coupés
|
||||
|
||||
macarte.addLayer(markerClusters);
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
|
||||
initMap();
|
||||
};
|
||||
</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