Utilizing Location Data in Browser!

So, recently over at the Pagenodes project we recently decided that we wanted to add a geolocation node to the project that folks can use to relay their location to another site or use their browser(on mobile as well!) to send locations to various locations(Octoblu or IFTT). The advantages are pretty awesome. Imagine being able to share across multiple objects with just your browser instead of using a pre-installed native app.

In order to accomplish this we needed to access the geoLocation API. This API is great because it uses what almost every electronic device we have has.....a web browser! The support is pretty good tracking Chrome back to 5 and IE to 9+.

Digging through the docs a little bit you can see that the great support MDN has for the getCurrentPosition. I went ahead and threw a quick snippet together and threw it up on surge.sh:

var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0

function success(pos) {
  var crd = pos.coords;

  document.write('Your current position is:'+'<br/>');
  document.write('Latitude : ' + crd.latitude+'<br/>');
  document.write('Longitude: ' + crd.longitude+'<br/>');
  document.write('Speed: ' + crd.speed + '<br/>')
  document.write('Accuracy of more or less ' + crd.accuracy + ' meters.<br/>');
  document.write('Altitude ' + crd.altitude + '<br/>');

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);

navigator.geolocation.getCurrentPosition(success, error, options);

It's super simple to construct a simple app to give you your location. I tested this out while running in the rain hitting refresh on safari on my phone. Some things to note:

  • Web Browsers do not have access to altitude, I have not been able to try this out on a laptop with GPS; however, one without will not be able to.
  • Altitude and accuracy are GREATLY increased on a phone.
  • Using getCurrentLocation with a delay will greatly increase the accuracy.
  • watchPosition is great for allowing for tracking a location to a certain point.

Ultimately a big goal of what we do at pagenodes is to empower the browser as much as possible versus actually having to use hardcoded apps. Browsers are the ultimate language of the web. How do we make the most of our phones and browsers at the same time in the most seamless environment....by programming for browsers.

Ultimately geolocation returns an object with .coords within it where we can find our location. This location is returned to us in a lat/long format which can be easily placed into Google Maps API or any popular mapping format.

Geolocation is a great tool and in the future will probably be part of a greater ecosystem of Browser only apps that is device-agnostic.

Show Comments

Get the latest posts delivered right to your inbox.