How to use geolocation api using ReactJS

#react #javascript #webdev #tutorial

Geolocation is used to find the current location of a network device. It can be used in applications like Google Maps, Uber, Tripadvisor, etc.

In ReactJS, we can find a user's current geolocation using the JavaScript Geolocation API.

Note: The Geolocation API is supported in a handful of broswers which can run HTML 5 such as Google Chrome, Opera, Edge, etc.

Now we will look at the steps that we need to follow in order to use the Geolocation API and find a user's latitude and longitude coordinates.

First, we will need to import react and the required libraries that will be used in this implementation. We will use the useState react hook to manage the variable which stores a user's geolocation. We shall add the following line to include these libraries and methods at the start of our program.

import React, { useState } from 'react';

We will declare a component function called App() for our React project, which will load the application page. There we will enclose all the geolocation methods.
We will declare a component function called App() for our React project, which will load the application page. There we will enclose all the geolocation methods.

const [userLocation, setUserLocation] = useState(null);

The next step is to define a function to find the user's geolocation and update the userLocation variable accordingly. We will use the arrow function shown below.

const getUserLocation = () => { /*insert code here*/ };

In this getUserLocation function, we will now add all the methods for finding the user's geolocation. First, we will check whether the geolocation functionality is supported by the user's browser. We will use a simple if else statement encasing the navigator.geolocation function.

if (navigator.geolocation) {
    // what to do if supported
}
else {
    // display an error if not supported
    console.error('Geolocation is not supported by this browser.');
}

Now, we need to work on what to do if the navigator.geolocation method is supported by the user's browser. We will need to retrieve the user's location. To do this, we use the navigator.geolocation.getCurrentPosition() function.

navigator.geolocation.getCurrentPosition(
    (position) => {
        // what to do once we have the position
    },
    (error) => {
        // display an error if we cant get the users position
        console.error('Error getting user location:', error);
    }
);

Once we have the position of the user, we can now use it to find the user's coordinates and other relevant data. To access the coordinates that are enclosed in the position variable, we can use the poisiton.coords method. We will now create two variables to store these coordinates for later use.

const { latitude, longitude } = position.coords;

Once we have access to the user's coordinates, we will now update our userLocation variable by calling the setUserLocation() function.

setUserLocation({ latitude, longitude });

Now that we have stored the user's location coordinates, our next job is to render an HTML that will reflect back the user's coordinates onto the web page. To do this, we will include a button, and when its clicked, we will call the getUserLocation function and update the userLocation variable.

<button onClick={getUserLocation}>Get User Location</button>

We must also display the user location if we retrieve it successfully. To do this, we will use a && statement along with the userLocation variable, which encloses all the HTML code to print the user's coordinates. Once the userLocation variable updates, it is no longer a null value, and the statement is now true; hence it displays the coordinates.

{userLocation && (
    <div>
        <h2>User Location</h2>
        <p>Latitude: {userLocation.latitude}</p>
        <p>Longitude: {userLocation.longitude}</p>
    </div>
)}

Now that we have gone through all the steps that we need to follow to retrieve a user's geographical location, we will now combine all the steps into a single file.

Full Source code

// import the required react libraries
import React, { useState } from 'react';

function App() {
  // const variable array to save the users location
  const [userLocation, setUserLocation] = useState(null);

  // define the function that finds the users geolocation
  const getUserLocation = () => {
    // if geolocation is supported by the users browser
    if (navigator.geolocation) {
      // get the current users location
      navigator.geolocation.getCurrentPosition(
        (position) => {
          // save the geolocation coordinates in two variables
          const { latitude, longitude } = position.coords;
          // update the value of userlocation variable
          setUserLocation({ latitude, longitude });
        },
        // if there was an error getting the users location
        (error) => {
          console.error('Error getting user location:', error);
        }
      );
    }
    // if geolocation is not supported by the users browser
    else {
      console.error('Geolocation is not supported by this browser.');
    }
  };

  // return an HTML page for the user to check their location
  return (
    <div>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </div>
  );
}

export default App;

If you want using typescript, source code here

"use client"

import React, { useState } from "react";

export default function TestGeolocation() {
  const [userLocation, setUserLocation] = useState<{
    latitude: number;
    longitude: number;
  } | null>(null);

  const getUserLocation = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { latitude, longitude } = position.coords;

          setUserLocation({ latitude, longitude });
        },

        (error) => {
          console.error("Error get user location: ", error);
        }
      );
    } else {
      console.log("Geolocation is not supported by this browser");
    } 
  };

  return (
    <>
      <h1>Geolocation App</h1>
      {/* create a button that is mapped to the function which retrieves the users location */}
      <button onClick={getUserLocation}>Get User Location</button>
      {/* if the user location variable has a value, print the users location */}
      {userLocation && (
        <div>
          <h2>User Location</h2>
          <p>Latitude: {userLocation.latitude}</p>
          <p>Longitude: {userLocation.longitude}</p>
        </div>
      )}
    </>
  );
}