Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Die folgende Anleitung zeigt, wie Sie in wenigen Schritten die frei verfügbaren OpenStreetMap-Karten in Ihren Webauftritt einbinden können.

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 Webbaukastens 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

Beispiel

Live-Beispiel ansehen

3. Geo-Position

Die Geo-Position eines Markers muss zuerst ermittelt werden, hierfür eignet sich besonders Tools wie GPS Geoplaner/GeoConverter oder 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

Dieser Schritt entfällt bei Webauftritten, die den Webbaukasten in der Version ab Mai 2013 haben. Ab dieser Version sind die notwendigen Skripten bereits an den richtigen Stellen abgelegt.

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.

Legen Sie die icontypes in den Ordner /img/karten/ ab.

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. Wert zwischen 1 und 18; 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 in eine XML-Datei alle Objekte (Marker) mit ihren Koordinaten, 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.

Legen Sie diese XML-Datei im Verzeichnis /vkdaten/ ab.

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.

Hinweis: Die XML-Datei soll strengst wohlgeformt sein. Falls man nach dem Scrpteinbau die Karte sieht jedoch aber keine Markers (insbesondere betrifft es den Fall mit mehreren Markers), sollte man noch mal die XML-Datei überprüfen! Wichtig ist, dass man keine zusätzliche Zeilen zwischen den Tags einfügt, z.B.:

<label>Regionales RechenZentrum Erlangen</label>

und NICHT:

<label>
Regionales RechenZentrum Erlangen
</label>

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 Externer Link:  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-Icon "default"
  • Green-Icon "green"
  • Red-Icon "red"
  • Blue-Icon "blue"
  • Yellow-Icon "yellow"

Es stehen folgende Icons vom RRZE zur Verfügung:

  • Bushaltestelle-Icon "bushaltestelle"
  • Parkplatz-Icon "parkplatz"
  • Parkplatz-Dach-Icon "parkplatz-dach"
  • Info-Icon "info"
  • Mensa-Icon "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 Externer Link:  Attribution 2.0 Generic (CC BY 2.0)-Lizenz lizensiert.

nach oben