rene
a561759034
- /maplibre-test rendert bayern.pmtiles per pmtiles-Protokoll, minimaler Geometrie-Style (OpenMapTiles-Layer, keine Glyphs), Touren-Demo als GeoJSON-Line - maplibre-gl 4.7.1 + pmtiles 3.2.1 lokal vendored (CSP script-src 'self') - CSP: worker-src blob: (MapLibre-Worker)
37 lines
1.3 KiB
HTML
37 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
<title>Ban Yaro — MapLibre Tile-Spike</title>
|
|
<link rel="stylesheet" href="/js/vendor/maplibre-gl.css">
|
|
<style>
|
|
html, body { margin: 0; height: 100%; }
|
|
#map { position: absolute; inset: 0; }
|
|
#hud {
|
|
position: absolute; top: 10px; left: 10px; z-index: 5;
|
|
background: rgba(255,255,255,.9); padding: 8px 12px; border-radius: 8px;
|
|
font: 13px/1.4 system-ui, sans-serif; box-shadow: 0 1px 6px rgba(0,0,0,.2);
|
|
max-width: 260px;
|
|
}
|
|
#hud b { color: #2e7d32; }
|
|
.attr {
|
|
position: absolute; bottom: 0; right: 0; z-index: 5;
|
|
background: rgba(255,255,255,.7); padding: 2px 6px;
|
|
font: 11px system-ui, sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<div id="hud">
|
|
<b>Tile-Spike</b> — eigene PMTiles (Bayern)<br>
|
|
Quelle: <code>/tiles/bayern.pmtiles</code><br>
|
|
<span id="status">lädt…</span>
|
|
</div>
|
|
<div class="attr">© OpenStreetMap contributors</div>
|
|
<script src="/js/vendor/maplibre-gl.js"></script>
|
|
<script src="/js/vendor/pmtiles.js"></script>
|
|
<script src="/js/maplibre-test.js"></script>
|
|
</body>
|
|
</html>
|