update
This commit is contained in:
Lukáš Trkan
196
output/map.html
Normal file
196
output/map.html
Normal file
@@ -0,0 +1,196 @@
|
||||
<!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_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">
|
||||
WebGL | Zoom 10–22 | 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,
|
||||
maxzoom: 22,
|
||||
attribution: 'Letecké snímky HK'
|
||||
},
|
||||
annotated: {
|
||||
type: 'raster',
|
||||
tiles: [`${base}/tiles_annotated/{z}/{x}/{y}.jpg`],
|
||||
tileSize: 256,
|
||||
maxzoom: 22,
|
||||
attribution: 'Anotované snímky HK'
|
||||
},
|
||||
annotated_finetuned: {
|
||||
type: 'raster',
|
||||
tiles: [`${base}/tiles_annotated_finetuned/{z}/{x}/{y}.jpg`],
|
||||
tileSize: 256,
|
||||
maxzoom: 22,
|
||||
attribution: 'Anotované snímky — Finetuned'
|
||||
},
|
||||
annotated_base: {
|
||||
type: 'raster',
|
||||
tiles: [`${base}/tiles_annotated_base/{z}/{x}/{y}.jpg`],
|
||||
tileSize: 256,
|
||||
maxzoom: 22,
|
||||
attribution: 'Anotované snímky — Base'
|
||||
}
|
||||
},
|
||||
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: 'none' }
|
||||
},
|
||||
{
|
||||
id: 'annotated-finetuned-layer',
|
||||
type: 'raster',
|
||||
source: 'annotated_finetuned',
|
||||
layout: { visibility: 'visible' }
|
||||
},
|
||||
{
|
||||
id: 'annotated-base-layer',
|
||||
type: 'raster',
|
||||
source: 'annotated_base',
|
||||
layout: { visibility: 'none' }
|
||||
}
|
||||
]
|
||||
},
|
||||
center: [15.836, 50.208],
|
||||
zoom: 16,
|
||||
minZoom: 10,
|
||||
maxZoom: 22
|
||||
});
|
||||
|
||||
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',
|
||||
annotated_finetuned: 'annotated-finetuned-layer',
|
||||
annotated_base: 'annotated-base-layer'
|
||||
};
|
||||
|
||||
let current = 'annotated_finetuned';
|
||||
|
||||
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_finetuned');
|
||||
if (e.key === '4') setLayer('annotated_base');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user