Skip to main content
Version: 2.33.0

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:

    How to: Access User's Location
  2. In the app editor, navigate to the query panel at the bottom and create a RunJS query by selecting Run JavaScript Code as the datasource:

    How to: Access User's Location
  3. Utilize the following JavaScript code to employ the Geolocation API and retrieve the location:

    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.

    How to: Access User's Location
  6. 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.

    How to: Access User's Location
  7. 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:

    {{ {"lat": queries.runjs1.data[0], "lng": queries.runjs1.data[1]} }}
    How to: Access User's Location
  8. Once the Map component properties are updated, you'll see the location displayed on the map component.