Hilfe

Question

Answer 1

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' }}' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js'></script>
    <script type='text/javascript'>
      function initMap() {
        var host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png';

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

        var 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://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' }}' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js'></script>
    <script type='text/javascript'>
      function initMap() {
        var host = 'https://maps.omniscale.net/v2/{id}/style.grayscale/{z}/{x}/{y}.png';

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

        var 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://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' }}' />
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js'></script>
    <script type='text/javascript'>
      function initMap() {
        var host = 'https://maps.omniscale.net/v2/{id}/style.default/{z}/{x}/{y}.png?hq={hq}';

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

        var 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://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" type="text/css">
    
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/{z}/{x}/{y}.png';

        var attribution = new ol.Attribution({
          html: '&copy; 2024 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>'
        });

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ({
              attributions: [attribution],
                url: host
              })
            })
          ],
          view: new ol.View({
            center: ol.proj.transform([8.22, 53.14], 'EPSG:4326', 'EPSG:3857'),
            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://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" type="text/css">
    
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.grayscale/{z}/{x}/{y}.png';

        var attribution = new ol.Attribution({
          html: '&copy; 2024 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>'
        });

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ({
              attributions: [attribution],
                url: host
              })
            })
          ],
          view: new ol.View({
            center: ol.proj.transform([8.22, 53.14], 'EPSG:4326', 'EPSG:3857'),
            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://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" type="text/css">
    
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var hq = ol.has.DEVICE_PIXEL_RATIO > 1;
        var tilePixelRatio = hq ? 2 : 1;
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/{z}/{x}/{y}.png';
        if (hq) {
          host += '?hq=true';
        }

        var attribution = new ol.Attribution({
          html: '&copy; 2024 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>'
        });

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ({
                attributions: [attribution],
                tilePixelRatio: tilePixelRatio,
                url: host
              })
            })
          ],
          view: new ol.View({
            center: ol.proj.transform([8.22, 53.14], 'EPSG:4326', 'EPSG:3857'),
            zoom: 13
          })
        });
      };
    </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://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js" type="text/javascript"></script>
      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" type="text/css">
    
    <script type='text/javascript'>
      function initMap() {
        var projectionName = 'EPSG:25832';
        proj4.defs(projectionName, '+proj=utm +zone=32 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');

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

        var attribution = new ol.Attribution({
          html: '&copy; 2024 &middot; <a href="https://maps.omniscale.com/">Omniscale</a>'+
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>'
        });

        var map = new ol.Map({
          target: 'map',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.TileWMS({
                projection: projectionName,
                attributions: [attribution],
                url: host,
                params: {
                  'SRS': 'EPSG:25832',
                  'LAYERS': 'osm'
                }
              })
            })
          ],
          view: new ol.View({
            projection: projectionName,
            center: ol.proj.transform([8.22, 53.15], 'EPSG:4326', projectionName),
            zoom: 13,
            minZoom: 6,
            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://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js' type='text/javascript'></script>
    <style type="text/css">#map .olControlAttribution {bottom: 5px}</style>
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/${z}/${x}/${y}.png';
        var attribution = '&copy; 2024 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        var layer = new OpenLayers.Layer.XYZ("TMS", host, {attribution: attribution});

        var map = new OpenLayers.Map('map', {
          center: new OpenLayers.LonLat(915046, 7008963),
          zoom: 13,
          layers: [layer],
          projection: new OpenLayers.Projection('EPSG:3857')
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Answer 9

<!DOCTYPE html>
<html>
  <head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js' type='text/javascript'></script>
    <style type="text/css">#map .olControlAttribution {bottom: 5px}</style>
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.grayscale/${z}/${x}/${y}.png';


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

        var layer = new OpenLayers.Layer.XYZ("TMS", host, {attribution: attribution});

        var map = new OpenLayers.Map('map', {
          center: new OpenLayers.LonLat(915046, 7008963),
          zoom: 13,
          layers: [layer],
          projection: new OpenLayers.Projection('EPSG:3857')
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Answer 10

<!DOCTYPE html>
<html>
  <head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js' type='text/javascript'></script>
    <style type="text/css">#map .olControlAttribution {bottom: 5px}</style>
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';
        var attribution = '&copy; 2024 &middot; <a href="https://maps.omniscale.com/">Omniscale</a> ' +
            '&middot; Map data: <a href="https://www.openstreetmap.org/copyright">OpenStreetMap  (Lizenz: ODbL)</a>';

        var layer = new OpenLayers.Layer.WMS('Example layer', host,
            {layers: 'osm'}, {attribution: attribution}
        );

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

Answer 11

<!DOCTYPE html>
<html>
  <head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js' type='text/javascript'></script>
    <style type="text/css">#map .olControlAttribution {bottom: 5px}</style>
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

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

        var layer = new OpenLayers.Layer.WMS('Example layer', host,
            {layers: 'osm'}, {attribution: attribution}
        );

        var map = new OpenLayers.Map('map', {
          center: new OpenLayers.LonLat(448155, 5888572),
          zoom: 5,
          layers: [layer],
          projection: new OpenLayers.Projection('EPSG:25832'),
          maxExtent: new OpenLayers.Bounds(384015, 5846682, 516991, 5931295)
        });
      };
    </script>
  </head>
  <body onload='initMap()'>
    <div id='map' style='height: 400px; width: 400px;'></div>
  </body>
</html>

Answer 12

<!DOCTYPE html>
<html>
  <head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js' type='text/javascript'></script>
    <style type="text/css">#map .olControlAttribution {bottom: 5px}</style>
    <script type='text/javascript'>
      function initMap() {
        var apiKey = 'your-api-key';
        var host = 'https://maps.omniscale.net/v2/' + apiKey + '/style.default/map';

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

        var layer = new OpenLayers.Layer.WMS('Example layer', host, {
            layers: 'osm'
          }, {
            singleTile: true,
            ratio: 1,
            attribution: attribution
          }
        );
        var map = new OpenLayers.Map('map', {
          center: new OpenLayers.LonLat(448155, 5888572),
          zoom: 5,
          layers: [layer],
          projection: new OpenLayers.Projection('EPSG:25832'),
          maxExtent: new OpenLayers.Bounds(384015, 5846682, 516991, 5931295)
        });
      };
    </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

Beispiele mit Leaflet

Beispiele mit OpenLayers 3

Beispiele mit OpenLayers 2

Nützliches

Nützliches

Über uns

Kontaktdaten