Lecture Presentation


  • Geolocation in general
  • Geolocation API in JavaScript


  • A position on earth
  • Latitude
    • Horizontal lines on the globe
    • Position relative to the equator
    • Positive for north. Negative for south.
  • Longitude
    • Vertical lines on the globe
    • Position relative to the Meridian that passes through Greenwich, London
    • Positive for east. Negative for west.


  • Unit
    • Single number like 57.7787
    • Or in degrees+minutes like 57°46.722' N
    • Or in degrees+minutes+seconds like 57°46'43" N
  • Distance between two locations
    • Not as simple as using pythagoras theorem since the earth is not flat
    • Haversine formula
    • Databases capable of such calculations are called spatial
  • Direction from one location to another
    • Also called bearing
    • Specified in 0-360 degrees where 0 is north, 90 is east, 180 south and 270 west

Determine geolocation on a mobile device

  • IP to country database
    • All IPs are registered to a company, located in a known country. Does not always tell the whole truth. IP to country databases are freely available on the net.
  • WiFi triangulation
    • WiFi routers broadcast their names and a unique ID. By driving around and collecting all those identifiers and the current position, a database is built. Detecting strength/proximity to those identifiers gives a good accuracy inside of cities with many WiFi routers. Not freely available.
  • Mobile network triangulation (3G)
    • Information provided by the phone company (carrier) by also measuring the strength/proximity to mobile network antennas, and knowing where those antennas are located.
  • GPS - Global Position System
    • Satellite signals that can be received by a GPS receiver in a mobile device. Usually the best accuracy, but also most demanding on battery.

Geolocation API

  • Available in all modern browsers
  • Always requires consent from the user before delivering the position to a web application
  • No specific control over what method is used
    • Can specify "high" accuracy, but not defined exactly what that would mean.
  • Determine current location as a one time measurement
  • Determine location as a continuous movement
    • Not that reliable in web browsers since any continuous events about location might stop when the user uses other applications (like gets an incoming call)

Use the Geolocation API

  • Call navigator.geolocation.getCurrentPosition
    • Always asynchronous, meaning function will return immediately and you provide a function that the API will call once the location has been determined.
  • Specify a function to call on success
  • Specify a function to call on error
  • Specify other settings for making the determination

Use the Geolocation API

  • Example
    navigator.geolocation.getCurrentPosition(whenPosition, whenError, 
      { timeout: 20000 });
    function whenPosition(result) {
      alert(result.coords.latitude + " " + result.coords.longitude);
    function whenError(error) {

Optional setting

  • Third argument to getCurrentPosition
    • Defined as an object with properties
  • timeout
    • The maximum amount of time to wait for a location in milliseconds
  • maximumAge
    • The maximum amount of time since a previously retrieved and cached location can be used to report a position. Can be set to Infinity to always use any cached location.
  • enableHighAccuracy
    • Set to true to enforce using better accuracy. Usually means that we'd like to wait for a GPS position and whatever that might mean with regards to battery use. The final choice of what to do is still up to the specific browser.

Position information

  • Object sent to callback as single argument
  • result.coords.latitude
  • result.coords.longitude
  • result.coords.accuracy
    • The supposed accuracy of the position specified in meters
  • result.coords.altitude
    • The altitude in meters above sea level for this position, or null if the browser can't determine this
  • result.coords.heading
    • The direction/heading in which the browser has detected movement (0-360), or null if it is unknown (or no movement detected)
  • result.coords.speed
    • The speed at which the browser has detected movement, in meters per second, or null if it is unknown (or no movement detected)
  • result.timestamp
    • The time at which the location was determined, in milliseconds from 1970-01-01.

Type of error

  • Object sent to error callback as single argument
  • Compare error.code to predefined constants in the error object
    • The user declined permissions to report the location
    • The position of the device could not be determined
  • error.TIMEOUT
    • The length of time specified to getCurrentPosition has elapsed before a location could be determined

Continuous geolocations

  • When tracking movement
  • Calls function as soon as position changes
    • Exactly how often is up to the browser and of course dependant on the detected changes in location.
  • Call navigator.geolocation.watchPosition
    • Same arguments as getCurrentPosition
  • Store returned value from watchPosition
    • Identifier that can be used to stop the tracking
  • Call navigator.geolocation.clearWatch
    • To stop the tracking. No more callbacks will be made to the functions in the watchPosition call.

Continuous geolocations

  • If an error occurs, you have to call watchPosition again
    • For instance, if the user turns off GPS. That would lead to the error function being called and then you'd need to call watchPosition again (and again) if you want to resume tracking once GPS is turned on again. Can lead to quite complex code.

Google Maps

  • Use a Google search to show location for a place
    • Just search for the word "coordinates" and the place/city/town.
  • Use Google Maps to show a location
    • Enable "LatLng Tooltip" under "Maps labs" in lower left corner of http://maps.google.com. Then hold down shift key while hovering over the map.
  • Show latitude and longitude on a map
  • Google Maps API
    • Embed a map from Google Maps in your own site. Place information in the map like markers, names of places and more. Not shown in course.