Track'n'Mash: Geolocation mit dem Safari auf dem iPhone mit OS 3.0

Dadurch hat der iPhone-Webapp Entwickler nun die Möglichkeit, über das navigator.geolocation Objekt, die aktuellen Positionsdaten eines Clients zu erfragen und natürlich auch zu verwenden.

Beispiel (Ansicht im iPhone):

         function doLocate(position) {
            document.getElementById('lat').innerText = position.coords.latitude;
            document.getElementById('long').innerText = position.coords.longitude;
            document.getElementById('alt').innerText = position.coords.altitude;
            document.getElementById('heading').innerText = position.coords.heading;
            document.getElementById('speed').innerText = position.coords.speed;
            document.getElementById('acc').innerText = position.coords.accuracy;
            document.getElementById('ts').innerText = position.timestamp;
         }

         function init(){
            if (!navigator.geolocation) {
               document.getElementById('err').innerText = "GET A BETTER BROWSER! 'navigator.geolocation' is unsupported.";
            } else {
               navigator.geolocation.getCurrentPosition(doLocate);
            }
         }

Die init Funktion überprüft, ob das navigator.geolocation Objekt im Browser unterstützt wird. Im Erfolgsfall wird mit navigator.geolocation.getCurrentPosition(doLocate) die aktuelle Position ermittelt und an den Handler doLocate übergeben. Über das Positions-Objekt steht einem das coords Attribut zur Verfügung, welches alle relevanten Lokalisierungs-Attribute enthält.

Die Genauigkeit der Lokalisierung wird mit dem accuracy Attribut bestimmt und ist wahrscheinlich bei diesem einmaligen Aufruf relativ hoch (d.h. ungenau) 1. Um eine bessere Genauigkeit zu bekommen, müsste der Aufruf n-mal in der Hoffnung erfolgen, dass das GPS-Modul im iPhone bessere Werte zur Verfügung stellt. Zu realisieren wäre dieses mit z.B. mit der window.setTimeout Funktion. Die Erfahrung mit dieser Vorgehensweise hat aber gezeigt, dass die Werte des coords Attribut gecached ausgeliefert werden. Die Lösung ist schon im navigator.geolocation Objekt vorhanden: Durch den Aufruf von navigator.geolocation.watchPosition(doLocate), agiert die Funktion doLocate bei jeder Positionsänderung als Handler. Beispiel (Ansicht im iPhone):

         var watchId;
         function doLocate(position) {
            document.getElementById('lat').innerText = position.coords.latitude;
            document.getElementById('long').innerText = position.coords.longitude;
            document.getElementById('alt').innerText = position.coords.altitude;
            document.getElementById('heading').innerText = position.coords.heading;
            document.getElementById('speed').innerText = position.coords.speed;
            document.getElementById('ts').innerText = position.timestamp;

            var acc = position.coords.accuracy;
            document.getElementById('acc').innerText = position.coords.accuracy;
            if (acc < 200) {
               navigator.geolocation.clearWatch(watchId);
               document.getElementById('watch').innerText = "No, stopped watching. Accuracy < 200";
            } else {
               document.getElementById('watch').innerText = "Yes, watchId is " + watchId;
            }
         }

         function init(){
            if (!navigator.geolocation) {
               document.getElementById('err').innerText = "GET A BETTER BROWSER! 'navigator.geolocation' is unsupported.";
            } else {
               // Kleine Änderung, große Wirkung
               watchId = navigator.geolocation.watchPosition(doLocate);
            }
         }

Jede Positionsänderung erzeugt nun eine Ausgabe in der View. Zusätzlich wurde noch Logik implementiert um den Prozeß zu stoppen, wenn die Genauigkeit unter 200 Fuß liegt. navigator.geolocation.watchPosition liefert einen eindeutigen Identifizierer des Überwachungsprozesses zurück. Mit navigator.geolocation.clearWatch(watchId) wird dieser Prozess gestoppt.

Sich jetzt die Aufgabe zu stellen, die aktuelle Position auf einer Karte (GoogleMaps) darzustellen, ist leicht zu implementieren (Ansicht im iPhone):

Die Karte enthält einen Marker mit der aktuellen Position. Bei einer Positionsänderung wird die Position des Markers aktualisiert und die Karte entsprechend zentriert.

Screenshots:

Initialer Aufruf	Darstellung der Geo Daten	Integration einer Karte

Weitere Links:

• navigator.geolocation: Using the W3C Geolocation API today
• Mozilla Webdev: Geolocation in the Browser
• How to Use Geolocation in Mobile Safari
• Der iPhone-App Killer: Mobile Webbrowser bekommen endlich Zugriff auf die Geolocation!
• Smiths R Us: GPS Geolocation in Safari on iPhone OS 3.0
• Clientseitige Datenspeicherung im Safari mit Javascript und SQLite
• Generierung von Offline Webapplikationen mit HTML 5 / Beispiel auf dem iPhone

¹Maßeinheit für accuracy und auch altitude ist in Fuß angegeben (1 ft = 30,48 cm)