Читать книгу Leaflet - Astrid Günther - Страница 6
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 – die relevanten Stellen mit einem Stern markiert – 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. Sehen Sie sich doch einfach alles im nächsten Beispiel an, wenn Ihnen meine Erklärung nicht hilfreich erscheint. 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 Kartenobjekt 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"/> <script src="../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 <link>-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 <script>-Tag.
