Hide Table of Contents
HTML5 and Mobile

Geolocation

The HTML5 Geolocation API is used to get the geographical position of the device. It permits users to opt-in to sharing their location with websites.

  • Detect whether or not the navigator.geolocation object is available. The position object will return the coords.latitude, coords.longitude, and coords.accuracy. The position object may also return the coords.altitude, coords.altitudeAccuracy, coords.heading, coords.speed and timestamp.
    if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);
     navigator.geolocation.watchPosition(showLocation, locationError);
    }
    
  • The getCurrentPosition() method returns a location object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties mentioned above are returned if available. Once we have the coordinates we can zoom to the location using coords.latitude and coords.longitude.
    require([
      "esri/map", "esri/geometry/webMercatorUtils", "esri/geometry/Point", ...
    ], function(Map, webMercatorUtils, Point, ... ) {
      var map = new Map(...);
    
      function zoomToLocation(location) {
       var pt = webMercatorUtils.geographicToWebMercator(new Point(location.coords.longitude, location.coords.latitude));
       map.centerAndZoom(pt, 16);
      }
    
    });
    
  • After zooming in on the current position we can use the watchPosition() to return an updated position as the user moves. clearWatch() can be used to stop the watchPosition() method.
    function showLocation(location) {
     if (location.coords.accuracy <= 500) {
       // the reading is accurate, do something
     } else {
       // reading is not accurate enough, do something else
     }
    
  • The second parameter of the getCurrentPosition() and watchPosition() method is used to handle errors. It simply specifies a function to execute if obtaining the user's location fails.
    function locationError(error) {
     switch (error.code) {
       case error.PERMISSION_DENIED:
         alert("Location not provided");
         break;
       case error.POSITION_UNAVAILABLE:
         alert("Current location not available");
         break;
       case error.TIMEOUT:
         alert("Timeout");
         break;
       default:
         alert("unknown error");
         break;
     }
    }
    
    There are several possible error codes that can be returned if the user's location is not obtained.
    • 0: Unknown error - There was an unknown error
    • 1: Permission denied - The user did not allow Geolocation
    • 2: Position unavailable - It is not possible to get the current location
    • 3: Timeout - The operation timed out
Show Modal