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 Weather 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 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 functionimport { 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 itexport 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 the 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
