# Capture browser GPS coordinates in AddPage

**URL:** <https://forum.radsystems.io/t/capture-browser-gps-coordinates-in-addpage/840>\
**Category:** Sample Codes\
**Created:** [April 30, 2022, 5:28am UTC](https://forum.radsystems.io/t/capture-browser-gps-coordinates-in-addpage/840 "2022-04-30T05:28:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ribaraki](https://forum.radsystems.io/user_avatar/forum.radsystems.io/ribaraki/32/493_2.png) [@ribaraki](https://forum.radsystems.io/u/ribaraki)\
**Post date:** [April 30, 2022, 5:28am UTC](https://forum.radsystems.io/t/capture-browser-gps-coordinates-in-addpage/840/1 "2022-04-30T05:28:59Z")

</div>

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](https://forum.radsystems.io/uploads/default/original/1X/834213c35ee6f96fd8aca5342f49217af27e677f.png)

**2. Switch to PAGE DESIGN and open PAGE CUSTOM JS**

![image](https://forum.radsystems.io/uploads/default/original/1X/8ce9e54d3ecd76a51ca00ec8c7d249709f6f4e1b.png)

**3. Add your page data as follows**

![image](https://forum.radsystems.io/uploads/default/original/1X/3bbf575d49a1b7c5bdc73720fcaf765b3beab414.png)

code:

```auto
    location:null,
    gettingLocation: false,
    errorStr:null,

```

**4. add method to get GPS location**

 ![image](https://forum.radsystems.io/uploads/default/original/1X/cd566887c377438d75c1030f5770020d4dd67a73.png)

```auto
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](https://forum.radsystems.io/uploads/default/original/1X/1c9c87310b6a3720fb9acfe50ec85743bc0b9af3.png)

```auto
    //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:**

 ![image](https://forum.radsystems.io/uploads/default/original/1X/d5e1b9073a56f86448d6cd6bc9c738946e3709fb.png)

```auto
<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

 ![image](https://forum.radsystems.io/uploads/default/original/1X/0124f9378454a0f1058d70a58cb71cdbfbe3a6cb.png)

customview and button to request gps  
 ![image](https://forum.radsystems.io/uploads/default/original/1X/92454c933880644ec2ce5d0720c96afa526a46e3.png)

---

<div class="post-metadata">

**Author:** ![ddiaz](https://forum.radsystems.io/letter_avatar_proxy/v4/letter/d/ee59a6/32.png) [@ddiaz](https://forum.radsystems.io/u/ddiaz)\
**Post date:** [August 31, 2023, 8:12pm UTC](https://forum.radsystems.io/t/capture-browser-gps-coordinates-in-addpage/840/2 "2023-08-31T20:12:24Z")

</div>

Has anyone migrated this module to the new version 8?

---

<div class="post-metadata">

**Author:** ![brantpeter](https://forum.radsystems.io/letter_avatar_proxy/v4/letter/b/8491ac/32.png) [@brantpeter](https://forum.radsystems.io/u/brantpeter)\
**Post date:** [October 14, 2023, 6:05pm UTC](https://forum.radsystems.io/t/capture-browser-gps-coordinates-in-addpage/840/3 "2023-10-14T18:05:06Z")

</div>

To capture GPS coordinates when adding a new record in the ADDPage, add latitude and longitude fields to your table, implement JavaScript functions for obtaining the [location](https://www.whereami.place/), and display the coordinates with a button in a CustomView Component.