LeafletJs
Willkommen
Die Arbeit mit Geodaten und digitalen Karten hat dank des globalen Positionierungssystems GPS()1 zunehmend an Bedeutung gewonnen. Viele Anwendungen bieten geografische Informationen in Echtzeit online an. So finden Sie im Internet immer mehr digitale Karten und Anwendungen, die mit Geodaten arbeiten.
Geodaten2 sind Informationen, die eine Zuordnung zu einem räumlichen Ort haben. Fast alle Daten lassen sich einem Ort zuordnen und sind daher Geodaten.
Sie lesen dieses Buch sicherlich, weil Sie überlegen, eine digitale Karte anzubieten - wahrscheinlich auf einer Website. Die Grundlagen dessen, was ich in diesem Buch geschrieben habe, finden Sie alle in der Dokumentation für Leaflet3 oder für die jeweiligen Plugins öffentlich im Internet. Ich habe diese Dokumentationen hier im Buch verlinkt. Warum habe ich dieses Buch trotzdem geschrieben? Ich habe das Buch geschrieben, weil ich gerne mit Beispielen lerne. Oft kommen mir dabei Ideen, die trockene Dokumentationen nicht hergeben. Vielleicht geht es Ihnen auch so und dieses Buch ist für Sie eine Bereicherung neben den bestehenden Anleitungen. Die Quellcode-Dateien für die im Buch verwendeten Beispiele finden Sie auf der Website github.com/astridx/leaflet_beispieldateien_zum_Buch/.
Außerdem finde ich es immer sehr hilfreich, über den Tellerrand zu schauen. Ein paar solcher Blicke über den Tellerrand finden Sie hier im Buch. Wenn Sie Interesse haben, können Sie mit mir ein wenig tiefer in die Welt der geografischen Koordinaten eintauchen. Ich erkläre außerdem die verschiedenen Techniken zur Erstellung der Grafiken für die digitalen Karten. Außerdem werde ich mit Ihnen einen genaueren Blick auf GeoJSON werfen, der über die reine Verwendung hinausgeht. Ich zeige Ihnen, wie Sie der Karte mit benutzerdefinierten Markern eine persönliche Note verleihen können. Neben diesen grundlegenden Elementen kommt auch die Visualisierung der Daten mit Heatmaps, Geocoding und Routing nicht zu kurz.
Wichtige Dinge zum Buch
Ich erkläre hier Schritt für Schritt alles, was ich rund um Leaflet für wichtig halte - alles, was Sie als Entwickler brauchen, um kreativ arbeiten zu können.
Ich hoffe, meine Art zu schreiben gefällt Ihnen. Ich persönlich hätte gerne genau dieses Buch gehabt, um mit Leaflet loszulegen.
Was ist Leaflet?
Leaflet ist eine Open-Source-Bibliothek JavaScript, die es Ihnen leicht macht, Karten auf Ihrer Website anzubieten. Open Source bedeutet unter anderem, dass der Programmcode einsehbar ist. Jeder, der über das nötige Wissen verfügt, kann überprüfen, wie genau die Anwendung funktioniert. Und was noch wichtiger ist: Jeder kann Leaflet nutzen, es an seine Bedürfnisse anpassen und verbessern.
Was müssen Sie tun, wenn Sie Leaflet auf Ihrer Website verwenden wollen? Im Grunde müssen Sie nur zwei Dateien einbinden - eine JavaScript-Datei und die entsprechende CSS-Datei. Wie Sie das genau machen, erkläre ich im ersten Teil dieses Textes.
Durch das Einbinden der Dateien erhalten Sie Zugang zu einer Reihe von Funktionen. Mit Hilfe dieser Funktionen können Sie eine digitale Karte in Ihre Website integrieren. Leaflet unterstützt alle modernen Browser - auch die mobilen Versionen. Das bedeutet, dass Sie Ihre Karte so gut wie überall nutzen können.
Leaflet selbst konzentriert sich auf Benutzerfreundlichkeit und Leistung. Wichtig ist den Entwicklern von Leaflet auch, dass die JavaScript-Bibliothek von anderen Entwicklern mit einem Plugin leicht erweitert werden kann. Die Programmierschnittstelle ist sehr gut dokumentiert. Als Erweiterungsprogrammierer müssen Sie keine Geheimnisse aufdecken, um Leaflet erfolgreich mit einem Plugin zu erweitern. Dies ist meiner Meinung nach eine der größten Stärken von Leaflet.
Mit Leaflet können Sie Marker, Popups, Linien und Formen auf verschiedenen Ebenen Ihrer Karte anzeigen. Sie können zoomen, Entfernungen berechnen und den Mittelpunkt der Karte auf bestimmte Koordinaten verschieben.
Todo Vorteil in bezug zu vectorkacheln
Was sollten Sie mitbringen?
Ich gehe davon aus, dass Sie über grundlegende HTML und CSS Kenntnisse verfügen. Sie sollten auf alle Fälle wissen, wie Sie CSS und ein JavaScript-Skript in ein HTML-Dokument einbinden und wie Sie mit einfachen HTML-Elementen arbeiten.
CSS ist eine Stylesheet-Sprache für digitale Dokumente. Stylesheet-Sprachen werden verwendet, um Dokumente und Benutzeroberflächen zu gestalten. Dabei ist ein Stylesheet mit einer Formatvorlage zu > vergleichen. Grundidee hierbei ist die Trennung von Dateninhalten und Design. Zusammen mit HTML und dem DOMist CSS eines der wichtigsten Elemente im Internet. CSS ist ein so genannter lebendiger Standard und wird vom W3C und dem WHATWG permanent weiterentwickelt.
HTML ist eine textbasierte Auszeichnungssprache zur Strukturierung digitaler Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt.
Für das Verständnis der Beispiele sind darüber hinaus grundlegende JavaScript Kenntnisse hilfreich. Für die Entwicklung dynamischer Webseiten ist JavaScript unerlässlich.
Mit JavaScript lassen sich kleine Hilfsroutinen und auch komplexen Bibliotheken schreiben.
Ist es möglich, Openstreetmap in Verbindung mit Leaflet DSGVO-konform ohne Einwilligung zu verwenden
Als deutscher Websitebetreiber ist es heutzutage erforderlich, dass man sich mit der Datenschutz-Grundverordnung DSGVO4 beschäftigt. Bei Kundenprojekten stelle ich immer klar, dass ich keine Anwältin, sondern Webprogrammiererin, bin und nicht rechtlich berate. Trotzdem ist es mir wichtig, meine Websites DSGVO-konform zu betreiben und auf Dienste Dritter zu verzichten, vor allem wenn diese Daten außerhalb Europas zwischenspeichern. Außerdem empfinde ich das Einholen von Einwilligungen vor der Anzeige einer Website nicht benutzerfreundlich und suche einen Weg, dies DSGVO-konform zu vermeiden.
Openstreetmap wäre ein Dienst eines Dritten. Ist es möglich, diesen in Verbindung mit Leaflet DSGVO-konform ohne Einwilligung zu verwenden, ergo ohne ein vorgeschaltetes Consent Tool? Bei meiner Recherche stoße ich immer wieder auf widersprüchliche Informationen.
Benötige ich ein Consent Tool?
Falls man Dienste nutzt, die eine Einwilligung vom Benutzer erfordern, dann gibt es alternativen zu den Consent Tools, ergo: Zu den einer Website vorgeschalteten Abfragen. Eine Option ist das zielgerichtete Einholen einer Einwilligung. Beispielsweise nutze ich gerne die Art und Weise, wie es auf Seiten von spiegel.de geschieht. Ein allgemeines Consent Tool ist nicht vorhanden. Ausschließlich vor Inhalten, die eine Einwilligung erfordern, wird diese eingeholt. Das sehe ich als eine praktikable Möglichkeit an. Einem Benutzer werden alle wesentlichen Inhalte ohne Schranke angezeigt und er hat gleichzeitig die Option, zusätzliche Informationen per Einwilligung zu aktivieren. In unserem Fall ist die digitale Karte die Zusatzinformation. Ein Konsens ist somit nur dann erforderlich, wenn er eine Seite mit Inhalten im Browser anfordert, die ein Einverständnis verlangen.
Woher kommen die Daten für die digitalen Karten von Openstreetmap?
Oft gibt es Missverständnisse bezüglich der Kartenanbieter. Openstreetmap.de und Openstreetmap.org werden als das Selbe angesehen. Dabei sind dies unterschiedliche Anbieter. Ich betrachte hier die Version der deutschen Top-Level-Domain Openstreetmap.de.
Openstreetmap.de informiert auf der Website fossgis.de/wiki/IT-Technik über Serverstandorte. Auf die Website fossgis.de/wiki/IT-Technik komme ich über openstreetmap.de/faq/#wie-kann-ich-die-daten-nutzen, welche auf wiki.openstreetmap.org/wiki/FOSSGIS/Server verweist.
Wenn ich das korrekt lese, ist es Potsdam und Hetzner Cloud5 und das ist Europa.
Nach meiner Rechtsauffassung reicht somit in der eigenen Datenschutzerklärung ein Hinweis, dass die Website Dienste von OpenStreetMap.de nutzt und zusätzlich ein Verweis auf die dortige Datenschutzerklärung. Dies ist fossgis.de/datenschutzerkl%C3%A4rung. Der Einsatz eines Consent Tools ist in meinen Augen nicht erforderlich. Ich bin keine Anwältin und teile hier alleinig meine laienhafte Meinung.
Eigener Tile-Server
Aus Sicht des Datenschutzes ist es am besten, einen eigenen Tile-Server aufzusetzen. So werden Website-Besucher nicht zu einem Drittanbieter weitergeleitet. Eine weitere Alternative ist ein Proxy. Bei letzterem kontrolliert man den Datenfluss, ohne selbst einen Tile-Server aufzusetzen.
Für diejenigen, die nur einen begrenzten Teilausschnitt der Welt benötigt, kommen diese Optionen in Frage. Beide Varianten sind mit Kosten verbunden und lohnen sich für kleine Projekte in der Regel nicht. Zumindest dann, wenn die Karte die ganze Welt beinhaltet.