Zum Inhalt

Inhaltsverzeichnis • Teil 2 - Fortgeschritten • Fortgeschrittene Methoden • Anfahrt (OSM)
⇦ Absätze einblenden / Bildergallerie ⇨
23.07.2014 19:29:57

Anfahrt (OSM)

Dateien: anfahrt.html, osm.js, osm.css

OpenStreetMap

Für eine Anfahrtsbeschreibung bietet sich heute die Verwendung von OpenStreetMap an. Openstreetmap ist die Wikipedia der Landkarten, es stellt also frei Geodaten und Karten zur Verfügung.

Einbindung

Das Beispiel dazu finden sie nicht auf der Hauptseite sondern unter anfahrt.html.

Hier finden sich drei Stellen: im Header das Einbinden von drei zusätzlichen JS-Funktionsbibliotheken und der CSS-Datei, im <body> der Aufruf der darstellenden Funktion drawmap() und im Inhalte-Div ein <div id="map">, der Platz für die Karte schafft (formatiert in osm.css).

Anmerkung: Beachten sie, dass die Reihenfolge der JavaScript-Bibliotheken wichtig ist. osm.js benutzt OpenStreetMap.js und OpenLayers.js, OpenStreetMap.js wiederum benutzt OpenLayers.js. Entsprechend müssen sie zuerst OpenLayers.js dann OpenStreetMap.js und zuletzt osm.js einbinden.

Editor - index.html
<head><!-- Anfahrt mit Open Source -->
  <link rel="stylesheet" type="text/css" href="vorlagen/osm.css" />
  <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
  <script type="text/javascript" src="vorlagen/osm.js"></script></head>
Editor - index.html
  <!-- Anfahrt mit Open Source Map darstellen -->
  <body onload="drawmap(13.150072,52.714831,12,'CIS - Ch. Hartnick, Sandweg 10<br/>16727 Oberkrämer OT Bärenklau')">
Editor - index.html
<body onload=""><!-- Anfahrt mit Open Source Bereich -->
  <div id="map"></div></body>

JavaScript

Den eigentlichen JavaScript-Code werden wir nicht genauer analysieren, da er viel zu komplex ist. Allerdings können wir über die Aufrufparameter die Karte beeinflussen.

Tabelle: Funktion drawmap
#Beschreibung
1Längengrad
(erscheint unten rechts als erstes, wenn Maus über die Karte fährt)
2Breitengrad
(erscheint unten rechts als zweites, wenn Maus über die Karte fährt)
3Zoom-Faktor der Karte
4Text der bei Klicken auf den roten Pfeil erscheinen soll

Für die Parameter können sie unter www.osm.org auf das Symbol für „Teilen“ (Viereck mit Pfeil) klicken und ihren Kartenausschnitt wählen. Markieren sie „Kartenmarker setzen“. Die Daten für Zoom, Längengrad und Breitengrad erscheinen dann in der Eingabezeile des Browsers (allerdings in umgekehrter Reihenfolge).

Mitmach-Projekt

Openstreetmap ist ein Mitmachprojekt. Sollten sie mitmachen wollen, finden sie alles für den Einstieg auf der Homepage unter „Wie kann ich mitmachen“. Auf der Projektseite können sie mit dem Symbol „Hinweis/Fehler melden“ (Sprechblase) Anmerkungen zur Karte geben.

Zusammenfassung

⇦ Absätze einblenden / Bildergallerie ⇨
Nach oben