CODEWITHSUNDEEP
javascriptgeolocationpromise
kael
kael

Reputation: 325

JS - Promise + geolocation.watchPosition

I'm trying to use JavaScript Promise with geolocation, but can't get to make it work correctly with geolocation.watchPosition, the then clause being called only once :

function Geolocation() {
  this._options = {
    enableHighAccuracy: true, 
    maximumAge        : 10000, 
    timeout           : 7000
  }
}

Geolocation.prototype = {
  get watchID() { return this._watchID; },
  set watchID(watchID) { this._watchID = watchID; },
  get options() { return this._options; },
  // hasCapability: function() { return "geolocation" in navigator; },
  _promise: function(promise) {
    var geolocation = this;
    if (promise == "getPosition")
      return new Promise(function(ok, err) {
        navigator.geolocation.getCurrentPosition(
          ok.bind(geolocation), err.bind(geolocation),
          geolocation.options
        );
      });
    else if (promise == "watchPosition")
      return new Promise(function(ok, err) {
        geolocation.watchID = navigator.geolocation.watchPosition(
          ok.bind(geolocation), err.bind(geolocation),
          geolocation.options
        );
      });
  },
  getPosition: function() { return this._promise('getPosition'); },
  watchPosition: function() {
    this.clearWatch();
    return this._promise('watchPosition');
  },
  clearWatch: function() {
    if (!this.watchID) return;
    navigator.geolocation.clearWatch(this.watchID);
    this.watchID = null;
  }
};

var geolocation = new Geolocation();
geolocation.watchPosition()
  .then(
    function(position) {
      console.log("latitude: " + position.coords.latitude + " - longitude: " + position.coords.longitude)
    },
    function(error) {
      console.log("error: " + error);
    }
  )

I tried with an intermediary promise returned from watchPosition/0, but it returns the same result.

What am I missing ?

Upvotes: 0

Views: 1946

Answers (2)

Andres Separ
Andres Separ

Reputation: 3394

I found this amazing post by Zach Leatherman

function getCurrentPositionDeferred(options) {
  var deferred = $.Deferred();
  navigator.geolocation.getCurrentPosition(deferred.resolve, deferred.reject, options);
  return deferred.promise();
};

This allows us to do things like:

getCurrentPositionDeferred({
  enableHighAccuracy: true
}).done(function() {
  // success
}).fail(function() {
  // failure
}).always(function() {
  // executes no matter what happens.
  // I've used this to hide loading messages.
});
// You can add an arbitrary number of
// callbacks using done, fail, or always.

To coordinate between multiple Deferred objects, use $.when:

$.when(getCurrentPositionDeferred(), $.ajax("/someUrl")).done(function() {
  // both the ajax call and the geolocation call have finished successfully.
});

Source: http://www.zachleat.com/web/deferred-geolocation/

Upvotes: 1

kael
kael

Reputation: 325

Answering to myself.

Following @Benjamin Gruenbaum advice on using a callback, it's possible to combine a single callback handling both geolocation.watchPosition responses with a Promise, and then to use the then().catch() pattern (below in the notify function) :

function Geolocation() {
  this._options = {
    enableHighAccuracy: true, 
    maximumAge        : 10000,
    timeout           : 7000
  }
};

Geolocation.prototype = {
  get watchID() { return this._watchID; },
  set watchID(watchID) { this._watchID = watchID; },
  get options() { return this._options; },
  // hasCapability: function() { return "geolocation" in navigator; },
  _promise: function(promise, cb) {
    var geolocation = this;
    return new Promise(function(ok, err) {
      if (promise == "getPosition")
        navigator.geolocation.getCurrentPosition(cb, cb,
          geolocation.options
        );
      else if (promise == "watchPosition")
        geolocation.watchID = navigator.geolocation.watchPosition(
          cb, cb, geolocation.options
        );
    });
  },
  getPosition: function(cb) { return this._promise("getPosition", cb); },
  watchPosition: function(cb) {
    this.clearWatch();
    return this._promise("watchPosition", cb);
  },
  clearWatch: function() {
    if (!this.watchID) return;
    navigator.geolocation.clearWatch(this.watchID);
    this.watchID = null;
  }
};

/* Testing functions from another module */
function log(Data) { console.log(Date() + " " + Data); };
function logOk({coords: {latitude: latitude, longitude: longitude}}) {
  log("latitude: " + latitude + " - longitude: " + longitude);
};
function logError({code: code, message: message}) {
  log("error geo " + code + " - " + message);
};

/* Callback from another module */
function notify(event) {
  return new Promise(
      function(ok, err) { event.coords ? ok(event) : err(event); }
    ).then(logOk).catch(logError);
};

/**/
var geolocation = new Geolocation();
// geolocation.getPosition(notify);
geolocation.watchPosition(notify);

Not sure if I use Promise correctly, but it works and allows to take advantage of chaining.

Upvotes: 1

Related Questions