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)
2. Switch to PAGE DESIGN and open PAGE CUSTOM JS
3. Add your page data as follows
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
//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