<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" type="text/css">
<script type='text/javascript'>
function initMap() {
var apiKey = 'your-api-key';
var hq = ol.has.DEVICE_PIXEL_RATIO > 1;
var tilePixelRatio = hq ? 2 : 1;
var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/{z}/{x}/{y}.png';
if (hq) {
host += '?hq=true';
}
var attribution = new ol.Attribution({
html: '© 2024 · <a href="https://maps.omniscale.com/">Omniscale</a>'+
'· Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>'
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
tilePixelRatio: tilePixelRatio,
url: host
})
})
],
view: new ol.View({
center: ol.proj.transform([8.22, 53.14], 'EPSG:4326', 'EPSG:3857'),
zoom: 13
})
});
};
</script>
</head>
<body onload='initMap()'>
<div id='map' style='height: 400px; width: 400px;'></div>
</body>
</html>