Track GPS location with PWA?

Ask the community
1

I’m needing the tracking function of a users device; if I use the PWA normally I can but I need to see if this is natively supported in Softr.

2

Hey, we currently do not have such a function in our app :slightly_frowning_face: Instead, if you can build it in any other app and embed it, then you can use the embedded codes in our Custom Code block.

1 Like
3

Hi @EosFleet.com and welcome to the community!

Here’s some custom code that will get the user’s current geolocation and display it in a JavaScript alert popup, assuming they answer “yes” to the permission prompt. I tested it on Mac/Chrome and iOS/Safari. The code is shamelessly cribbed from this answer on Stack Overflow.

<script>
if ( navigator.permissions && navigator.permissions.query) {
  //try permissions APIs first
  navigator.permissions.query({ name: 'geolocation' }).then(function(result) {
      // Will return ['granted', 'prompt', 'denied']
      const permission = result.state;
      if ( permission === 'granted' || permission === 'prompt' ) {
          _onGetCurrentLocation();
      }
  });
} else if (navigator.geolocation) {
  //then Navigation APIs
  _onGetCurrentLocation();
}

function _onGetCurrentLocation () {
    const options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
    };
    navigator.geolocation.getCurrentPosition( function (position) {
        //use coordinates
        const marker = { 
          lat: position.coords.latitude, 
          lng: position.coords.longitude 
        };
        alert(`Lat: ${marker.lat} lng: ${marker.lng}`);
    }, function (error) {
      //error handler here
    }, options)
}
</script>

Just out of curiosity, when you were imagining this feature being natively supported in Softr, how were you picturing it would work?

2 Likes
4

Thanks for sharing this custom code with us @dcoletta :slight_smile:

1 Like
5

Thank you! By chance, do you have a step by step in softr?

I imagine that there would be the following fields and fif you would like I would be happy to do a Figma mockup?

-User Restrictions
-ask which field and status triggers this
-asks if the trigger is based on a field or if on a button click
-asks which field stops the tracking and what status does this
-This would pass back a url to track in other apps

6

We need to be able to track users’ GPS coordinates, as our use case is a transportation app with drivers. If we have their location, it would be a very powerful feature for us. However, actively asking them for their location wouldn’t work, we are trying to find a native-like solution where the user grant location permission so we can track it all the time in the background

7

@dcoletta thanks for the script. I think it is useful, just one question, How can coordinates pass to an Airtable base to have organized the info?. I think that it could be nice to get notes related with places… as it can be done in Google Keep

8

If I were going to try to do that, I would revise the script so that it can auto-populate an input field of a form that the user can then submit.

9

Had a similar use case (upload image & overlay current weather) but found the lat/lon gets reset on each form field interaction even if using hidden fields. This solution makes use of the form-block map hidden field to url parm by setting the url parms to lat/lon.

<script>
window.addEventListener('load', function() {
        navigator.geolocation.getCurrentPosition(setMapPosition);
});

function setMapPosition(position) {
    const pos = {
        lat: position.coords.latitude.toFixed(4),
        lon: position.coords.longitude.toFixed(4),
    };

    updateQueryParams(pos.lat, pos.lon);
}

function updateQueryParams(lat, lon) {
    const url = new URL(window.location);
    url.searchParams.set('lat', lat);
    url.searchParams.set('lon', lon);
    window.history.replaceState(null, null, url);
}
</script>