mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-25 07:27:28 +00:00
fe086ac96c
* update whitelist IP address and add warning in workspace constants to avoid usage in the client * [docs] platform milestone 11 (#8847) * [docs]reset password * [docs]edit+archive flow * [docs]updated docs in v2.29 and v2.30 * [docs]github ssouserinfo * [docs] openid - id_token_encrypted * Change docker image build's slack message * [docs]archive/unarchive workspaces:superadmin (#8880) * mention that workspace constants will not work with workspace constants (#8887) * update release notes and project overview sidebar (#8884) * add rgba example for timeline doc (#8892) * update commands and solution for migration issues * minor grammar fix * [docs] revamped how-to guides (#8688) * [docs]revamped howto: serverside pagination * [docs]revamp howto: import ext. js libs * [docs]revamp howto:run actions from js query * [docs]revamp howto: intentionally fail js query * updated run query at specified * revamped how to: use to_py * [docs]updated how to access users location * updated howtos in v2.30 * Add new templates - batch 3 --------- Co-authored-by: Karan Rathod <karan.altcampus@gmail.com> Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com> Co-authored-by: Shubhendra Singh Chauhan <withshubh@gmail.com> Co-authored-by: Adish M <adish.madhu@gmail.com> Co-authored-by: Akshay <akshaysasidharan93@gmail.com>
62 lines
No EOL
4 KiB
Markdown
62 lines
No EOL
4 KiB
Markdown
---
|
|
id: access-users-location
|
|
title: Accessing User Location with RunJS Query (Geolocation API)
|
|
---
|
|
|
|
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:
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/access-location/newapp.png" alt="How to: Access User's Location" />
|
|
</div>
|
|
|
|
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:
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/access-location/runjsq.png" alt="How to: Access User's Location" />
|
|
</div>
|
|
|
|
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.
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/access-location/newprompt.png" alt="How to: Access User's Location" />
|
|
</div>
|
|
|
|
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.
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/access-location/newdata.png" alt="How to: Access User's Location" />
|
|
</div>
|
|
|
|
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]} }}
|
|
```
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
<img style={{ border:'0', marginBottom:'15px', borderRadius:'5px', boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.2)' }} className="screenshot-full" src="/img/how-to/access-location/newmap.png" alt="How to: Access User's Location" />
|
|
</div>
|
|
|
|
9. Once the Map component properties are updated, you'll see the location displayed on the **map component**. |