<!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 = '© 2025 · <a href="https://maps.omniscale.com/">Omniscale</a>'+
'· Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>';
const layer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: host,
params: {
'SRS': 'EPSG:25832',
'LAYERS': 'osm',
'hq': true,
},
ratio: 1,
projection: 'EPSG:25832',
}),
});
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>