Adding Geo info to Ionic 2 form


#1

I am doing some testing and with the following code I can submit my data to a server and receive a response with text inputs into the form fields. When I click my Get Location button I get lats and longs as variables. In jQuery I was able to use “document.getElementByName(“lat”).value = position.coords.latitude;” to insert this data into the Latitude form field. What would be the Ionic 2 way of inserting the results of this function into this form field

<ion-list>
   <ion-item>
      <ion-input type="text" name="lat" placeholder="Latitude" [(ngModel)]="data.lat"></ion-input>
   </ion-item>

   <ion-item>
     <ion-input type="text" name="lng" placeholder="Longitude" [(ngModel)]="data.lng"></ion-input>
  </ion-item>

  <ion-item>
     <ion-input type="text" name="message" placeholder="message" [(ngModel)]="data.message"></ion-input>
  </ion-item>

  <button (click)="getLocation()" class="button button-full button-calm">Get Location</button>

  <button block (click)="submit()">Submit to server</button>  
</ion-list>


export class FormstuffPage {
  constructor(@Inject(Http) http: Http) {
    this.data = {};
    this.data.message = '';
    this.data.lat = '';
    this.data.lng = '';
    this.data.response = '';
    this.http = http;
  }

  submit() {
      let link = 'http://api.php';
      let data = JSON.stringify({message: this.data.message, lat: this.data.lat, lng: this.data.lng});
      this.http.post(link, data)
      .subscribe(data => {
        this.data.response = data._body;
      }, error => {
          console.log("error");
      });
    }

  getLocation() {
    let options = {timeout: 2000, enableHighAccuracy: false};
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(geoLatlng, geoErrors, options);
    } else {
        console.log "conection error"
    }
  }

  function geoLatlng(position) {
      let latitude = position.coords.latitude;
      let longitude = position.coords.longitude;
      console.log ('cordinates'latitude,longitude);
  }

  function geoErrors(error) {
  }
}

#2

I ended up using ionic-native and this got the job done. Josh Morony’s tutorial got me on the right track http://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/

html

<ion-navbar *navbar>
<ion-title>Time Event</ion-title>
</ion-navbar>

<ion-content padding class="time-event">
    <ion-list>
        <ion-item>
            <ion-input type="text" name="lat" [(ngModel)]="data.lat"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" name="lng" [(ngModel)]="data.lng"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="textarea" name="message" placeholder="Type message here..." [(ngModel)]="data.message"></ion-input>
        </ion-item>
        <ion-item>
            <ion-input type="text" name="username" placeholder="Name here..." [(ngModel)]="data.username"></ion-input>
        </ion-item>
        <button block (click)="submit()">Submit to server</button>
    </ion-list>

    <ion-card>
        <ion-card-header>
            Response
        </ion-card-header>

        <ion-card-content>
            <b>{{data.response}}</b>
        </ion-card-content>
    </ion-card>
</ion-content>

ts

import {Page, Platform} from 'ionic-angular';
import {Geolocation} from 'ionic-native';
import {Inject} from 'angular2/core';
import {Http} from 'angular2/http';ß
import 'rxjs/add/operator/map';

@Page({
    templateUrl: 'build/pages/time-event/time-event.html',
})

export class Time {
    constructor(@Inject(Http) http: Http, platform: Platform) {
        this.data = {};
        this.data.username = '';
        this.data.message = '';
        this.data.response = '';
        this.http = http;
        platform.ready().then(() => {
            Geolocation.getCurrentPosition().then((resp) => {
                let lat = resp.coords.latitude;
                let lng = resp.coords.longitude;
                this.data.lat= lat;
                this.data.lng = lng;
            });
        });
    }

    submit() {
        let link = 'http://api.php';
        let data = JSON.stringify({username: this.data.username, message: this.data.message, lat: this.data.lat, lng: this.data.lng});
        this.http.post(link, data)
        .subscribe(data => {
            this.data.response = data._body;
        },
            error => {
                console.log("error");
            });
    }
}