Book Image

Learning Node.js for Mobile Application Development

Book Image

Learning Node.js for Mobile Application Development

Overview of this book

Table of Contents (21 chapters)
Learning Node.js for Mobile Application Development
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
14
Creating an E-Commerce Application Using the Ionic Framework
Index

Adding geolocation via GPS


Now that we have an even better working map view, let's go ahead and add some basic navigation features to it, namely, the ability to focus the map on our current physical location.

First, let's add a button to the footer toolbar for now. Make sure that the ion-footer-bar tag looks like the following:

<ion-footer-bar class="bar-stable">
  <a ng-click="centerOnUser()" class="button button-icon icon ion-navigate"></a>
</ion-footer-bar>

Your preview should now look like this:

Now, we need to hook into the location capabilities of the native device in order to find the user's current location. Fortunately, this can be done directly through the HTML5 geolocation interface. To see it in action, let's add the following to the controller.js file inside the MapCtrl controller:

$scope.centerOnUser = function () {
  console.log("Centering on user");
  if (!$scope.map) {
    return;
  }

  navigator.geolocation.getCurrentPosition(function (pos) {
    console...