Читать книгу Leaflet - Astrid Günther - Страница 11

Erstellen Sie ein Element, in dem Ihre Karte angezeigt werden soll

Das Einfügen eines HTML-Elements in unser Grundgerüst dürfte für Sie kein Problem darstellen. Der Vollständigkeit halber habe ich diesen Schritt hier trotzdem eingefügt.

Setzen Sie ein <div>-Element mit einer bestimmten ID an die Stelle in Ihrem HTML-Dokument, an der Sie Ihre Karte anzeigen möchten. Stellen Sie dabei sicher, dass das <div>-Element, also der Kartencontainer, eine definierte Höhe hat.

Der einfachste Weg einem HTML-Element eine feste Höhe zuzuordnen, ist das style-Attribut – also direkt im HTML-Element selbst. Weil hier im Buch Leaflet das Hauptthema ist, verwende ich für das Einbinden von Stylesheets in den Beispielen diese einfache Methode. Durch das direkte Festlegen von Formaten gehen allerdings im praktischen Einsatz viele Vorteile verloren. Alternative Varianten zum Einbinden von Stylesheets finden Sie unter anderem unter der Adresse https://wiki.selfhtml.org/wiki/CSS/alternative_Stylesheets⁷.

Im nachfolgenden Programmcodeausschnitt sehen Sie die relevante Zeile mit einem Stern markiert.

<!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> *<div style="height: 180px;" id="mapid"></div> </body> </html>

So, nun ist das HTML-Dokument bereit ein Leaflet-Kartenobjekt zu initialisieren und interessante Dinge mit ihm anzustellen.

Подняться наверх