<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@^5.24.0/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl@^5.24.0/dist/maplibre-gl.js"></script>
<script type='text/javascript'>
function initMap() {
const host = 'https://maps.omniscale.net/v2/your-api-key/style.default/{z}/{x}/{y}.png';
const attribution = '© 2026 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>';
const map = new maplibregl.Map({
container: 'map',
center: [8.22, 53.14], // [lng, lat]
zoom: 13,
style: {
version: 8,
sources: {
omniscale: {
type: 'raster',
tiles: [host],
tileSize: 256,
attribution: attribution
}
},
layers: [
{
id: 'omniscale',
type: 'raster',
source: 'omniscale'
}
]
}
});
}
</script>
</head>
<body onload='initMap()'>
<div id='map' style='height: 400px; width: 400px;'></div>
</body>
</html>