Track GPS location with PWA?

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.

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.

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

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

1 Like

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