Die folgende Anleitung zeigt, wie Sie in wenigen Schritten die frei verfügbaren OpenStreetMap-Karten in Ihren Webauftritt einbinden können.
- 1. Einleitung
- 2. Beispiel
- 3. Geo-Position
- 4. Download
- 5. Einbindung
- 6. Konfiguration
- 7. Liszensierung
1. Einleitung
Bei OpenStreetMap handelt es sich um ein Online-Kartenprojekt, das von Internetnutzern mit GPS-Geräten und verschiedener Software erstellt wurde und immer noch erstellt wird. Es hat gegenüber Google Maps den Vorteil, dass die Karten ohne Einschränkungen für jeden frei verwendbar sind, und sich durch den offen gelegten Code zahlreiche Anwendungsmöglichkeiten ergeben. Im Rahmen des Web-Baukastens der Universität eignen sich die Karten besonders, um die Lage einer Einrichtung in einer Karte zu zeigen.
Es gibt viele verschiedene Wege, eine Karte einzubinden. Einer dieser Wege wird hier vorgestellt. Das Ziel ist, einen oder mehrere Marker an eine bestimmte Position in der Karte zu setzen, und diese Marker mit einer Beschreibung zu versehen.
2. Beispiel
3. Geo-Position
Die Geo-Position eines Markers muss zuerst ermittelt werden, hierfür eignet sich besonders das kostenlose Tool http://www.getlatlon.com/ (Hinweis: zentrieren Sie den Kartenausschnitt auf die zu ermittelnde Position und lesen Sie die Werte für Latitude und Longitude ab). Da OpenStreetMap auch mitgeteilt werden muss, welcher Kartenausschnitt angezeigt werden soll, werden diese Geo-Positionen auch gleich als Angabe für die Kartenmitte verwendet.
4. Download
Laden Sie sich die Datei osm-karte.zip herunter und speichern Sie die entpackten Dateien anschließend im Ordner /vkdaten/tools/osm-karte/. Laden Sie zusätzlich die Datei osm-marker.zip herunter und speichern Sie die entpackten Dateien im Ordner /img/karten/. Gegebenenfalls sind diese bereits in ihrem Webbaukasten enthalten.
5. Einbindung
In der Datei, in der die Karte erscheinen soll, muss der folgende Code an der Stelle, an der die Karte angezeigt werden soll (zwischen <body> und </body>), eingefügt werden:
<!--#include virtual="/vkdaten/tools/osm-karte/osm-karte.php" -->
Diese Art der Einbindung erfordert, dass SSI (mit PHP-Includes) aktiv ist. Dies ist in der Regel bei Dateien mit der Endung .shtml der Fall. Damit allerdings auch PHP-Dateien eingebunden werden können, ist es noch notwendig, folgende Zeile in der Datei /websource/.htaccess zu ergänzen bzw. diese mit folgendem Inhalt neu anzulegen:
Options +Includes
Alternativ kann das Plugin auch innerhalb einer PHP-Datei mit folgendem Befehl eingebunden werden:
<?php include("/vkdaten/tools/osm-karte/osm-karte.php"); ?>
6. Konfiguration
CONF-Datei
Die Konfiguration erfolgt in der Regel mithilfe einer .conf-Datei. Legen Sie hierzu im Ordner /vkdaten/ eine Datei osm-karte.conf an (alternativ können Sie auch eine Datei options.conf im Ordner /vkdaten/tools/osm-karte/ anlegen).
Die gewünschten Optionen tragen Sie zeilenweise (Optionsname und Wert jeweils mit Tabulator getrennt) in die entsprechende .conf-Datei ein, beispielsweise:
zoom 15 xml suedgelaende
mögliche Optionen
- width: Legt die Breite der Karte fest (in "px" oder "%"). Standard: 600px
- height: Legt die Höhe der Karte fest (in "px" oder "%"). Standard: 400px
- lon: Longitude (geogr. Längengrad-Koordinate) des zu setzenden Markers bzw. zum Zentrieren der Karte. Standard: 11.02751
- lat: Latitude (geogr. Breitengrad-Koordinate) des zu setzenden Markers bzw. zum Zentrieren der Karte. Standard: 49.57378
- zoom: Zoomstufe der Karte. Standard: 16
- desc: Marker-Informationstext. Standard: <strong>Regionales Rechenzentrum</strong><br />Martensstraße 1<br />91058 Erlangen
- icontype: Marker-Grafiktyp. Standard: default (Liste verfügbarer Grafiktypen siehe unten)
- scale: Legt fest, ob eine Längenskala angezeigt wird. 1 oder 0. Standard: 1
- attribution: Legt fest, ob eine Copyright-Notiz (notwenig für rechtmäßige Verwendung) angezeigt wird. 1 oder 0. Standard: 1
- zoombar: Legt fest, ob ein Regler für Zoomstufe der Karte angezeigt wird. 1 oder 0. Standard: 1
- xml: Link zur XML-Datei für mehrere Marker. Standardmäßig nicht definiert.
XML-Datei für mehrere Marker
Mittels einer speziell formatierten XML-Datei können mehrere Marker gleichzeitig eingebunden und formatiert werden. Schreiben Sie eine XML-Datei, die alle Objekte (Marker) mit ihren Koordinaten enthält, die auf der Karte dargestellt werden sollen. Diese Datei hat eine Baumstruktur und ähnelt einem HTML-Code, da sie auch Start- (<beispiel>) und Endtags (</beispiel>) hat.
Beispiel: Eine einfache XML-Datei für die Marker:
<markers>
<marker lat="14.096754" lng="9.0976545" > Objekt 1 </marker>
<marker lat="14.987754" lng="9.3785454" > Objekt 2 </marker>
</markers>
Jeder Marker kann aber zusätzlich noch aus <label> (Name des Markers) und <infowindow> (Information, die beim Klicken auf den Marker angezeigt werden sollte) bestehen.
Beispiel: Eine XML-Datei für die Marker, die einen Namen und ein Infofenster haben (dies ist der Ausschnitt aus suedgelaende.xml):
<markers>
<marker lat="49.57372494214435" lng="11.02776288986206" >
<label>Regionales RechenZentrum Erlangen</label>
<infowindow> <![CDATA[Martensstraße, 1 <br/> 91058 Erlangen]]> </infowindow>
</marker>
<marker lat="49.573829301806924" lng="11.027172803878784" >
<label> <![CDATA[Institut für Informatik]]> </label>
<infowindow> <![CDATA[Martensstraße, 3 <br/> 91058 Erlangen]]> </infowindow>
</marker>
<marker lat="49.57438588290542" lng="11.029672622680664" >
<label> <![CDATA[Hörsaal 10]]> </label>
<infowindow> <![CDATA[Erwin-Rommel-Straße, 60]]> </infowindow>
</marker>
...
</markers>
Siehe Beispiel-Karte "Mehrere Marker", die auf "suedgelaende.xml" basiert.
Namen und Infofenster sind zusätzlich in CDATA ( <![CDATA[...Hier kommt der Inhalt...]]>) eingepackt.
Innerhalb des CDATA-Abschnitts wird der Inhalt als ganz normaler HTML-Code behandelt. Das heißt, dass Umlaute und Sonderzeichen (< > " ‘) durch entsprechende ASCII-Zeichen erzetzt werden können (siehe 
ASCII-Tabelle).
In den Infofenstern dürfen auch Links und Bilder mit Hilfe von HTML-Coden eingebaut werden.
verfügbare Markertypen
Folgende Icons werden von OpenLayers bereitgestellt:
"default"
"green"
"red"
"blue"
"yellow"
Es stehen folgende Icons vom RRZE zur Verfügung:
"bushaltestelle"
"parkplatz"
"parkplatz-dach"
"info"
"essen"
alternative Konfiguration mithilfe von Aufrufparametern
Während mit der CONF-Datei festgelegte Konfigurationen in allen Karten des Webauftritts gelten, kann mithilfe von Aufrufparametern jede einzelne Karte gesondert konfiguriert werden.
Mithilfe von GET-Variablen können sehr einfach Konfigurationswerte (nach dem gleichen Schema wie oben) an das Skript übergeben werden, z.B.:
<!--#include virtual="/vkdaten/tools/osm-karte/osm-karte.php?xml=DATEINAME&zoombar=0&width=400px" -->
Alternativ kann das Skript auch über PATH-Info konfiguriert werden:
<!--#include virtual="/vkdaten/tools/osm-karte/osm-karte.php/XML/WIDTH/HEIGHT/LON/LAT/ZOOM/" -->
Wobei jeweils für XML etc. der jeweilige Optionswert eingesetzt werden muss. Die Reihenfolge ist hierbei vorgeschrieben und darf nicht verändert werden, auch können nur die im Beispiel gezeigten Werte übergeben werden. Der jeweils hinterste Wert kann problemlos weggelassen werden, z.B.:
<!--#include virtual="/vkdaten/tools/osm-karte/osm-karte.php/suedgelaende/400px/300px/" -->
7. Lizensierung
Das Plugin ist unter der Attribution 2.0 Generic (CC BY 2.0)-Lizenz lizensiert.