mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
72fa067550
* Updated the formatting of how to docs for the next and current versions * Used the title cases in the heading * Updated the formatting of how to docs for the next and current versions * Used the title cases in the heading * updated the formatting of inspector, form, cell colors * resolved conflicts * Updated the formatting of bulk update multiple rows, conditionaly format table, delete multiple rows, serverside pagination * Updated access user groups, import external lib in js and python, use axios * fix: border colour, blur * Revert changes to versions.json * Changed the formatting of how to docs * add changes from docs/next to v2.34.0 * update: how to docs * fix: image name create-new-query * fix: image name import-successful.png * fix: image name flatten-js * fix: image name math-js-v2 * update: shorten page titles --------- Co-authored-by: Asjad Ahmed Khan <iitasjad2001@gmail.com> Co-authored-by: Karan Rathod <karan.altcampus@gmail.com>
65 lines
No EOL
4 KiB
Markdown
65 lines
No EOL
4 KiB
Markdown
---
|
|
id: access-users-location
|
|
title: Accessing User Location with RunJS Query
|
|
---
|
|
<div style={{paddingBottom:'24px'}}>
|
|
|
|
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.
|
|
:::
|
|
|
|
</div>
|
|
|
|
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**. |