162 lines
5.0 KiB
HTML
162 lines
5.0 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" />
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<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);
|
||
}
|
||
|
||
.legend {
|
||
position: absolute;
|
||
bottom: 24px;
|
||
right: 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);
|
||
}
|
||
.legend-item { display: flex; align-items: center; gap: 6px; margin: 3px 0; }
|
||
.legend-swatch { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; }
|
||
</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_finetuned" class="active" onclick="setLayer('annotated_finetuned')">Finetuned model</button>
|
||
<button id="btn-annotated_base" onclick="setLayer('annotated_base')">Base model</button>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
Leaflet | Zoom 10–22 | Dlaždice: 256×256 px, z=18
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<div style="font-weight:bold;margin-bottom:4px;">Typ vozidla</div>
|
||
<div class="legend-item"><div class="legend-swatch" style="background:#00DC00;"></div> car</div>
|
||
<div class="legend-item"><div class="legend-swatch" style="background:#FFDC00;"></div> van</div>
|
||
<div class="legend-item"><div class="legend-swatch" style="background:#DC0000;"></div> truck</div>
|
||
<div class="legend-item"><div class="legend-swatch" style="background:#0078FF;"></div> bus</div>
|
||
</div>
|
||
|
||
<script>
|
||
const base = window.location.origin;
|
||
|
||
const map = L.map('map', {
|
||
center: [50.208, 15.836],
|
||
zoom: 16,
|
||
minZoom: 10,
|
||
maxZoom: 22,
|
||
zoomControl: true
|
||
});
|
||
|
||
const layers = {
|
||
osm: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||
attribution: '© OpenStreetMap contributors',
|
||
maxZoom: 19,
|
||
maxNativeZoom: 19
|
||
}),
|
||
tiles: L.tileLayer(`${base}/tiles/{z}/{x}/{y}.jpg`, {
|
||
minNativeZoom: 18,
|
||
maxNativeZoom: 18,
|
||
maxZoom: 22,
|
||
attribution: 'Letecké snímky HK'
|
||
}),
|
||
annotated_finetuned: L.tileLayer(`${base}/tiles_annotated_finetuned/{z}/{x}/{y}.jpg`, {
|
||
minNativeZoom: 18,
|
||
maxNativeZoom: 18,
|
||
maxZoom: 22,
|
||
attribution: 'Anotované snímky — Finetuned'
|
||
}),
|
||
annotated_base: L.tileLayer(`${base}/tiles_annotated_base/{z}/{x}/{y}.jpg`, {
|
||
minNativeZoom: 18,
|
||
maxNativeZoom: 18,
|
||
maxZoom: 22,
|
||
attribution: 'Anotované snímky — Base'
|
||
})
|
||
};
|
||
|
||
let current = 'annotated_finetuned';
|
||
layers[current].addTo(map);
|
||
|
||
L.control.scale({ imperial: false }).addTo(map);
|
||
|
||
function setLayer(name) {
|
||
if (name === current) return;
|
||
map.removeLayer(layers[current]);
|
||
layers[name].addTo(map);
|
||
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_finetuned');
|
||
if (e.key === '4') setLayer('annotated_base');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|