<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">
         
    <script type='text/javascript'>
      function initMap() {
        const apiKey = 'your-api-key';

        const hq = ol.has.DEVICE_PIXEL_RATIO > 1;
        const tilePixelRatio = hq ? 2 : 1;
        let host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/{z}/{x}/{y}.png';
        if (hq) {
          host += '?hq=true';
        }
  
        const attribution = '&copy; 2026 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        const layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: host,
                attributions: attribution,
                tilePixelRatio: tilePixelRatio,
            }),
        });

        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([8.22, 53.14]), 
                zoom: 13,
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>