HTML5: Die Geolocation API

6. Juni 2011

Eine der interessantesten Neuerungen von HTML5 ist die Geolocation API, mit der sich Positionsdaten im Browser ermitteln lassen. Voraussetzung hierfür ist ein HTML-fähiger Browser der aktuellen Generation (z. B. Internet Explorer 9) und die ausdrückliche Einverständniserklärung des Browser-Benutzers, einer Seite Zugriff auf seine Positionsdaten zu erlauben.

Am meisten Sinn macht die Verwendung der Geolocation API natürlich bei Geräten, die über einen GPS-Sensor verfügen. Alternativ dazu kann die Position des Anwenders aber auch u. a. über WIFI positioning (WPS) und die IP-Adresse des Benutzers näherungsweise bestimmt werden. Welche Methode zum Einsatz kommt, entscheidet der Browser bzw. dessen Konfiguration.

Der Zugriff auf die Geolocation API erfolgt HTML5-typisch per JavaScript. Als Erstes sollte überprüft werden, ob die Geolocation API vom verwendeten Browser unterstützt wird: 

   1: if (navigator.geolocation) {

   2:     // do geolocation …

   3: }

Ist dies der Fall, reicht ein weiterer Funktionsaufruf aus, um den Standort des Benutzers zu ermitteln

   1: navigator.geolocation.getCurrentPosition([success], [error]);

Die Platzhalter [success] und [error] sind in der Praxis durch die Namen der entsprechenden Event-Handler-Funktionen zu ersetzen.

Sobald getCurrentPosition aufgerufen wird, erhält der Anwender eine Benachrichtigung von seinem Browser, dass die Webseite Zugriff auf seine Positionsdaten haben möchte. Der Anwender kann dann beispielsweise entscheiden, ob er diese Informationen der Seite einmal, immer oder nie zur Verfügung stehen. Die Default-Option ist in den meisten Fällen “einmal”, was z. B. im Internet Explorer 9 bewirkt, dass der Webseite solange Positionsdaten zur Verfügung gestellt werden, bis der Anwender von dieser weg navigiert. Ein Postback oder Refresh der Webseite ist also ohne Weiteres möglich, ohne die Erlaubnis für die Positionsdatenabfrage erneut einholen zu müssen.

Mit dem optionalen Parameter maximumAge lässt sich festlegen, wie lange auf Daten aus dem Cache zurückgegriffen wird. Sehr kleine Werte können bei häufigen Aufrufen auf mobilen Endgeräten negative Auswirkungen auf den Verbrauch der Akkuladung haben. Mit einem weiteren optionalen Parameter namens Timeout lässt sich festlegen, wie lange auf die Positionsdaten gewartet werden soll.

Der folgende Aufruf führt dazu, dass die Positionsdaten neu ermittelt werden, wenn die Positionsdaten im Cache älter als eine Minute sind. Außerdem wird maximal 30 Sekunden auf die Rückmeldung gewartet, andernfalls wird der Error-Handler aufgerufen.

   1: navigator.geolocation.getCurrentPosition([success], [error],

   2:                       {maximumAge: 60000, timeout: 30000});

 
Alternativ kann auch ein Watchdog mit einem Event-Handler eingerichtet werden, um die Positionsdaten kontinuierlich abzufragen:
 
   1: var watchId = navigator.geolocation.watchPosition([success], [error]);

Der Success-Event-Handler könnte beispielsweise eine Funktion sein, die neue Position des Anwenders auf einer Karte markiert.

Wurde der Standort erfolgreich ermittelt, stehen im entsprechenden Event-Handler u. a. folgende Daten zur Verfügung:

  • coords.latitude (geographische Breite)
  • coords.longitude (geographische Länge)
  • coords.altitude (geographische Höhe)
  • coords.heading (Blickrichtung)
  • coords.accuracy (Genauigkeit in Metern)
  • coords.speed (Bewegung in Metern / Sekunde)

Auf Basis dieser Werte, die je nach Hardware unterschiedlich aussagekräftig sind, ist dann die Implementierung einer Vielzahl von eigenen Funktionen denkbar.

Ein einfaches Beispiel ist hier zu finden: http://html5demos.com/geo

Im Fehlerfall erhält der Event-Handler eine Nachricht mit Fehlerinformationen. Hierbei ist zu beobachten, dass die Weigerung des Benutzers, seine Positionsdaten preiszugeben, nicht in jedem Browser zum Aufruf des Error-Handlers führt, obwohl es einen Fehler-Code PERMISSION_DENIED gibt. Auch ein etwaiger Timeout-Parameter führt beim Verweigern der Erlaubnis nicht zum Aufruf des Error-Handlers, sondern bezieht sich nur auf Timeouts einer bereits erlaubten Anfrage. Das Problem war sowohl im Internet Explorer 9 als auch im Firefox 4 zu beobachten, während z. B. Opera und der Android-Browser sich mit dem Code PERMISSION_DENIED beim Error-Handler meldeten. Die Webseite muss also damit umgehen können, dass gar nichts passiert oder über eine eigene Implementierung feststellen, dass die Erlaubnis in einem Zeitfenster nicht erteilt wurde. Es könnte aber auch sein, dass der Benutzer einfach nur lange braucht.

Letztendlich kann aber diese Unzulänglichkeit den ansonsten guten Eindruck von der HTML5 Geolocation API kaum schmälern. Dank der breiten Unterstützung durch alle großen Browser-Hersteller ist die Geolocation API eines der ersten HTML5-Features, welches schon bei den Endverbrauchern angekommen ist. Ein Beispiel hierfür sind die mobilen Portale der Verkehrsanbieter, von denen immer mehr die GPS-Ortung im Browser anbieten, um den Anwendern das Eintippen ihres Standortes und die Tücken der Spracheingabe zu ersparen.