169 lines
4.8 KiB
HTML
169 lines
4.8 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>
|
||
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
|
||
<link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
|
||
<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">
|
||
WebGL | Zoom 14–19 | Dlaždice: 256×256 px, z=18
|
||
</div>
|
||
|
||
<script>
|
||
const base = window.location.origin;
|
||
|
||
const map = new maplibregl.Map({
|
||
container: 'map',
|
||
style: {
|
||
version: 8,
|
||
glyphs: 'https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf',
|
||
sources: {
|
||
osm: {
|
||
type: 'raster',
|
||
tiles: [
|
||
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||
'https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
||
],
|
||
tileSize: 256,
|
||
attribution: '© OpenStreetMap contributors',
|
||
maxzoom: 19
|
||
},
|
||
tiles: {
|
||
type: 'raster',
|
||
tiles: [`${base}/tiles/{z}/{x}/{y}.jpg`],
|
||
tileSize: 256,
|
||
minzoom: 13,
|
||
maxzoom: 18,
|
||
attribution: 'Letecké snímky HK'
|
||
},
|
||
annotated: {
|
||
type: 'raster',
|
||
tiles: [`${base}/tiles_annotated/{z}/{x}/{y}.jpg`],
|
||
tileSize: 256,
|
||
minzoom: 13,
|
||
maxzoom: 18,
|
||
attribution: 'Anotované snímky HK'
|
||
}
|
||
},
|
||
layers: [
|
||
{
|
||
id: 'osm-layer',
|
||
type: 'raster',
|
||
source: 'osm',
|
||
layout: { visibility: 'none' }
|
||
},
|
||
{
|
||
id: 'tiles-layer',
|
||
type: 'raster',
|
||
source: 'tiles',
|
||
layout: { visibility: 'none' }
|
||
},
|
||
{
|
||
id: 'annotated-layer',
|
||
type: 'raster',
|
||
source: 'annotated',
|
||
layout: { visibility: 'visible' }
|
||
}
|
||
]
|
||
},
|
||
center: [15.836, 50.208],
|
||
zoom: 16,
|
||
minZoom: 13,
|
||
maxZoom: 19
|
||
});
|
||
|
||
map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
|
||
map.addControl(new maplibregl.ScaleControl({ unit: 'metric' }), 'bottom-right');
|
||
|
||
const layerIds = {
|
||
osm: 'osm-layer',
|
||
tiles: 'tiles-layer',
|
||
annotated: 'annotated-layer'
|
||
};
|
||
|
||
let current = 'annotated';
|
||
|
||
function setLayer(name) {
|
||
if (name === current) return;
|
||
map.setLayoutProperty(layerIds[current], 'visibility', 'none');
|
||
map.setLayoutProperty(layerIds[name], 'visibility', 'visible');
|
||
current = name;
|
||
document.querySelectorAll('.layer-toggle button').forEach(b => b.classList.remove('active'));
|
||
document.getElementById('btn-' + name).classList.add('active');
|
||
}
|
||
|
||
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>
|