Sehen wir uns einmal ein voll funktionsfähiges Beispiel für einen Kartenaufruf an.
Kopieren Sie für einen Test auf Ihrem eigenen Rechner den folgenden Code in eine als "reiner Text" formatierte Textdatei. Speichern Sie die Textdatei als .html ab und öffnen Sie sie in einem Browser.
<html>
<head>
<link rel='stylesheet' href='https://mapz.com/api/static/css/ol/7.3.0/ol.css' />
<script src='https://mapz.com/api/static/javascript/lib/7.3.0/ol.js' type='text/javascript'></script>
<style>
.map {
height: 400px;
font-family: "HelveticaNeue", "Helvetica";
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
target: document.getElementById('map'),
logo: false,
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: ['© 2024 <a target="_blank" href="http://www.mapz.com">mapz.com </a>\
- Map Data: <a target="_blank" href="http://openstreetmap.org">OpenStreetMap</a>\
(<a href="http://opendatacommons.org/licenses/odbl/1.0/" target="_blank">ODbL</a>)'],
tilePixelRatio: 2,
url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
})
})
],
view: new ol.View({
center: ol.proj.transform([18.41723, -33.92717], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
</script>
</body>
</html>Unter jedem unserer Codebeispiele finden Sie übrigens einen Link auf JSFiddle. JSFiddle ist eine Spielwiese, auf der Sie den Code beliebig verändern können und sofort die Auswirkungen sehen. Probieren Sie es direkt mal aus!
Um eine Karte in eine Webseite einzubinden, müssen vier Dinge erledigt werden:
Wir setzen ein Custom Build der aktuellen OpenLayers-Bibliothek ein, das wie folgt eingebunden wird:
<link rel='stylesheet' href='https://www.mapz.com/api/static/css/ol/7.3.0/ol.css' />
<script src='https://www.mapz.com/api/static/javascript/lib/7.3.0/ol.js'
type='text/javascript'></script>
Die Karte wird über ein <div>-Element ausgeliefert.
<div id='map' class='map'></div>
Eigenschaften der Karte wie Höhe, Breite und Randgestaltung können über CSS gesteuert werden. Sie finden eine Übersicht über alle vordefinierten CSS-Elemente bei jedem Beispiel unter "CSS-Index". Alle vordefinierten Werte können anschließend im HTML angepasst werden. Wir definieren hier, dass die Karte 600 Pixel hoch und Bildschirmbreit angezeigt werden soll:
<style>
.map {
height: 600px;
width: 100%;
}
</style>
Mit diesen Zeilen JavaScript wird Kapstadt in Südafrika im Kartendesign "Shades of Gray" in Zoomlevel 14 aufgerufen:
<script>
var map = new ol.Map({
target: document.getElementById('map'),
logo: false,
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
tilePixelRatio: 2,
url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
}),
})
],
view: new ol.View({
center: ol.proj.transform([18.41723, -33.92717], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})
});
</script>
Nicht vergessen: Setzen Sie in der URL des Layerabrufs für demo-817ca352 ihren eigenen API-Key ein. Über eine E-Mail an unseren Autoresponder unter demo.api.key@mapz.com können Sie sich sofort einen voll funktionsfähigen Demo-Key abrufen.
Die folgende Zeile erzeugt ein OpenLayers "map"-Object.
var map = new ol.Map({ ... });Um die Karte dem <div> hinzuzufügen, fügen wir dem map-Objekt die ID des <div> als Ziel hinzu.
target: document.getElementById('map'),Im Array "layers: [ ... ] wird in der URL festgelegt, welche der verfügbaren Kartenlayer abgerufen werden sollen. In unserem Beispiel ist das für die Kartendesignlinie "Shades of Gray" der Layer mapz_shades_of_gray_hq in Retina-Qualität. tilePixelRatio:2 weist den Browser an, die Karte auf niedriger aufgelösten Displays zu verkleinern. Für eine einfache Bildschirmauflösung rufen Sie einfach nur mapz_shades_of_gray auf, setzen das tilePixelRatio auf 1 und rufen anstelle eines .jpeg ein .png ab.
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
tilePixelRatio: 2,
url:'https://tiles.mapz.com/mapproxy/v1/demo-817ca352/tiles/1.0.0/mapz_shades_of_gray_hq/EPSG3857/{z}/{x}/{-y}.jpeg'
}),
})
],
Sie können die mapz-Karte auch mit weiteren Layern aus anderen Quellen kombinieren, beispielsweise Ihren eigenen. Hier finden Sie eine Liste der möglichen Datenformate.
Mit den view-Parametern definieren Sie nun den gewünschten Kartenmittelpunkt und den Anzeige-Maßstab, den Sie in 20 vordefinierten Schritten justieren können.
view: new ol.View({
center: ol.proj.transform([18.41723, -33.92717], 'EPSG:4326', 'EPSG:3857'),
zoom: 14
})Wie Sie hier sehen, haben wir die Geokoordinaten des Kartenmittelpunktes in der Projektion EPSG:4326 angegeben. Da unser aktueller Kartenlayer mapz_shades_of_gray_hq mit der Projektion EPSG:3857 arbeitet, rechnet OpenLayers die Koordinaten automatisch für uns um.
Das war schon alles, was nötig ist, um eine Karte einzubinden. Weitere Hinweise zu den möglichen Parametern finden Sie als Kommentar direkt im JavaScript-Code unserer Codebeispiele.
Weiterführende Informationen finden Sie bei OpenLayers. Nützliche Tools zum konvertieren von CSV-Dateien in JSON- oder GeoJSON-Dateien bietet die Website ConvertCSV.com.