Als Informatiker ist man täglich mit dem entwerfen, designen und bauen von Webseiten beschäftig. Zu mindestens ist das eine weitläufig verbreitete Meinung über uns. Auch ich wurde Opfer dieses Vorurteils und fand mich schneller als gewollt mit einer Implementierungsaufgabe für eine Webseite konfrontiert. Und ausgerechnet in einem Modul außerhalb meines Fachstudiums 😉

Im Rahmen eines Seminars bezüglich des Themas „Open Data“ der Projektgruppe Ini2.0 entstand die Idee einen Datensatz aufzubereiten und diese Informationen gefiltert und aggregiert auf einer Karte darzustellen. Es handelte sich um einen freien Datensatz bezüglich diverser Informationen über Schulen in Berlin. Die grobe Idee war angelehnt an ein Projekt namens “locrating” in England. Dort werden Schulen im Umkreis dargestellt und es war möglich nach bestimmten Kriterien zu filtern. Unser Projekt sollte sich der Problematik speziell für Berlin annehmen.

Dabei fiel mir die Aufgabe der Darstellung der Informationen auf der Karte zu. Wie schon anfangs erwähnt hatte ich entgegen aller Erwartung weder Erfahrungen im Erstellen von Webseiten noch im doch recht bekannten Verwenden von Karten.

Diese Aussage soll die Kernintention meines Artikels sein – Es ist möglich mit einfachen Vorkenntnissen und ein wenig Recherche Daten in vielseitiger Form auf einer Karte zu visualisieren. Beim Verwenden der Begriffe Daten und Karte gehe ich davon aus das jeder ein Bild davon hat. Mit Daten ist hier eine geografische Position in Form von Längen- und Breitengraden gemeint. In unserem Fall lagen uns diese Daten nicht direkt vor. In dem uns vorliegenden Datensatz waren lediglich die Straßennamen und Postleitzahlen der Schulen vermerkt. Wir nutzten diese Informationen und formten sie mittels der Google API automatisiert in weiterverwertbare Geokoordinaten um.

Parallel zur Berechnung der Koordinaten informierte ich mich über mögliche einfache Frameworks zur Darstellung dieser. Nach einer Internetrecherche und kleinerer Gespräche mit Freunden und Kollegen entschied ich mich für leaflet.js. Die sehr leichtgewichtige JavaScript Library überzeugte mich vor allem durch die gut dokumentierte API.

Nach kurzem Studium der Beispiele auf der Seite war klar das nur drei Schritte zum Darstellen notwendig sind. Anschließend ist der erste Marker bereits auf dem gewünschten Kartenausschnitts zu sehen.

  1. Erzeugen eines Map-Objekts

    var map = L.map(‘map’).setView([51.505, -0.09], 13);

  2. Layer auf dieses Map-Objekt legen

    L.tileLayer(‘http://{s}.tile.osm.org/{z}/{x}/{y}.png’, {
    attribution: ‘&copy; <a href=”http://osm.org/copyright”>OpenStreetMap</a> contributors’

    }).addTo(map);

  3. Setzen eines Markers

    L.marker([51.5, -0.09]).addTo(map)

Der im ersten Schritt gewählte Fokus der Karte wird durch eine definierte Zoomstufe dargestellt. Anschließend wird, in diesem Fall, eine so genannte Tile von OpenStreetMap festgelegt. Das Setzen des Markers im letzten Schritt beendet die einfache Demonstration von leaflet.js.

Abseits des einfachen Darstellen bietet die Library umfangreiche Anpassungsmöglichkeiten. Die Marker lassen sich beliebig einfärben, schattieren und komplett durch eigene Designs austauschen. Weiterhin lassen sie Informationen durch Popups direkt am gewünschten Datum festpinnen. Neben den Bearbeitungsmöglichkeiten auf Seiten der Marker, lassen sich ebenfalls das Kartenmaterial einfärben, bestimmte Bereiche umrahmen und vieles mehr.

Als die Entscheidung auf leaflet.js gefallen war, erstellten wir uns eine einfache Funktion in JavaScript die gegen eine Lieferung von Längen- und Breitengrade anschließend einen Marker auf dem Kartenausschnitt von Berlin setzte. Wir konnten diese nun bei der Implementierung der Filter verwenden. Da die Zeit in kritischer Faktor in dem kleinen Projekt war, nahmen wir nur zwei Anpassungen an den Markern vor. Einerseits ersetzten wir den Standardmarker durch ein kleines Schulgebäude und zusätzlich stellten wir den Namen der Schule in einem Popup am Marker selbst dar.

Mein Fazit über diesen Exkurs hinein in JavaScript, Leaflet.js und Opendata im allgemeinen fällt daher entsprechend positiv aus. Im Bereich Opendata wird oft eine Visualisierung von Daten auf Karten verwendet um Ergebnisse oder Informationen aufzubereiten. Leaflet.js bietet hier auch für jemanden der noch nie mit dieser Technologie in Berührungen gekommen war einen schnellen Einstieg. Über grundlegende Kenntnisse in HTML sollte man jedoch verfügen. Die Seite bietet zahlreiche Beispiele und ist gut strukturiert. Durch den häufigen Einsatz ist ebenfalls die Community hinter dem Produkt entsprechend groß und man findet in diversen Foren guten Rat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*