update

2026-04-22 13:19:46 +02:00
parent d7620979ee
commit 46492f2e23
3113 changed files with 2911 additions and 186 deletions
--- a/map.html
+++ b/map.html
@@ -0,0 +1,135 @@
+<!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 &nbsp;|&nbsp; 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>