121 lines
5.4 KiB
PHP
121 lines
5.4 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title><?php if (isset($poi['name'])) echo $poi['name'] . ' - ' ; ?>průvodce Matička Metropolis</title>
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<script src="/static/uboot.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
|
|
<script src="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.js"></script>
|
|
<script src="https://cdn.maptiler.com/mapbox-gl-leaflet/latest/leaflet-mapbox-gl.js"></script>
|
|
<script src="/static/leaflet-sidebar.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
|
|
<link rel="stylesheet" href="https://cdn.maptiler.com/mapbox-gl-js/v1.5.1/mapbox-gl.css" />
|
|
<link rel="stylesheet" href="/static/leaflet-sidebar.css" />
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<style>
|
|
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
|
|
html, body, #map {
|
|
height: 100%;
|
|
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
#article-cheat {
|
|
color: gray;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sidebar" class="sidebar collapsed">
|
|
<!-- Nav tabs -->
|
|
<div class="sidebar-tabs">
|
|
<ul role="tablist">
|
|
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="sidebar-content">
|
|
<div class="sidebar-pane" id="home">
|
|
<h1 class="sidebar-header">
|
|
<span id="article-name"><?php if (isset($poi['name'])) { echo $poi['name']; } else { echo'Turistický průvodce'; } ?></span>
|
|
<span class="sidebar-close"><i class="fa fa-caret-left"></i></span>
|
|
</h1>
|
|
|
|
<div id="article-text">
|
|
<?php if (isset($poi['description'])) { echo $poi['description']; } else { ?>
|
|
<p>Matička Metropolis...</p>
|
|
<p>Stránka je v přípravě.</p>
|
|
<?php } ?>
|
|
</div>
|
|
|
|
<div id="article-cheat">
|
|
<?php if (isset($poi['description'])) { echo $poi['cheatsheet']; } ?>
|
|
</div>
|
|
|
|
<a href="#" id="article-link">odkaz na stránku</a>
|
|
<a href="#" id="article-edit-link" <?php if (!user()) echo 'style="display: none;"'; ?>>upravit</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="map" class="sidebar-map">
|
|
<a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
|
|
</div>
|
|
<p><a href="https://svita.cz/">Svita.cz</a> <a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a></p>
|
|
<script>
|
|
function webgl_support() {
|
|
try {
|
|
var canvas = document.createElement('canvas');
|
|
return !!window.WebGLRenderingContext &&
|
|
(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function detectMob() {
|
|
return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
|
|
}
|
|
|
|
whenReady(function () {
|
|
|
|
var map = L.map('map').setView([<?php if (isset($poi['lon'])) { echo $poi['lat'] . ',' . $poi['lon']; } else { echo '50.08536, 14.42040';} ?>], 15);
|
|
|
|
if (!webgl_support() || detectMob()) {
|
|
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
} else {
|
|
var gl = L.mapboxGL({
|
|
attribution: "\u003ca href=\"https://svita.cz/\"\u003eSvita.cz\u003c/a\u003e \u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
|
|
style: 'https://api.maptiler.com/maps/28280352-f69a-45fd-8dd7-2f178d7ed64f/style.json?key=lFBi7gs1S6TyJPtVVvOX'
|
|
}).addTo(map);
|
|
}
|
|
|
|
|
|
var sidebar = L.control.sidebar('sidebar').addTo(map);
|
|
|
|
L.geoJSON(<?php echo json_encode($geojson); ?>, {}).on('click', function (layer) {
|
|
// TODO - dirty JS
|
|
console.log('klik', layer.layer.feature.properties.name);
|
|
document.getElementById('article-name').innerText = layer.layer.feature.properties.name;
|
|
document.getElementById('article-text').innerHTML = layer.layer.feature.properties.description;
|
|
document.getElementById('article-cheat').innerHTML = layer.layer.feature.properties.cheatsheet;
|
|
document.getElementById('article-link').href = '/poi/' + layer.layer.feature.properties.slug + '/';
|
|
document.getElementById('article-edit-link').href = '/pois/edit/' + layer.layer.feature.properties.id + '/';
|
|
sidebar.open('home');
|
|
}).addTo(map);
|
|
|
|
<?php if (isset($poi['name'])) { ?>sidebar.open('home');<?php } ?>
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|