Eine erste Karte

Ändere diesen Beitrag

Zunächst zeige ich Ihnen, wie Sie in vier einfachen Schritten eine digitale Karte mit Leaflet in ein HTML Dokument einbinden.

Mit Leaflet müssen Sie dafür nicht wissen, was geografische Koordinaten sind und wie die Bilddateien für die Karten erstellt werden. Da dies aber als Hintergrundwissen bei einer eventuellen Fehlersuche hilfreich sein kann, habe ich einen Theorie-Teil in dieses Kapitel eingefügt. Hier erkläre ich Ihnen alles Wichtige zum Thema geografische Koordinaten und die übliche Vorgehensweise beim Erstellen und Zuordnen der Imagedateien für diese Karten – die Kachel-Technik. Zum Abschluss lernen Sie dann noch eine Alternative zur Kachel-Technik kennen, den Web-Map-Service.

Wir beginnen mit einer einfachen Karte

Um eine Karte mit Leaflet auf einer Internetseite anzuzeigen, reichen wenige Schritte aus:

  1. Integrieren Sie die notwendigen JavaScript und Cascading Style Sheet Dateien (CSS).
  2. Erstellen Sie ein HTML-Element – üblicherweise ein <div>-Element – in dem Ihre Karte angezeigt werden soll.
  3. Erstellen Sie das JavaScript Karten-Objekt.
  4. Fügen Sie eine Schicht mit Kacheln – einen Tile-Layer – zum Karten-Objekt hinzu.

Noch vor Schritt 1 erstellen wir eine einfache HTML-Datei. Diese Datei ist die Grundlage für die Beispiele hier im Buch. Den Programmcode für die einfache HTML-Datei sehen Sie im nachfolgenden Programmcodebeispiel. Fügen Sie diesen Programmcode in eine Datei ein und speichern diese Datei ab.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>Eine OSM Karte mit Leaflet</title>
</head>
<body>
</body>
</html>
<!--999.html-->

Ein Aufruf dieser Datei in Ihrem Browser öffnet zunächst nur ein leeres Browser-Fenster. Nur der Titel der Seite ist in der Titelleiste des Browsers abzulesen. In den nächsten vier Kapiteln erfahren Sie, wie Sie die digitale Landkarte in das Fenster bekommen. Vier Kapitel hört sich aufwendig an. Das ist es aber nicht. Fangen Sie an und Sie werden sehen, dass Sie schon in wenigen Minuten die Karte präsentieren können.

Integrieren Sie die notwendigen JavaScript und Cascading Style Sheet Dateien

Sie haben zwei Möglichkeiten die notwendigen Dateien in Ihr HTML-Dokument zu integrieren.

  1. Binden Sie die Dateien über ein CDN in Ihr HTML-Dokument ein.
  2. Kopieren Sie die Dateien und binden Sie die lokale Kopie in Ihr HTML-Dokument ein.

Ein Content Delivery Network1 oder Content Distribution Network (CDN) ist ein Netz von Servern, das über das Internet verbundenen ist. Die Server in diesem Netzwerk bieten Inhalte zum Download an.

Leaflet über ein Content Delivery Network einbinden

Sie können Leaflet mithilfe eines CDN nutzen. So müssen Sie die Dateien nicht selbst herunterladen. Es ist lediglich eine Verlinkung nötig. Mit der richtigen Verlinkung wird Leaflet automatisch über das CDN heruntergeladen, wenn ein Website Besucher Ihre Website aufruft. Im nachfolgenden Programmcodebeispiel sehen Sie den Text für die Verlinkung zur Leaflet-Version 1.2.0.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8"/>
 <title>Eine OSM Karte mit Leaflet</title>
* <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
* <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
 </head>
 <body>
 </body>
 </html>
<!--index_998.html-->

Welche Leaflet-Versionen Ihnen über das CDN zur Verfügung stehen, können Sie jederzeit unter der Adresse http://leafletjs.com/download.html nachlesen.

Auch wenn die Dateien der Leaflet Bibliothek nun automatisch über das CDN heruntergeladen werden: Ein Aufruf Ihrer Datei in Ihrem Browser öffnet immer noch ein leeres Browser-Fenster. Erst im letzten Schritt, im Kapitel Fügen Sie eine Schicht mit Kacheln – einen Tile-Layer – zum Karten-Objekt hinzu, wird die Karte sichtbar.

Fast alle modernen Browser unterstützen Subresource Integrity (SRI)2 und auch Leaflet verwendet diese Sicherheitsfunktion. SRI steht für die Überprüfung der Integrität von Dateien die im Internet verwendet werden. Mithilfe dieser Funktion können Sie sich davor schützen, dass nachträglich veränderte Dateien auf Ihrem Server ausgeführt werden. Die Dateien könnten beispielsweise bei der Übertragung im Internet verändert werden. Wenn Sie SRI nutzen, erhalten Sie immer exakt die Version, die Ihnen auch ausgeliefert werden sollte – oder eine Fehlermeldung. Dabei wird auf eine Prüfsumme – also einen Hash-Wert – zurückgegriffen. Diese Prüfsumme macht die Datei eindeutig erkennbar. Um potenzielle Sicherheitsprobleme zu vermeiden, empfehle ich Ihnen SRI zu nutzen, wenn Sie Leaflet über ein CDN einbinden. Informationen dazu, wie Sie dies genau handhaben, finden Sie unter der Adresse http://leafletjs.com/download.html .

Eine lokale Leaflet-Kopie einbinden

Eine zweite – vielleicht etwas kompliziertere – Möglichkeit ist, die Leaflet-Dateien selbst herunterzuladen. Die aktuellen Versionen finden Sie unter der Adresse http://leafletjs.com/download.html . Diese müssen Sie anschließend auf dem eigenen Server verfügbar machen und in Ihre Website einbinden.
Diese Variante hat den Vorteil, dass Sie nicht von einem CDN Server abhängig sind. Somit haben Sie mehr Sicherheit. Sie wissen genau, welche Datei Sie auf Ihrem Server abgelegt haben und haben Einfluss auf die Konfiguration Ihres Servers.
Nachteilig ist dabei allerdings, dass Sie sich selbst um alles kümmern müssen. Sie müssen selbst die Dateien kopieren und sicherstellen, dass Sie die passende Version von Leaflet nutzen. Aktualisierungen müssen Sie selbst vornehmen.

Im nachfolgenden Codebeispiel sehen Sie das Einbinden von Leaflet unter der Annahme, dass Sie die heruntergeladenen Dateien - relativ zu Ihrem HTML-Dokument ein Verzeichnis höher - im Unterverzeichnis /leaflet auf Ihrem Webserver abgelegt haben.

Wenn Sie mit relativen Pfadangaben3 arbeiten, setzen Sie die Links innerhalb eines Projektes mit Hilfe von Punkten. Der große Vorteil von relativen Pfadangaben ist, dass Sie ein Projekt jederzeit in ein anderes Verzeichnis kopieren können ohne Pfadangaben korrigieren zu müssen. Bei einer relativen Pfadangabe bedeuten die Punkte folgendes: Ein Punkt gefolgt von einem Schrägstrich (./datei.html) zeigt auf eine Datei, die sich im gleichen Verzeichnis befindet. Zwei Punkte gefolgt von einem Schrägstrich (../datei.html) zeigen auf eine Datei, die sich ein Verzeichnis höher befindet. Zweimal zwei Punkte gefolgt von einem Schrägstrich hintereinander (../../datei.html) zeigen auf eine Datei, die sich zwei Verzeichnisse höher befindet. Wenn Ihnen meine Erklärung nicht hilfreich erscheint sehen sich doch einfach alles im nächsten Beispiel an. Manchmal sagt ein Beispiel mehr als viele Worte. Nach meiner Erfahrung wird bei der praktischen Anwendung Vieles oft sehr schnell klarer.

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8"/>
 <title>Eine OSM Karte mit Leaflet</title>
*<link rel="stylesheet" href="../leaflet/leaflet.css" />
*<script src="../leaflet/leaflet.js"></script>
 </head>
 <body>
 </body>
 </html>
<!--index_998a.html-->

Auch wenn Leaflet nun lokal geladen wird, zeigt ein Aufruf dieser Datei in Ihrem Browser immer noch ein leeres Browser-Fenster. Erst im letzten Schritt - im Kapitel Fügen Sie eine Schicht mit Kacheln – einen Tile-Layer – zum Karten-Objekt hinzu wird die Karte sichtbar.

Vielleicht fragen Sie sich, warum ich den Link zur CSS-Datei mithilfe eines selbst-schließenden Tags – also einem unary Tag – geschrieben habe, aber für das Tag, in dem das Skript eingebunden wird, zwei separate Tags – also ein binary Tag – verwendet habe.
<link rel="stylesheet" href="../leaflet/leaflet.css"/>
<scriptsrc="../leaflet/leaflet.js"></script>
HTML unterscheidet4 zwischen Tags, die nie Inhalt enthalten können – nämlich den void-Tags –, und solchen, die prinzipiell Inhalt enthalten können. Im ersten Fall muss ein selbst-schließendes unary Tag verwendet werden. Hierzu gehört das -Tag. Seit HTML5 kann sogar der abschließende Schrägstrich entfallen - muss aber nicht. Im zweiten Fall darf kein selbst-schließendes unary Tag benutzt werden – auch dann nicht, wenn das Tag tatsächlich leer ist. Hierzu gehört das