Guide: how to pass the user's latitude and longitude into a form

Guides & Help Docs
,
1

Hi all,

Some of you have apps where it is important to pass latitude and longitude into a form.

Typical apps needing this are those made for teams working outside.

The following guide will show you how to.

Passing the logged in user’s latitude and longitude is possible with a form but also with “update” action buttons and “add” action buttons.

Let’s dive in.

Important note 1: A “Longitude” text field and a “Latitude” text field must be created in your Airtable base before doing anything.
Important note 2: the user must enable to geolocation of their browser. This is mandatory.



1) Add the following script in your header custom code at page level.

<script>
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;

        const url = new URL(window.location.href);

        url.searchParams.set('latitude', lat);
        url.searchParams.set('longitude', lon);

        window.history.replaceState(null, '', url.toString());

    }, function(error) {
        console.error('Error obtaining location:', error);
    });
} else {
    console.error('Geolocation is not supported by this browser.');
}
</script>

This script will make sure that on page load the latitude and longitude will be displayed in the url of the page as url parameters.
Basically, each time a user is on the page the url of this page will look like this:

https://yourdomain.com/your-page?latitude=xx.xxxxxxx&longitude=xx.xxxxxxx

A) Passing the logged in user's latitude and longitude into a form or an Add action button.

Add a form in your page. Then add two hidden fields in this form. Then map them to your “Latitude” and “Longitude” fields in Airtable.
What values to add?
Click “Value” then click “URL Parameter”
For the Latitude hidden field just write latitude
For the Longitude hidden field just write longitude
Why? Because these are the exact url parameters made by the script above, on page load.

A more visual clue (click the image to expand):

Capture d’écran 2024-08-30 101638
Capture d’écran 2024-08-30 1016381730×711 77 KB

B) Passing the logged in user’s latitude and longitude into an update action button

Exactly the same process. You can add two hidden fields mapped to your Latitude and Longitude fields in Airtable.
What values to add?
Click “Value” then click “URL Parameter”
For the Latitude hidden field just write latitude
For the Longitude hidden field just write longitude

2) Educate your user to enable the geolocation of their browser
This is something important that cannot be forgotten.
Don’t hesitate to add an explanation in the form or in the action buttons modal with something like “Be sure you authorized your browser to locate you”.
If the users are part of your team, taking a moment to explain it during a video call or in person might be very useful.

Thanks

1 Like
2

Update

Display an alert message if the user’s location through the browser is not enabled

Just add this script in the header custom code, it will display a browser built-in alert message:

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const urlParams = new URLSearchParams(window.location.search);
        const hasLatitude = urlParams.has('latitude');
        const hasLongitude = urlParams.has('longitude');

        if (!hasLatitude || !hasLongitude) {
            alert("Be sure you enabled your browser to locate you. Then reload the page.");
        }
    }, 2000);
});
</script>

Basically, If after 2 seconds there are no longitude and latitude url parameters in the url of the page, the alert message will be displayed.

For a more customizable alert box you can use this script, still in the header custom code of the page:

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        const urlParams = new URLSearchParams(window.location.search);
        const hasLatitude = urlParams.has('latitude');
        const hasLongitude = urlParams.has('longitude');

        if (!hasLatitude || !hasLongitude) {
            const popup = document.createElement('div');
            popup.style.position = 'fixed';
            popup.style.top = '50%';
            popup.style.left = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.padding = '20px';
            popup.style.backgroundColor = 'white';
            popup.style.border = '1px solid blue';
            popup.style.borderRadius = '8px';
            popup.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.1)';
            popup.style.zIndex = '1000';
            popup.style.display = 'flex';
            popup.style.flexDirection = 'column';
            popup.style.alignItems = 'center';
            popup.style.justifyContent = 'center';

            const messageText = document.createElement('p');
            messageText.innerHTML = "Be sure you enabled your browser to locate you.<br>Then reload the page";
            messageText.style.fontSize = '18px';
            messageText.style.fontWeight = '600';
            messageText.style.margin = '0';
            messageText.style.textAlign = 'center';

            popup.appendChild(messageText);

            const closeButton = document.createElement('button');
            closeButton.innerHTML = '&times;';
            closeButton.style.position = 'absolute';
            closeButton.style.top = '1px';
            closeButton.style.right = '6px';
            closeButton.style.fontSize = '22px';
            closeButton.style.cursor = 'pointer';
            closeButton.style.backgroundColor = 'transparent';
            closeButton.style.border = 'none';
            closeButton.style.color = 'black';
            closeButton.style.paddingLeft = '12px';

            popup.appendChild(closeButton);

            document.body.appendChild(popup);

            closeButton.addEventListener('click', function() {
                document.body.removeChild(popup);
            });
        }
    }, 2000);
});
</script>
1 Like
3

Wow, thanks for sharing this @matthieu_chateau !! Will be super handy to have when needed!

1 Like