Landkarten mit OpenLayers einbinden
Diese Seite wird zurzeit überarbeitet, weshalb Teile der hier gemachten Informationen unvollständig und/oder fehlerhaft sein können!
Dies ist eine schrittweise Anleitung für das Einbinden der OpenLayers API in eine Website.
Im Gegensatz zu der proprietären API von Google Maps ist die verwendete Software von OpenLayers Freie Software (BSD-Lizenz). Allerdings sind dafür die Satellitenbilder, die bei OpenLayers verwendet werden, nicht so hochauflösend wie bei Google Maps.
Diese Programmierschnittstelle bietet eine Vielzahl von Einstellungen, von denen hier nur die wichtigsten vorgestellt werden. Weitere Informationen zur API findet man in der ausführlichen Dokumentation.
Grundsätzliches
Um eine Landkarte mit OpenLayers auf einer Website zu platzieren, muss der Quelltext dieser Seite bestimmte Elemente beinhalten. Diese sind im folgenden Beispiel dargestellt:
<!DOCTYPE html>
<html lang='de'>
<head>
<title>Landkarte von OpenStreetMap</title>
<meta charset='UTF-8'>
<link rel='stylesheet' href='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css' type='text/css'>
<style>
#mymap { margin:auto auto 20px; width:700px; height:500px; border:2px solid #777; }
</style>
<script src='https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js'></script>
</head>
<body>
<div id='mymap' class='mymap'>
<noscript><p>Zur Ansicht der Karte muss JavaScript aktiviert sein!</p></noscript>
</div>
<script>
var map = new ol.Map({
target: 'mymap',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([6.958122, 50.941309]),
zoom: 4
})
});
</script>
</body>
</html>
Über das <script>-Element in Zeile 10 wird die API geladen. Das <script>-Element ab Zeile 16 enthält die konkreten Daten für die Konfiguration der Karte, die in den <div>-Container mit der ID mymap (Zeile 13) geladen wird. Die ID kann frei gewählt werden, doch muss sie mit dem Parameter in Zeile 18 übereinstimmen.
Im Folgenden wird eine Reihe von Optionen und Funktionen beschrieben, die hier gemacht werden können, um die Karte den eigenen Bedürfnissen anzupassen.
API Dokumentation: ol.Map, ol.layer, ol.source, ol.View, ol.proj
Beispiele: Simple Map
Kartenposition, Zoomfaktor, Kartentyp
Die Funktion init_map() im Beispiel oben enthält zunächst die drei folgenden Parameter:
• die Koordinaten für den Mittelpunkt der Karte (6.958122 und 50.941309)
• den Zoomfaktor (4)
• den Kartentyp (sat)
Dies sind die minimalen Angaben, die nötig sind, um eine Karte darstellen zu können. Die so angezeigte Karte kann bereits mit der Maus bewegt und durch Doppelklick gezoomt werden (doppelter Linksklick = Einzoomen; Shift ⇧ + doppelter Linksklick = Auszoomen).
Koordinaten
Der erste Wert der Koordinaten gibt die geographische Länge und der zweite die geographische Breite in Grad an, wobei ein positiver Wert für Osten bzw. Norden und ein negativer Wert für Westen bzw. Süden steht. Wenn man die Position eines Ortes nicht kennt, kann man z. B. auf OpenStreetMap diesen Ort suchen und dann auf den Link Permalink unten rechts klicken. Die URL enthält dann die Koordinaten des Ortes (lat = Breite; lon = Länge). Es empfiehlt sich, dabei möglichst dicht heran zu zoomen, um eine sehr genaue Position zu erhalten.
Beispiel:
http://www.openstreetmap.de/karte.html?zoom=8&lat=52.5207846&lon=13.4093412,18&layers=B000TT
Die URL enthält die Werte 52.5207846 und 13.4093412 als Koordinaten für Berlin, Fernsehturm.
Liegen die Koordinaten eines Ortes in der Form Grad/Minuten/Sekunden vor, muss man diese Werte in eine Dezimalzahl umrechnen:
x = grad + min/60 + sek/3600
Zoomfaktor
Die Spanne für das Zoomen bewegt sich zwischen 0 (weiteste Entfernung) bis 18 (sehr kurze Entfernung), abhängig davon, ob Bilder in so hoher Auflösung verfügbar sind.
Kartentyp
Es existieren gegenwärtig zwei Kartentypen:
osm (Straßenkarte von OpenStreetMap)
sat (Luftaufnahmen)
Der Kartentyp hyb stellt eine weitere Ebene mit Ortsnamen, Straßen- und Grenzverläufen zur Verfügung, die über die Satellitenkarte gelegt werden kann:
Hybrider Kartentyp
Um die Karte mit einer Ebene vom Typ hyb zu überlagern, muss der Code lediglich folgendermaßen ergänzt werden:
function init_map() {
var map = new ol.Map({
target: 'mymap',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'hyb'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([6.958122, 50.941309]),
zoom: 4
})
});
}Deutsches OSM-Design
Um einen individuellen Kachelserver (tile server) als Quelle für die Kartenkacheln festzulegen, muss der Code folgendermaßen geändert werden (hier für den Stil der deutschen OpenStreetMap):
Beispiel: Localized OpenStreetMap
function init_map() {
var map = new ol.Map({
target: 'mymap',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://{a-d}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([6.958122, 50.941309]),
zoom: 4
})
});
}Ortsmarkierungen hinzufügen
Um einen Ort durch einen Marker zu kennzeichnen, wird die Karte durch die Vektorebene markerLayer ergänzt (Zeile 39), die ab Zeile 29 definiert wurde. Diese Ebene besitzt zwei Eigenschaften: source (enthält die Positionen der Marker) und style (enthält die Eigenschaften des Icons der Marker). Die Positionen der Marker werden in der Schleife ab Zeile 11 aus dem Array places ausgelesen, das ab Zeile 3 definiert wird und den Längengrad, den Breitengrad sowie den Namen der Orte enthält.
API Dokumentation: ol.Feature, ol.geom, ol.style
Beispiel: Icon Symbolizer
function init_map() {
var places = [
[13.409436, 52.520791, 'Berlin'],
[-0.12769, 51.50736, 'London'],
[2.34684, 48.8551, 'Paris']
];
var markerSource = new ol.source.Vector({});
for (var i = 0; i < places.length; i++){
var markerFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
name: places[i][2]
});
markerSource.addFeature(markerFeature);
}
var markerStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 41],
anchorXUnits: 'fraction', // sets anchor to 50% of icon width on x-axis
anchorYUnits: 'pixels', // sets anchor to 41 pixels from top edge of icon on y-axis
opacity: 1,
src: 'http://www.openstreetmap.org/assets/images/marker-icon-915e83a6fc798c599e5c9e3f759d6bc065d65151019acd0410d1f4731bcaaf72.png'
}))
});
var markerLayer = new ol.layer.Vector({
source: markerSource,
style: markerStyle
});
var map = new ol.Map({
target: 'mymap',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'}),
}), markerLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([6.958122, 50.941309]),
zoom: 4
})
});
}Orte mit Streckenzug verbinden
Nun kann man diese Orte mit einem Streckenzug (MultiLineString) verbinden. Streckenzüge sind eigentlich von Orten unabhängige Objekte, können theoretisch also auch für sich gezeichnet werden, ohne konkrete Orte miteinander zu verbinden. Es müssen dazu die Koordinaten von mindestens zwei Orten angegeben werden.
Im Beispiel wird der Karte dazu eine weitere Vektorebene linesLayer hinzugefügt (Zeile 93), die ab Zeile 83 definiert wurde. Diese Ebene besitzt wieder zwei Eigenschaften: source (enthält die Positionen der Eckpunkte des Streckenzugs) und style (enthält die Eigenschaften der Linien des Streckenzugs). Zusätzlich zu den Eigenschaften der Linien enthält die Variable linesStyle ab Zeile 69 Eigenschaften für die Eckpunkte (hier Scheiben mit der Farbe orange und dem Radius 3). Diese Angaben sind nicht zwingend notwendig und können auch weggelassen werden.
API Dokumentation: ol.format, GeoJSON
Beispiel: Custom Polygon Styles
function init_map() {
var places = [
[13.409436, 52.520791, 'Berlin'],
[-0.12769, 51.50736, 'London'],
[2.34684, 48.8551, 'Paris']
];
var markerSource = new ol.source.Vector({});
var linesData = [];
for (var i = 0; i < places.length; i++){
var markerFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
name: places[i][2]
});
markerSource.addFeature(markerFeature);
linesData.push(ol.proj.fromLonLat([places[i][0], places[i][1]]));
}
var markerStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 41],
anchorXUnits: 'fraction', // sets anchor to 50% of icon width on x-axis
anchorYUnits: 'pixels', // sets anchor to 41 pixels from top edge of icon on y-axis
opacity: 1,
src: 'http://www.openstreetmap.org/assets/images/marker-icon-915e83a6fc798c599e5c9e3f759d6bc065d65151019acd0410d1f4731bcaaf72.png'
}))
});
var markerLayer = new ol.layer.Vector({
source: markerSource,
style: markerStyle
});
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'MultiLineString',
'coordinates': [linesData]
}
}
]
};
var linesSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var linesStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'hsl(240,100%,83%)',
width: 3
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function(feature) {
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})
];
var linesLayer = new ol.layer.Vector({
source: linesSource,
style: linesStyle
});
var map = new ol.Map({
target: 'mymap',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'}),
}), linesLayer, markerLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([6.958122, 50.941309]),
zoom: 4
})
});
}Orte mit Polygon verbinden
Alternativ kann man die Orte auch mit einem Polygon verbinden. Polygone werden automatisch geschlossen.
Dazu wird im Beispiel in Zeile 48 der Typ des GeoJSON-Objekts statt MultiLineString mit Polygon angegeben. Außerdem wird ab Zeile 64 eine Füllfarbe für das Polygon angegeben (optional).
API Dokumentation: ol.format, GeoJSON
Beispiel: Custom Polygon Styles
function init_map() {
var places = [
[13.409436, 52.520791, 'Berlin'],
[-0.12769, 51.50736, 'London'],
[2.34684, 48.8551, 'Paris']
];
var markerSource = new ol.source.Vector({});
var linesData = [];
for (var i = 0; i < places.length; i++){
var markerFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
name: places[i][2]
});
markerSource.addFeature(markerFeature);
linesData.push(ol.proj.fromLonLat([places[i][0], places[i][1]]));
}
var markerStyle = new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 41],
anchorXUnits: 'fraction', // sets anchor to 50% of icon width on x-axis
anchorYUnits: 'pixels', // sets anchor to 41 pixels from top edge of icon on y-axis
opacity: 1,
src: 'http://www.openstreetmap.org/assets/images/marker-icon-915e83a6fc798c599e5c9e3f759d6bc065d65151019acd0410d1f4731bcaaf72.png'
}))
});
var markerLayer = new ol.layer.Vector({
source: markerSource,
style: markerStyle
});
var geojsonObject = {
'type': 'FeatureCollection',
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
},
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [linesData]
}
}
]
};
var linesSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var linesStyle = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'hsl(240,100%,83%)',
width: 3
}),
fill: new ol.style.Fill({
color: 'hsla(240,100%,83%,.3)'
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 3,
fill: new ol.style.Fill({
color: 'orange'
})
}),
geometry: function(feature) {
var coordinates = feature.getGeometry().getCoordinates()[0];
return new ol.geom.MultiPoint(coordinates);
}
})
];
var linesLayer = new ol.layer.Vector({
source: linesSource,
style: linesStyle
});
var map = new ol.Map({
target: 'mymap',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'}),
}), linesLayer, markerLayer
],
view: new ol.View({
center: ol.proj.fromLonLat([6.958122, 50.941309]),
zoom: 4
})
});
}