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 möjliggör för oss att läsa ut denna data. Noggrannheten kan skilja sig lite åt, beroende på om enheten som man kör applikationen på har GPS eller ej.

Eftersom det kan vara integritetskränkande att spåra människor, kommer webbläsaren att be om användarens godkännande innan den levererar koordinater till en applikation. Tackar användaren nej, kommer funktionsanropet att misslyckas.

I skrivandets stund tillåts sidor som levereras via HTTP att begära platsinformation, detta kommer dock att ändras i framtiden. Så försök att använda dig av HTTPS för applikationer som ska använda platsinformation. Överföringsmetoden kan alltså även det förorsaka att funktionsanrop till geolokations-API:et fallerar.

Det kan alltså vara en bra idé att även ha kod som hanterar en situation där vi av någon anledning nekas tillgång till positionensinformationen.

För att komma igång, så kör vi ett exempel på en enkel platsförfrågan:

See the Pen vLxLZw by Patrik Grip-Jansson (@PGJ) on CodePen.

(Kom ihåg att klicka på "Result" för att se resultatet också!)

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 och om det inte är det 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ör 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. Vi återkommer till dem strax.

Det kan vara intressant att veta att getCurrentPosition är en asynkront 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 lyckade positionsförfrågningar. Som inparameter får vi ett objekt som innehåller resultatet ifrån platsförfrågningen. Denna innehåller följande data:

Positionsobjekt

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. Föregående värden är oftast bara tillgängliga om användaren kör på något som har en GPS – som en telefon eller surfplatta.

Om de ä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 mäts i grader ifrån norr, där 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. Står denna stilla så är värdet 0.