Sponsored Post: Benutzerortung mit der HTML5 Geolocation API

Geolocation im Browser

Es gibt diverse Anwendungsfälle die man heute schon mit verschiedenen Endgeräten im Falle der Positionsermittlung benutzt. Der bekannteste ist mit Sicherheit ein Navigationssystem, das die aktuelle Position mittels GPS ermittelt und den Benutzer daraufhin Navigationshinweise gibt. Viele mobile Endgeräte verfügen heutzutage schon über GPS, sogar Foto-Kameras verfügen über GPS und erlauben das Taggen von Fotos während der Aufnahmen.

Doch zur Positionsermittlung benötigt man nicht zwangsläufig ein GPS, es gibt andere Verfahren wie die Ortsbestimmung durch Ermittlung der IP-Adresse oder auch WiFI-Triangulation.

Die Möglichkeit nun auch über den Browser die aktuelle Position des Benutzers zu ermitteln erschließt ein noch breiteres Spektrum an Anwendungsmöglichkeiten. Schließlich sind HTML5-Browser nicht nur auf dem Desktop zu Hause, sondern auch auf mobilen Endgeräten.

Ein ganz neues Spektrum an Einsatzszenarien ist denkbar, die bisher technisch einen durchaus größeren Mehraufwand bedeutet haben. Neben dem traditionellen Anwendungsfall Navigationssoftware könnten weitere hinzukommen: die unterstützende Suche von Orten anhand der Benutzerposition, automatisierte Warnhinweise über Ereignisse die in der Nähe des Benutzers passieren, Benachrichtigungen über Freunde aus dem sozialen Netzwerk die in der Nähe sind und viele weitere. Das Beste daran ist, dass der Browser hier die notwendigen Mittel zur Verfügung stellt ohne sich erst Hardware besorgen zu müssen und diese Szenarien dann mit recht geringem Aufwand implementiert werden können. Die eigentliche Arbeit übernimmt nämlich der Browser. Dank der Geolocation API bekommt man die Daten fertig aufbereitet über einen Callback und kann entsprechend Logik ansteuern.

Ich weiß wo Du Bist!

Die Geolocation API Spezifikation findet man beim W3C. Die Benutzer API ist sehr simpel und verfügt alles in allem über drei Methoden.

getCurrentPosition und watchPosition

Die Methode „getCurrentPosition()“ ermittelt einen einmaligen Geolocation Snapshot. Sprich die Position des Benutzers wird einmal abgefragt und das Ergebnis kommt im positiven Falle in den Callback zurück. Die Signatur der Methode ist folgendermaßen:

void getCurrentPosition(in PositionCallback successCallback,
   in optional PositionErrorCallback errorCallback,
   in optional PositionOptions options);

Bevor man mit einem Beispiel einsteigt, lohnt sich zuvor ein Blick auf die zwei optionalen Parameter „PositionErrorCallback“ und „PositionOptions“. Der „PositionErrorCallback“ liefert ein „PositionError“ Objekt zurück. Dieses besteht aus einem Fehlercode und der Fehlernachricht. Mit „PositionOptions“ kann man die Genauigkeit, einen Timout-Wert sowie die Zeitdauer der Daten, die sich im Geolocation Cache befinden bestimmen.

Diese zwei optionalen Parameter werden auch für die zweite Methode  „watchPosition“ verwendet. Der Callback letztlich enthält im positiven Falle ein gültiges „Position“ Objekt mit welchem man arbeiten kann.

Hab Dich gefunden: Position

„Position“ enthält einen Zeitstempel, die aufbereiteten Geolocation-Daten und kann je nach verwendetem Browser und Möglichkeiten im Endgerät neben Längen- und Breitengrad auch Ausrichtung, Geschwindigkeit und Höhe über Normal Null enthalten. Hier die Definition des „Position“ Objektes:

interface Position {
   readonly attribute Coordinates coords;
   readonly attribute DOMTimeStamp timestamp;
};
##
interface Coordinates {
   readonly attribute double latitude;
   readonly attribute double longitude;
   readonly attribute double? altitude;
   readonly attribute double accuracy;
   readonly attribute double? altitudeAccuracy;
   readonly attribute double? heading;
   readonly attribute double? speed;
};

Die Methode „watchPosition“ ist im Prinzip genauso anzuwenden wie „getCurrentPosition“, der Hauptunterschied findet sich schon im Namen der jeweiligen Methode wieder. „watchPosition“ macht genau das was der Name verspricht: Die Position des Benutzers wird ständig aktualisiert. Eine Anwendung kann dementsprechend den Weg des Benutzers folgen. Zum Beispiel kann man mit einem Handy durch die Stadt laufen und die einzelnen Positionsänderungen in der Anwendung verarbeiten. „getCurrentPosition“ hingegen liefert wirklich nur einen einmaligen Snapshot der aktuellen Position zurück.

Generell ist die Qualität der Geolocation Daten auch vom Netzwerk abhängig. In WiFi-Umgebungen sind die Positionsdaten meist sehr zuverlässig, während man zum Beispiel zu Hause am Kabelnetzwerk einen Standpunkt vom letzten Providerknoten angezeigt bekommen kann. Auch bei einer Zugfahrt per UMTS können so die unterschiedlichen Einwahlpunkte dargestellt werden. Bei mobilen Endgeräten kann auch der GPS-Sensor des Gerätes benutzt werden, letztlich hängt es aber von der Implementierung des Browsers ab wie er diese Daten der JavaScript API anbietet.

„watchPosition“ liefert eine ID als Rückgabewert. Diesen Rückgabewert sollte man sich merken wenn man die Beobachtung der Position des Benutzers wieder löschen möchte. Man übergibt den Wert der Methode „clearWatch(id)“ um dies zu tun.

getCurrentPosition Beispiel

Das folgende Codebeispiel zeigt die Anwendung der Funktion „getCurrentPoistion“ und verwendet für die Ausgaben einfach „console.log()“ des Browsers.

if( navigator.geolocation )    {
   navigator.geolocation.getCurrentPosition(
      function(position) {
         console.log("Zeitstempel Position: " + position.timestamp );
         console.log("Breitengrad: " + position.coords.latitude );
         console.log("Längengrad: " + position.coords.longitude );
         console.log("Über NN: " + position.coords.altitude );
      },
      function(error) {
         console.log("Fehlercode: " + error.code);
         console.log("Meldung: " + error.message);
      },
      {
         enableHighAccuracy: false,
         timeout: 60000,
         maximumAge: "Infinite"
      }
   );
}
else
{
   console.log("Der Browser unterstützt die Geolocation API nicht!");
}

Der Code gibt die Position aus, einen möglichen Fehler und spezifiziert noch alle optionalen Parameter. Ist maximumAge auf „Infinite“ gesetzt so wird auch eine im Cache befindliche Position genommen, wenn keine neue ermittelt werden konnte.

Die Einwilligung des Benutzers

Damit nicht Webanwendungen ohne das Wissen des Benutzers dessen Position erfahren und verarbeiten, fragt der Browser den Benutzer nach dessen Zustimmung, ob die Anwendungen dessen Lokationsbezogenen Daten erfahren darf. Das sieht von Browser zu Browser unterschiedlich aus, hier das Beispiel aus dem Internet Explorer:

Erst nach dieser Bestätigung wird der Aufruf an den Callback erfolgen.

watchPosition Beispiel

Das watchPosition Beispiel ist fast identisch. Man erhält zusätzlich noch den Rückgabewert für die aktuelle Benutzerbeobachtung, einen Identifier.

var watchId;
##
if( navigator.geolocation ) {
   watchId = navigator.geolocation.watchPosition(
   function(position) {
      console.log("Zeitstempel Position: " + position.timestamp );
      console.log("Breitengrad: " + position.coords.latitude );
      console.log("Längengrad: " + position.coords.longitude );
      console.log("Über NN: " + position.coords.altitude );
   },
   function(error) {
      console.log("Fehlercode: " + error.code);
      console.log("Meldung: " + error.message);
   },
   {
      enableHighAccuracy: false,
      timeout: 60000,
      maximumAge: "Infinite"
   });
} else {
   console.log("Der Browser unterstützt die Geolocation API nicht!");
}
##
// wenn man abbrechen möchte einfach diese Funktion aufrufen
function abortWatch() {
   if( watchId ) {
      navigator.geolocation.clearWatch(watchId);
   }
}

Geolocation API im Zusammenspiel mit Bing Maps

Damit ist die gesamte Geolocation API abgedeckt. Simpel und einfach. Interessant wird es wenn man das ganze noch im Kontext eines Anwendungsfalles macht. Die Geolocation Demo der IE Testdrive Seite verwendet die Bing Maps API in der Version 7 und zeichnet einen Pushpin auf die ermittelte Position.

Für die Bing Maps API V7 benötigt man einen Developer Key, dieser ist kostenlos und erlaubt es eine Bing Maps basierte Anwendung zu entwickeln. „watchPosition“ ruft in dem Beispiel zwei Funktionen auf, eine zum Zeichnen der Karte, die andere um ein _<div>_ Tag mit den Koordinaten zu erzeugen. Das Zeichnen der Karte erfolgt in „showPositionOnMap()“ und sieht folgendermaßen aus:

var pin = new Microsoft.Maps.Pushpin({
   latitude: position.coords.latitude,
   longitude: position.coords.longitude
});
##
var mapOptions = {
   credentials: "Dein-Developer-Key-Hier",
   mapTypeId: Microsoft.Maps.MapTypeId.aerial,
   height: 590,
   width: 590
};
##
if( map == null) {
   map = new Microsoft.Maps.Map(document.getElementById("map"), mapOptions);
   $("#map").show();
}
##
var viewOptions = {
   center: {
      latitude: position.coords.latitude,
      longitude: position.coords.longitude
   },
   zoom: 18,
   mapTypeId: "auto"
}
##
map.setView(viewOptions);
map.entities.push(pin);

In Zeile 1-4 wird der Pushpin erzeugt, mit den ermittelten Koordinaten des Browsers. Danach ist alles wie gehabt, Karte erzeugen (Zeile 15), auf die Koordinaten zentrieren (Zeile 19-28) und den Pushpin drauf zeichnen (Zeile 29). Fertig.

Fazit

Mit der Geolocation API ist es für Web Anwendungen möglich, Positionsbezogene Informationen anzubieten und das mit relativ einfachen Mitteln. Man darf gespannt sein, welche Anwendungen in Zukunft von der API Gebrauch machen werden und welche Ideen dabei entstehen.