136 lines
3.9 KiB
HTML
136 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="cs">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>HK Aerial — Detekce vozidel</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body { height: 100%; }
|
||
#map { height: 100vh; width: 100%; }
|
||
|
||
.layer-toggle {
|
||
position: absolute;
|
||
top: 12px;
|
||
right: 12px;
|
||
z-index: 1000;
|
||
background: white;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||
overflow: hidden;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 13px;
|
||
}
|
||
.layer-toggle button {
|
||
display: block;
|
||
width: 100%;
|
||
padding: 9px 16px;
|
||
border: none;
|
||
background: white;
|
||
cursor: pointer;
|
||
text-align: left;
|
||
color: #333;
|
||
transition: background 0.15s;
|
||
}
|
||
.layer-toggle button:hover { background: #f0f0f0; }
|
||
.layer-toggle button.active { background: #2563eb; color: white; font-weight: bold; }
|
||
.layer-toggle .label {
|
||
padding: 7px 16px 4px;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
color: #888;
|
||
letter-spacing: 0.05em;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.info-box {
|
||
position: absolute;
|
||
bottom: 24px;
|
||
left: 12px;
|
||
z-index: 1000;
|
||
background: rgba(255,255,255,0.9);
|
||
border-radius: 6px;
|
||
padding: 8px 12px;
|
||
font-family: Arial, sans-serif;
|
||
font-size: 12px;
|
||
color: #444;
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="map"></div>
|
||
|
||
<div class="layer-toggle">
|
||
<div class="label">Vrstva</div>
|
||
<button id="btn-osm" onclick="setLayer('osm')">OSM podklad</button>
|
||
<button id="btn-tiles" onclick="setLayer('tiles')">Letecké snímky</button>
|
||
<button id="btn-annotated" class="active" onclick="setLayer('annotated')">Anotované snímky</button>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
Zoom 14–19 | Dlaždice: 256×256 px, z=18
|
||
</div>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script>
|
||
const map = L.map('map', {
|
||
center: [50.208, 15.836],
|
||
zoom: 16,
|
||
minZoom: 13,
|
||
maxZoom: 19
|
||
});
|
||
|
||
// Base layers
|
||
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '© OpenStreetMap contributors',
|
||
maxZoom: 19
|
||
});
|
||
|
||
// Custom tile layers — tiles named as "{z}_{x}_{y}.jpg"
|
||
const tilesLayer = L.tileLayer('tiles/18_{x}_{y}.jpg', {
|
||
minNativeZoom: 18,
|
||
maxNativeZoom: 18,
|
||
minZoom: 13,
|
||
maxZoom: 19,
|
||
tileSize: 256,
|
||
errorTileUrl: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
|
||
attribution: 'Letecké snímky HK'
|
||
});
|
||
|
||
const annotatedLayer = L.tileLayer('tiles_annotated/18_{x}_{y}.jpg', {
|
||
minNativeZoom: 18,
|
||
maxNativeZoom: 18,
|
||
minZoom: 13,
|
||
maxZoom: 19,
|
||
tileSize: 256,
|
||
errorTileUrl: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
|
||
attribution: 'Anotované snímky HK'
|
||
});
|
||
|
||
// Start with annotated layer
|
||
annotatedLayer.addTo(map);
|
||
|
||
const layers = { osm, tiles: tilesLayer, annotated: annotatedLayer };
|
||
let current = 'annotated';
|
||
|
||
function setLayer(name) {
|
||
if (name === current) return;
|
||
map.removeLayer(layers[current]);
|
||
map.addLayer(layers[name]);
|
||
current = name;
|
||
document.querySelectorAll('.layer-toggle button').forEach(b => b.classList.remove('active'));
|
||
document.getElementById('btn-' + name).classList.add('active');
|
||
}
|
||
|
||
// Keyboard shortcut: 1/2/3 to switch layers
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === '1') setLayer('osm');
|
||
if (e.key === '2') setLayer('tiles');
|
||
if (e.key === '3') setLayer('annotated');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|