Wie in dem vorherigen Abschnitt erwähnt wurde, besteht unsere HTML-Karte aus HTML-Markup (Auszeichnung), CSS-Deklarationen (Stil) und JavaScript-Initialisierungs-Code (Verhalten). Wir werden uns jeden dieser Teile nun ein wenig genauer anschauen.
Im HTML ist das Markup für die Karte recht überschaubar; wir brauchen im Grunde nur ein Element:
<div id="map"></div>
Dieses <div>-Element wird wie ein Container für den Karten-Viewport fungieren. Wir verwenden ein <div>-Element, aber es kann auch jedes andere block-level-Element verwendet werden.
Wir vergeben ein id-Attribut, dadurch können wir es als target unserer Karte verwenden.
Zu ol3 gehört auch ein default-Stylesheet, welches festlegt, wie die einzelnen Kartenelemente gestylt werden sollen. Wir haben in unserem HTML dieses Stylesheet mittels eines <link>-Elements eingebunden:
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
ol3 macht keine Annahmen zur Größe der Karte (bzw. des Elementes welches die Karte enthalten wird). Genau aus diesem Grunde fügen wir exakt eine weitere eigene Style-Deklaration hinzu, die die Dimensionen des Karten-<div>s bestimmt:
<style>
#map {
height: 256px;
width: 512px;
}
</style>
Wir verwenden als CSS-Selektor #map (dies war ja die id des Ziel-<div>) und setzen die Breite (512px) und Höhe (256px) des Containers.
Diese Regel ist direkt im <head> der Seite innerhalb eines <style>-Elementes angegeben. Oft werden Sie später solche Angaben jedoch auch in einem seperaten Stylesheet notieren.
Der nächste Schritt zur Karte besteht aus JavaScript-Code zum Initialisieren der Karte. Wir haben hier den gesamten Code innerhalb eines <script>-Elements ganz am Ende des HTML body-Tag eingefügt:
<script>
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
Bemerkung
Die Reihenfolge dieser Schritte ist sehr wichtig. Bevor unser benutzerdefiniertes Skript ausgeführt werden kann, muss die ol3-Bibliothek geladen werden. In unserem Beispiel wird ol3 im <head> unseres Dokuments mit <script src="ol3/ol.js"></script> geladen.
Analog hierzu kann auch der oben aufgeführte Karten-Initialisierungs-Code erst dann erfolgreich ausgeführt werden, wenn das Element, welches später die Karte enthalten wird (<div id="map"></div>) bereits “bereit” (sprich gerendert und Teil des Dokuments) ist. Dadurch, dass wir den <script>-Tag erst direkt vor dem schließenden </body> notieren, stellen wir sicher, dass der Karten-Container zur Verfügung steht.
Schauen wir uns die wenigen Zeilen JavaScript genauer an, um zu verstehen, wie wir die Karte erzeugen. Unser Script erzeugt eine Instanz der Klasse ol.Map mit einigen Konfigurations-Optionen:
target: 'map'
Wir verwenden den Wert des id-Attributs unseres Karten-Containers um dem Map-Konstruktor mitzuteilen, in welches Element wir die Karte gerendert haben möchten. Wir verwenden also den String-Wert "map". Diese Syntax ist eine bequeme Kurzform. Statt eines Strings kann auch eine Referenz zu dem Element angegeben werden (Solch eine Referenz kannn man etwa über document.getElementById("map") erhalten).
Die layers Konfiguration erwartet eine Liste (als JavaScript-Array) aller Kartenthemen, die wir auf der Karte dargestellt haben wollen.
layers: [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
Auf die Syntax zur Erzeugung von Layern werden wir in den folgenden Kapiteln noch näher eingehen. Lassen Sie sich also nicht von der konkreten Syntax erschrecken.
Um eine Karte sehen zu können, benötigen wir wenigstens einen Layer.
Als letztes wollen wir den view (etwa Kartenausschnitt) konfigurieren. Wir spezifizieren eine Projektion (projection), ein Kartenzentrum (center) und den initialen Zoomlevel (zoom). Außerdem legen wir eine maxResolution fest, so dass wir keine Kartenausschnitte anfordern, die von dem entfernten Dienst (in diesem Falle ein GeoWebCache) nicht geliefert werden können.
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
Herzlichen Glückwunsch: Sie haben soeben erfolgreich Ihre erste Kartenanwendung mit ol3 programmiert, seziert und analysiert!
Um erfolgreich weiterarbeiten zu können, schauen wir uns weitere Ressourcen an, die Sie als ol3-Entwickler benötigen werden.
