Att ta reda på var någon befinner sig
Innan vi tar oss an att visa upp saker på en karta, ska vi börja med att se hur man kan läsa ut var användaren befinner sig. I HTML5 finns ett geolokations-API som gör så man kan läsa ut positionsdata. Noggrannheten kan skilja sig lite åt, beroende på om applikationen körs på en enhet som har GPS eller ej.
Begränsningar
Eftersom det kan vara integritetskränkande att spåra människor, kommer webbläsaren att be om användarens godkännande innan den levererar positionskoordinater till en applikation. Tackar användaren nej, kommer funktionsanropet att misslyckas. Det finns en speciell felkod som används när detta inträffar.
De flesta webbläsare tillåter inte positionsspårning via HTTP. I dessa fall är denna funktionalitet enbart tillgänglig för script som hämtats via HTTPS. Försök att alltid använda dig av HTTPS för applikationer som behöver ta del av platsinformation. Överföringsmetoden kan alltså förorsaka att funktionsanrop till geolokations-API:et fallerar.
När man använder platsinformation, kan det även spela roll var scriptet ligger. I de flesta fall tillåter inte webbläsarna att man anropar script som ligger på en annan domän. Exemplen här på Webbling går oftast inte att köra utan att följa länken till CodePen. Det beror på att webbläsarna inte tillåter att scriptet och webbsidan ligger på olika domänen.
Det kan alltså vara en bra idé att ha kod som hanterar situationer där tillgång till positionsinformationen nekas. Överhuvudtaget ska man förstås alltid ha robust felhantering i sina applikationer.
Exempel
För att komma igång, så kör vi ett exempel på en enkel platsförfrågan (det kan vara som så att du måste följa länken "Edit on CodePen" för att exemplet ska fungera fullt ut):
Genomgång av kodexemplet
Finns API:et?
Koden börjar med att det kolla om API:et är tillgängligt i användarens webbläsare. Om så inte är fallet så visar vi ett felmeddelande. Det kan alltid vara en bra idé att kolla så att de API:er vi tänker använda oss av är tillgängliga.
Det finns många orsaker till att ett API skulle kunna saknas. Användaren kanske har en gammal webbläsare eller kanske kör denne en specialanpassad webbläsare – t.ex. någon typ av screenreader. Försök att hantera avsaknaden av API:er och eventuella fel så smidigt som möjligt. Om du fortfarande kan erbjuda användaren vettig information och viss funktionalitet, se till att göra det.
Begär positionsangivelse
Om API:et är tillgängligt så kallar vi på en av dess metoder; geolocation.getCurrentPosition. Om denna hittar positionen, körs VisaPosition. I annat fall har något gått fel och den kör istället Felhanterare.
Det finns några till API-anrop som går att göra med geolocation. Dessa används när man vill ha kontinuerlig uppdatering av användarens position. Vi återkommer till dem i slutet av aktiviteten.
Det kan vara intressant att veta att getCurrentPosition är en asynkron funktion. Vår kod kommer alltså att fortsätta ”direkt”, utan att vänta på ett resultat. På grund av detta skickar man med så kallade callback-funktioner. Dessa utförs när getCurrentPosition har något att rapportera. Se Introduktion till asynkron programmering för mer information.
VisaPosition
Funktionen VisaPosition hanterar avklarade positionsförfrågningar. Som inparameter får vi ett objekt som innehåller resultatet ifrån positionsförfrågningen.
Positionsobjekt
Objektet innehåller följande data:
| Variabelnamn | Förklaring |
|---|---|
latitude
|
Latitud |
longitude
|
Longitud |
altitude
|
Höjd över havet eller null
|
accuracy
|
Mätningens noggranhet i meter |
altitudeAccuracy
|
Höjdmätningens noggranhet i meter eller null
|
heading
|
Färdriktning |
speed
|
Hastighet |
Om höjden inte kan bestämmas så sätts både altitude och altitudeAccuracy till null. Det samma gäller för heading och speed. Dessa värden är oftast bara tillgängliga om applikationen körs på en enhet som har en GPS-mottagare – som en telefon eller surfplatta.
Om ovanstående data är tillgängliga så kan man alltså läsa ut i vilken riktning som användaren förflyttar sig med hjälp av heading. Detta värde anges i antal grader motsols räknat från norr. Det innebär att 0 är rakt mot norr och 180 är rakt söder ut. Om vi kan läsa ut speed så är detta användarens hastighet mätt i m/s. Om enheten inte är i rörelse så är detta värde satt till 0.
Felhantering
Felhanteringen är rätt så enkel och basal. Det finns ett antal fördefinierade felkoder som vi jämför med och kollar om någon matchar det fel vi fick. Om ingen matchar körs default.
I en verklig app, hade vi antagligen gjort mycket mer om saker gått åt pipan. Men här räcker det med detta lilla.
Kontinuerlig uppdatering av positionen
Förutom getCurrentPosition finns det ett par andra metoder att tillgå i geolocation. Dessa används när man vill ha kontinuerliga uppdateringar av användarens position.
watchPosition
watchPosition fungerar i stort sett som getCurrentPosition, med den skillnaden att den fortsätter att uppdatera positionen kontinuerligt.
let id = geolocation.watchPosition( <lyckad>, <fel> );
Varje gång en position läses in körs callback-funktionerna. Om allt går väl och en position erhålles, körs funktionen lyckad. Vid eventuellt fel så körs fel. Båda funktionerna kan alltså anropas upprepade gånger.
id används för att kunna slå av positionskontrollen.
clearWatch
När man inte längre vill att positionen ska uppdateras automatiskt slår man av den med clearWatch. Denna används enligt följande mall:
geolocation.clearWatch( id );
Detta slår av den positionskontroll som identifieras av id.
Nästa aktivitet
Nu har vi lite kunskap om hur man kan hantera GPS-liknande funktionalitet i webbläsaren. Nu ska vi se om vi kan få ut dessa data på en karta.