<!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 host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

        // WMS Layer ohne Tiled
        const layer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: host,
                params: {
                    'VERSION': '1.1.1',
                    'LAYERS': 'osm',
                },
                ratio: 1,
                projection: 'EPSG:4326',
            }),
        });

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