Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Get current Geolocation of user using React-Geolocated

  • Last Updated : 15 Dec, 2021

In some situations, applications need to access the current location properties of the user. Location properties include latitude, longitude, and some more about the current location of the user. From the Location properties, the user can know the current geolocation of the user.

The app can provide specific services to the user according to current geolocation. For example, the Wheather app shows the current weather of the user’s current geolocation using OpenWeatherMap API. The app with a map integration can show the current location of the user on the Google map using Google Maps API.

In this tutorial, we will learn to access the current geolocation properties of users in react js by using the geolocated package. By using the react-geolocated package, the user can get the following details.

  • Latitude
  • Longitude
  • Altitude
  • Accuracy
  • speed

Users need to first set up the react project environment on their local computer.

Creating new react project

Step 1: To create a new react app, run the below command to your terminal.

npx create-react-app testapp

Step 2: Now, move inside the project directory using the below command.

cd testapp

Project Directory: It should look like the below image.

Step 3: Install the react-Geolocated package inside your project directory by running the below command in the terminal.

npm install react-geolocated --save

Now, we are ready to get the geolocation of the user using the react-geolocated.

Syntax:

1. Check if browser is supporting geolocated or not
   if(this.props.isGeolocationAvailable) {
     
     a. check if location in browser is enabled or not
        if(this.props.isGeolocationEnabled){
         
         i. check if coordinates of current location is 
             available or not
            if(this.props.coords){
            render the coordinates of current location.
            }  
        }     
    }

Example: Now, edit the app.js file and copy/paste the below code into it.

In this file, we will import the react-geolocated package and print the coordinates of the current location. We will bind the App component with the reducer function geolocated(). The geolocated Reducer function assigns the props to the app component when it will be rendered.

Filename: App.js

Javascript




import React, { Component } from "react";
 
// Importing geolocated reducer function
import { geolocated } from "react-geolocated";
 
class App extends Component {
  render() {
 
    // Check geolocation supported in
    // browser or not
    return this.props.isGeolocationAvailable ? (
 
      // Check location is enable in
      // browser or not
      this.props.isGeolocationEnabled ? (
 
        // Check coordinates of current
        // location is available or not
        this.props.coords ? (
          <div>
            <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
            <h3 style={{ color: "red" }}>
              Current latitude and longitude of the user is
            </h3>
            <ul>
              <li>latitude - {this.props.coords.latitude}</li>
              <li>longitude - {this.props.coords.longitude}</li>
            </ul>
          </div>
        ) : (
          <h1>Getting the location data</h1>
        )
      ) : (
        <h1>Please enable location on your browser</h1>
      )
    ) : (
      <h1>Please, update your or change the browser </h1>
    );
  }
}
 
// Binding geolocated() reducer function to
// App component, while exporting it
export default geolocated()(App);


Step to run: To run the project, enter the below command to your terminal in the project directory.

npm start

Output:

Supported browsers: Only below browser with the specific version supports the react-geolocated.

  • Chrome ≥ 5
  • Firefox ≥ 3.5
  • Internet Explorer ≥ 9
  • Opera ≥ 10.60
  • Safari ≥ 5

Reference: https://www.npmjs.com/package/react-geolocated


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!