What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

Geolocation

The Geolocation API lets authorized Web applications to access the location data provided by the device - obtained using either GPS or from the network environment. Apart from the one-off location query, it gives a way for the app to be notified about the location changes.

See Permissions for a way to check whether the user has granted or denied the permission to obtain the location by the origin.

API glimpse

navigator.geolocation.getCurrentPosition(callback)
Runs one-off query for location with coordinates, accuracy, altitude & speed, if available.
navigator.geolocation.watchPosition(callback)
Sets up observing for location changes, invoking callback for every change.

Live Demo

  • var target = document.getElementById('target');
    var watchId;
    
    function appendLocation(location, verb) {
      verb = verb || 'updated';
      var newLocation = document.createElement('p');
      newLocation.innerHTML = 'Location ' + verb + ': <a href="https://maps.google.com/maps?&z=15&q=' + location.coords.latitude + '+' + location.coords.longitude + '&ll=' + location.coords.latitude + '+' + location.coords.longitude + '" target="_blank" rel="noopener">' + location.coords.latitude + ', ' + location.coords.longitude + '</a>';
      target.appendChild(newLocation);
    }
    
    if ('geolocation' in navigator) {
      document.getElementById('askButton').addEventListener('click', function () {
        navigator.geolocation.getCurrentPosition(function (location) {
          appendLocation(location, 'fetched');
        });
        watchId = navigator.geolocation.watchPosition(appendLocation);
      });
    } else {
      target.innerText = 'Geolocation API not supported.';
    }
  • <button id="askButton">Ask for location</button>
    
    <div id="target"></div>

Resources

Get in touch