update

map.html

@@ -4,7 +4,8 @@
   <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/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%; }
@@ -70,61 +71,93 @@
   </div>
 
   <div class="info-box">
-    Zoom 14–19 &nbsp;|&nbsp; Dlaždice: 256×256 px, z=18
+    WebGL &nbsp;|&nbsp; 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],
+    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
     });
 
-    // Base layers
-    const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '© OpenStreetMap contributors',
-      maxZoom: 19
-    });
+    map.addControl(new maplibregl.NavigationControl(), 'bottom-right');
+    map.addControl(new maplibregl.ScaleControl({ unit: 'metric' }), 'bottom-right');
 
-    // 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 layerIds = {
+      osm: 'osm-layer',
+      tiles: 'tiles-layer',
+      annotated: 'annotated-layer'
+    };
 
-    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]);
+      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');
     }
 
-    // Keyboard shortcut: 1/2/3 to switch layers
     document.addEventListener('keydown', e => {
       if (e.key === '1') setLayer('osm');
       if (e.key === '2') setLayer('tiles');