Hilfe

Question

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script type='text/javascript'>
      function initMap() {
        const host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png';

        const attribution = '&copy; 2025 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap (Lizenz: ODbL)</a>';

        let map = L.map('map').setView([53.14, 8.22], 13);
          L.tileLayer(host, {
            id: 'your-api-key',
            attribution: attribution
          }).addTo(map);
        map.attributionControl.setPrefix(false);
      }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Answer 2

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script type='text/javascript'>
      function initMap() {
        const host = 'https://maps.omniscale.net/v2/{id}/style.grayscale/{z}/{x}/{y}.png';

        const attribution = '&copy; 2025 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        let map = L.map('map').setView([53.14, 8.22], 13);
          L.tileLayer(host, {
            id: 'your-api-key',
            attribution: attribution
          }).addTo(map);

        map.attributionControl.setPrefix(false);
      }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Answer 3

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script type='text/javascript'>
      function initMap() {
        const host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png?hq={hq}';

        const attribution = '&copy; 2025 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        let map = L.map('map').setView([53.14, 8.22], 13);
          L.tileLayer(host, {
            id: 'your-api-key',
            hq: L.Browser.retina,
            attribution: attribution
          }).addTo(map);
        map.attributionControl.setPrefix(false);
      }
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Answer 4

<!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; 2025 &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>

Answer 5

<!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.grayscale/{z}/{x}/{y}.png';
        if (hq) {
          host += '?hq=true';
        }

        const attribution = '&copy; 2025 &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>

Answer 6

<!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; 2025 &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.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>

Answer 7

<!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; 2025 &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>

Answer 8

<!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>

Hilfe

Verwendung in Webanwendungen

URL zum Einbinden des Kartendienstes

URL zum Einbinden des Kartendienstes im Graustufen-Layout

URL zum Einbinden des Kartendienstes im Outdoor-Layout

Beispiele mit Leaflet

Beispiele mit OpenLayers

Nützliches

Über uns

Kontaktdaten