Verwendung in Webanwendungen
Sie haben die Möglichkeit den Dienst gekachelt oder als einzelnes Bild einzubinden. Nutzen Sie hierzu folgenden URLs:
https://maps.omniscale.net/v2/ihr-api-key/style.default/maphttps://maps.omniscale.net/v2/ihr-api-key/style.grayscale/map
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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: '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a>'+
'· 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>
<!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: '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a>'+
'· 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>
<!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: '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a>'+
'· 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>
<!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: '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a>'+
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>
<!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 = '© 2023 · <a href="https://maps.omniscale.com/">Omniscale</a> ' +
'· 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>