---
id: access-users-location
title: Accessing User Location with RunJS Query
---
In this step-by-step guide we will build a ToolJet application that harnesses the power of the **JavaScript Geolocation API** to retrieve the user's location. The Geolocation API offers access to various geographical data associated with a user's device, utilizing methods such as GPS, WIFI, IP Geolocation, and more.
:::info
To uphold user privacy, the Geolocation API requests permission before locating the device. Upon permission, you gain access to data like latitude, longitude, altitude, and speed.
:::
1. Begin by creating a new application:
2. In the app editor, navigate to the query panel at the bottom and create a **[RunJS query](/docs/data-sources/run-js/#runjs-query-examples)** by selecting **Run JavaScript Code** as the datasource:
3. Utilize the following JavaScript code to employ the Geolocation API and retrieve the location:
```js
function getCoordinates() { // Function to get coordinates
return new Promise(function (resolve, reject) { // Promise to get coordinates
navigator.geolocation.getCurrentPosition(resolve, reject); // Get current position
});
}
async function getAddress() { // Function to get address
const position = await getCoordinates(); // Await the coordinates
let latitude = position.coords.latitude; // Get latitude
let longitude = position.coords.longitude; // Get longitude
return [latitude, longitude]; // Return the coordinates
}
return await getAddress(); // Return the address
```
4. Scroll down the query editor and from **Settings** enable the `Run this query on application load?` option. This ensures that the JavaScript query runs each time the app is opened, providing the user's location.
5. Upon clicking **Run**, your browser prompts you to grant permission for the ToolJet app to access your location. Allow this permission to receive location data.
7. Once the query is succesfully run, the coordinates will be returned and displayed in the **Preview** section of query editor. To inspect the data returned by the query, go to the **Inspector** on the left sidebar, expand queries -> `runjs1` (query name), and then examine the **data**. You'll find the coordinates.
8. Utilize these coordinates in the **map component** to display the location. Add a map component to the canvas and edit its properties. In the **Initial location** property, enter:
```js
{{ {"lat": queries.runjs1.data[0], "lng": queries.runjs1.data[1]} }}
```
9. Once the Map component properties are updated, you'll see the location displayed on the **map component**. 
