<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/proj4@2.15.0/dist/proj4.min.js"></script>
    <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() {
        // Proj4js für die UTM-Projektion einrichten
        const projectionName = "EPSG:25832";
        proj4.defs(projectionName, "+proj=utm +zone=32 +datum=WGS84 +units=m +no_defs");
        ol.proj.proj4.register(proj4);

        const apiKey = 'your-api-key';
        const host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

        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.TileWMS({
                url: host,
                params: {
                    'LAYERS': 'osm', 
                    'SRS': 'EPSG:25832',
                    'hq': true,
                },
                projection: 'EPSG:25832',
                attributions: attribution,
            }),
        });

        new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.transform([8.22, 53.15], 'EPSG:4326', projectionName),
                zoom: 13,
                projection: projectionName,
                extent: ol.proj.transformExtent([4, 46, 16, 56], 'EPSG:4326', projectionName)
            }),
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>