Geolocation API in React-componenten

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) vraagt eenmalig de locatie van het apparaat op. De succescallback ontvangt een object van het type GeolocationPosition. Dit is geschikt wanneer je de locatie één keer nodig hebt, bijvoorbeeld om na een klik op een knop de dichtstbijzijnde winkel te vinden, in plaats van voortdurende bewegingen te volgen.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) roept de callback continu aan wanneer de positie van het apparaat verandert. De functie retourneert een numerieke watchId. Dit is geschikt voor realtimegebruik, zoals het volgen van bezorgingen of stapsgewijze navigatie, waarbij de positie actueel moet blijven.

Het object GeolocationPosition bevat een eigenschap coords met latitude, longitude en accuracy (in meters). Aanvullende optionele velden zijn altitude, altitudeAccuracy, heading en speed. Het veld timestamp legt vast wanneer de positie is bepaald.

De foutcallback ontvangt een GeolocationPositionError met een numerieke eigenschap code. Code 1 is PERMISSION_DENIED (de gebruiker heeft geweigerd), code 2 is POSITION_UNAVAILABLE (hardware- of netwerkfout) en code 3 is TIMEOUT (het verzoek duurde te lang). Handel altijd alle drie de gevallen af.

Een listener van watchPosition blijft onbeperkt actief totdat je deze stopt. Retourneer in useEffect een opschoonfunctie die navigator.geolocation.clearWatch(watchId) aanroept. Als je het opruimen vergeet, blijft het volgen actief nadat de component is ontkoppeld. Dat verbruikt batterij en kan mogelijk de status van een ontkoppelde component bijwerken.

Een useGeolocation-hook beheert een statusvariabele met vier mogelijke waarden: idle (nog niet aangevraagd), loading (aanvraag wordt verwerkt), success (positie ontvangen) en error (mislukt). De hook bewaart ook de position en errorMessage in de status. Componenten krijgen zo een duidelijke, consistente interface.

Wanneer de gebruiker geolocatie weigert, toon je een nuttige melding waarin je uitlegt waarom de functie toegang tot de locatie nodig heeft en hoe de gebruiker die toegang opnieuw kan inschakelen in de browserinstellingen. Toon gebruikers nooit een onbewerkte foutcode. Bied handmatige adresinvoer als terugvaloptie, zodat de functie ook zonder locatietoestemming bruikbaar blijft.

Net als de meeste krachtige browser-API's is geolocatie beperkt tot veilige contexten. navigator.geolocation is undefined op gewone HTTP-pagina's. Tijdens de ontwikkeling werkt het op localhost zonder HTTPS. Zorg er in productie altijd voor dat je app via HTTPS wordt aangeboden, anders krijgen gebruikers nooit een toestemmingsvraag.

Het optionele derde argument van getCurrentPosition en watchPosition accepteert een optiesobject. enableHighAccuracy: true vraagt om GPS-nauwkeurigheid, maar kost meer energie. timeout bepaalt hoeveel milliseconden je maximaal wacht. maximumAge staat een gecachte positie toe als die binnen het opgegeven aantal milliseconden is bepaald.

Geolocatie maakt functies mogelijk zoals "vind een winkel bij mij in de buurt", het volgen van bezorgers op een kaart, weerinformatie op basis van de huidige stad, berichten met een locatie en afstandsberekeningen tussen de gebruiker en een bestemming. Leg gebruikers altijd duidelijk uit waarom de app hun locatie nodig heeft voordat je om toestemming vraagt.

Met Chrome DevTools kun je een valse apparaatlocatie instellen. Open DevTools, ga naar het menu met de drie punten, kies Meer hulpprogramma's en vervolgens Sensoren. Je kunt coördinaten voor de breedtegraad en lengtegraad invoeren om elke locatie te simuleren. Dat is veel sneller dan fysiek naar een andere plek reizen om locatieafhankelijke functies te testen.

Gebruik getCurrentPosition voor een eenmalige lezing en watchPosition om de positie continu te volgen. Roep in het opruimen van useEffect altijd clearWatch aan. Bouw een useGeolocation-hook met de statussen idle, loading, success en error. Handel geweigerde toestemming netjes af en onthoud dat geolocatie in productie HTTPS vereist.