Netsetters weblogProgramming, User Experience and IA

Na het artikel over HTML5 Canvas en twee mogelijkheden voor lokale opslag (Local storage en Database Storage) ben ik lekker op dreef.  Daarom vandaag een stukje over geolocation. Met geolocation kunnen wij de locatie van iemand in de browser opvragen. Dit is uitermate geschikt voor mobiele toepassingen en het leveren van een gepersonaliseerde ervaring.

Realtime en locatiediensten steeds belangrijker

Realtime informatie en gepersonaliseerde locatie-diensten zijn sterk in opkomst. Zo zijn er initiatieven als Foursquare en Google Latitude die enorm aan populariteit winnen. Op dit moment moet een aparte mobiele applicatie geschreven worden die de locatie van de gebruiker kan doorgeven aan de server, maar door middel van geolocation in HTML5 kunnen we ook in de browser de locatie opvragen van een persoon. Dit geeft weer een enorm aantal toepassingen voor webapplicaties, vooral voor mobiele apparaten.

Niet alleen via GPS

De locatie van een client hoeft niet perse door middel van GPS te worden opgevraagd. Het is dus niet nodig om een apparaat te hebben met ingebouwd GPS maar het werkt ook op de normale desktop computer. Andere bronnen op locatie te bepalen zijn bijvoorbeeld het ip nummer, driehoeksmeting van GSM masten, Wifi, bluetooth etc. Het is dus niet altijd 100% zeker dat de geretourneerde waarde ook de werkelijke positie bevat, maar het geeft in ieder geval de meest betrouwbare positie van de client op dat moment weer.

Compatible browsers

Op dit moment is het nog onzeker of Microsoft het gaat  redden om de ondersteuning in Internet Explorer 9 te krijgen, maar het werkt al op Firefox (>3.5), Chrome (>5.0; komt later 2010 uit), Opera (>10.*), Ok op het Iphone OS 3+ kan er gebruik gemaakt worden van geolocation. Het moeilijke is dat het naast een aanpassing in de browser ook een aanpassing in het onderliggende besturingssysteem vraagt, omdat deze de hardware aanstuurt om de positie van de client te berekenen. Firefox is de enige browser die geheel

Positie opvragen in javascript met getCurrentPosition

De locatie opvragen binnen javascript is uiterst simpel en gebeurd met getCurrentPosition. Deze functie heeft 3 argumenten namelijk:

• succescallback (wat te doen bij succes)
• errorcallback (wat te doen bij een fout)
• casheoptions (hoe lang blijft de positie in de cache bewaard)

De succescallback is een functie waarin  de long-lat coördinaten gebruikt kunnen worden, hieronder een voorbeeld.

// locatie opvragen en doorgeven aan de functie 'verwerkLocatie', als er geen locatie opgevraagd kan worden wordt de functie 'locatieError' uitgevoerd.
navigator.geolocation.getCurrentPosition(verwerkLocatie, locatieError);

function verwerkLocatie(position) {
      alert("mijn locatie is:"+position.coords.latitude+" "+position.coords.longitude);
}

function locatieError() {
      alert("Locatie kon niet worden vastgesteld door middel van HTML5");
}

Locatie iopvragen vanuit de cache

Het kan voorkomen dat de locatie nu niet beschikbaar is, maar dat deze wel x aantal minuten geleden is vastgesteld. Mobiele telefoons doen dit om de batterijduur te verlengen. Hierdoor is het mogelijk om een positiebepaling vanuit de opgeslagen cache op te vragen. Hieronder een voorbeeld waarin er een positie wordt opgevraagd vanuit de cache die niet ouder is dan 10 minuten.

navigator.geolocation.getCurrentPosition(successCallback,
                                             errorCallback,
                                             {maximumAge:600000});

Locatie gebaseerde webapplicatie bouwen

Nu kan de locatie gebruikt worden om bijvoorbeeld weer te geven op een map (vind verkooppunten van product x in mijn omgeving), of kan de locatie gebruikt worden om de taal van de website te selecteren. er zijn natuurlijk veel verschillende toepassingen om de locatie te gebruiken. Uitproberen? kijk eens op de demo op html5demos.com

Related articles by Zemanta

• The Web Doesn’t Suck. Browsers Are Innovating. (yehudakatz.com)
• Google official reaffirms HTML5 readiness (infoworld.com)

Popularity: 37% [?]

Tags: Firefox, geolocation, Google Chrome, Google Latitude, GSM, HTML5, Internet Explorer, location, Microsoft, mobiele applicaties, Opera, webapplicaties

This entry was posted on Friday, May 21st, 2010 at 11:30 am and is filed under data, logic, trends, visualisation. You can follow any comments to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.