finde.cash! – Eine OSM Webmapping-Anwendung zur Suche von Geldautomaten

Kürzlich habe ich nun die Version 0.9.6. von finde.cash! veröffentlicht – ein nächster Schritt auf einem doch unerwartet steinigen Weg zu einer modernen Web Applikation…

Ich möchte in diesem Blog nochmal zurückblenden auf den Anfang der Entwicklung und einige der technische Hürden beschreiben – und wie ich sie letztlich übersprungen habe.

Meine Bemühungen für die bereits erwähnte Fahrradkarte für Luxemburg (www.velomap.lu – mittlerweile offline) lagen bereits einige Jahre zurück – und die Technologie für Webkarten hatte sich in dieser Zeit enorm weiterentwickelt… Neben Openlayers (Version 3) gab es dank Vladimir Agafonkin jetzt eine sehr kleine und leichte Javascript-Bibliothek zur Darstellung von Karten: Leaflet. Responsive Webseiten (die sich automatisch verschiedenen Gerätegrößen anpassen) wurden zunehmend mit Bootstrap (entwickelt von Twitter Inc.) – einem Baukasten zur Gestaltung von Weboberflächen – oder ähnlichen Toolkits (ZURB Foundation u.a.) erstellt. Und auch JavaScript hatte sich mit neuen Standards ziemlich verändert…

Es gab also einige gute Gründe, mit der Web-Entwicklung wieder ganz von vorn zu beginnen! –

Geplant hatte ich eigentlich eine Erweiterung meiner bestehenden Fahrradkarte (auf der Basis von OpenLayers und einer PostgreSQL/PostGIS Datenbank) auf ganz Deutschland mit Anzeige von Fahrrad-Verleihstationen und Radwanderwegen… da bekam ich eine Anregung, mir mal die ATM-Map von Marcus anzuschauen. Und das Thema dieser Karte fand ich durchaus nützlich: Suche des nächstgelegenen Geldautomaten!

Ich nahm mir also vor, diese Idee weiter zu entwickeln und dabei auf einige Dinge besonderes Augenmerk zu legen:

  • Optimierung für mobile Geräte (Stichwort: Responsive Web Design)
  • Direkte Anzeige der Öffnungszeiten aus OSM
  • Nacherfassung fehlender Öffnungszeiten in OSM
  • Möglichst einfache Erfassung von fehlenden Geldautomaten in OSM
  • Navigation zum nächsten Geldautomaten zu Fuß und per Fahrrad

Die erste vorzeigbare Version war 0.9.4. Es fehlten allerdings noch einige der geplanten Funktionalitäten, wie Nacherfassung der Öffnungszeiten, Änderung bestehender Geldautomaten und ein Routing.

Auf mobilen Endgeräten konnte sich das Ergebnis aber bereits sehen lassen:

Anzeige der Geldautomaten und Bankfilialen

Wichtige Informationen zu einer Bankfiliale

Anzeige aller Attribute aus OpenStreetMap in Tabellenform

Erfassung eines Geldautomaten

Tabellarische Anzeige der Öffnungszeiten

Satellitenbild als Hintergrund

Der nächste Schritt war die Integration eines Routings – das wollte (und konnte) ich freilich nicht selbst entwickeln, so dass ich mich auf dem Markt freier Software umsah und bei Motion Intelligence fündig wurde. Die Firma aus Potsdam bietet einen Routing Service als Javascript Bibliothek an, der sowohl Fußgänger- als auch Fahrrad und ÖPNV Routen ermitteln kann. Und der Service bietet eine weltweite Abdeckung! Da auch finde.cash! prinzipiell weltweit nutzbar ist, paßte das gut zusammen.

Die Version 0.9.5 erhielt zunächst ein fußläufiges Routing zu einem beliebigen Geldautomaten. Ausgangspunkt ist dabei der eigene Standort (wenn die App ihn ermitteln konnte) oder die Kartenmitte. Dabei läßt ich der Startmarker auch nach der Routenanzeige beliebig mit der Maus (oder auf touch devices: mit dem Finger)  verschieben und die Route wird sofort angepasst.

Außerdem habe ich eine ausblendbare Sidebar integriert, die alle auf dem Kartenausschnitt sichtbaren Objekt in einer nach Entfernung sortierten Liste mit dem GA-Betreiber und der Entfernung (Luftlinie) anzeigt. Auf diese Weise kann man sich schnell einen Überblick über die Geldausgabemöglichkeiten im Umkreis verschaffen. Im Feld Filter kann man eine Buchstabenfolge eingeben, es werden dann nur diejenigen Einträge angezeigt, die im Feld Name/Operator/Brand diese Zeichenfolge enthalten.

Darstellung der Objekte in der Sidebar

Mit der aktuellen Version 0.9.6 habe ich das Routing noch um die Optionen „Mit dem Fahrrad“ und „Mit dem ÖPNV“ ergänzt. Nach Ermittlung einer Nahverkehrsroute werden die Routenabschnitte in einem Popup angezeigt (bei Fußgänger- bzw. Fahrradrouten: Entfernung und Dauer):

Anzeige der Routenabschnitte

Weitere neue Funktionen der Version 0.9.6:

  • Einfache Korrektur der geografischen Position mittels DragAndDrop des Markers
  • Ergänzung des Attributs cash_in=yes|no (Einzahlungen möglich ja/nein) in der Eingabemaske zur Erfassung eines neuen GA
  • Wahlweise Speicherung der Adresse eines neuen angelegten GA im Attribut addr

Wie gehts weiter? –

Es gibt einige aus meiner Sicht notwendige Funktionen, die noch implementiert werden müssen:

  • Ändern der Attribute bestehender Objekte
  • Neuanlage von Bankfilialen (amenity=bank)
  • Verbesserung der Übersichtlichkeit der Karte bei hoher Dichte der GA/Bankfilialen

In diesem Blog will ich mich jetzt einigen speziellen Themen der  bisherigen Entwicklung widmen und sie vor allem für Anfänger verständlich aufbereiten.

Schreibe einen Kommentar