<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' }}' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js'></script>
<script type='text/javascript'>
function initMap() {
var host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png?hq={hq}';
var attribution = '© 2024 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>';
var map = L.map('map').setView([53.14, 8.22], 13);
L.tileLayer(host, {
id: 'your-api-key',
hq: L.Browser.retina,
attribution: attribution
}).addTo(map);
map.attributionControl.setPrefix(false);
}
</script>
</head>
<body onload='initMap()'>
<div id='map' style='height: 400px; width: 400px;'></div>
</body>
</html>