Capture browser GPS coordinates in AddPage

Capture GPS Coordinates while adding a new record in ADDPage

1. Add coordinate fields for gps latitude and longitude to your table, make sure your field type/size to be at least: lat=decimal(10,8) , long=decimal(11,8)

image

2. Switch to PAGE DESIGN and open PAGE CUSTOM JS

image

3. Add your page data as follows

image

code:

    location:null,
    gettingLocation: false,
    errorStr:null,

4. add method to get GPS location

async getLocation() {
      
      return new Promise((resolve, reject) => {

        if(!("geolocation" in navigator)) {
          reject(new Error('Geolocation is not available.'));
        }

        navigator.geolocation.getCurrentPosition(pos => {
          resolve(pos);
        }, err => {
          reject(err);
        });

      });
    },
    async locateMe() {

      this.gettingLocation = true;
      try {
        this.gettingLocation  = false;
        this.location         = await this.getLocation();
        this.formData.latitud = this.location.coords.latitude;
      } catch(e) {
        this.gettingLocation = false;
        this.errorStr = e.message;
      }
      
    },

5. Get gps position when page is loaded in browser

image

    //do we support geolocation
    if(!("geolocation" in navigator)) {
      this.errorStr = 'Geolocation is not available.';
      return;
    }
    this.gettingLocation = true;
    // get position
    navigator.geolocation.getCurrentPosition(pos => {
      this.gettingLocation   = false;
      this.location          = pos;
      this.formData.latitud  = pos.coords.latitude;
      this.formData.longitud = pos.coords.longitude;
    }, err => {
      this.gettingLocation = false;
      this.errorStr = err.message;
    })
  

6. Click OK, Drag a new CustomView Component to your page to Show results and place a button to retrieve gps coordinates when requested. In custom code:

<div id="app" v-cloak>

  <div v-if="errorStr">
      Ocurrió un error al leer gps: {{errorStr}}
  </div>
  
  <div v-if="gettingLocation">
      <i>obteniendo ubicación...</i>
  </div>
  
  <div v-if="location">
      Tu ubicación actual es {{ location.coords.latitude }}, {{ location.coords.longitude}}
  </div>
    <div id="btnleergps" class="text-center">
    <q-btn :rounded="false"  size=""  color="primary" no-caps  unelevated   @click="locateMe" >
          Volver a leer gps
    </q-btn> 
  </div>      
</div>

7. clic ok and publish… this works only on localhost and when going live you will need HTTPS on your site.

form fields populated when page loaded

customview and button to request gps
image

3 Likes