HTML 5 TutorialsGEOLOCATION

GEOLOCATION

In this tutorial we are going to learn about a new concept, GEOLOCATION. We will have introduction to “Geolocation” and then try it practically. It is used to find out the position of a particular device.

Let’s have an introduction on it.

  • What is GEOLOCATION?
    • Geolocation is an HTML5 API that allows us to get the geographical location of a website user.
    • The user must approve before getting the users position. This usually happens via button and/or browser popup.
    • It may compromise with the privacy of user.
    • All of the latest versions of Chrome, Firefox, IE, Safari and Opera can use the geolocation feature of HTML5.
  • Some uses of GEOLOCATION
    • Geolocation can be used in transportation websites, travel agencies, etc.
    • Some of the great uses of geolocation are listed below:
      • Public transportation websites.
      • Taxi and other transportation websites.
      • Calculate shipping costs on an E-commerce site.
      • Travel agency websites.
      • Real estate websites.
      • Movie theater websites can find movies playing nearby.
      • Online gaming.
      • Local headlines and weather on their front page.
      • Job postings can automatically include commute times.
    • There are many such uses.
  • How Geolocation Works
    • Geolocation works by scanning common sources of location information.
    • These location sources are listed below:
      • Global Positioning System (GPS) – It gives more accurate information.
      • Network Signals – IP address, RFID, WiFi and Bluetooth MAC addresses.
      • GSM/CDMA cell IDs
      • User Input
  • Checking for Geolocation Support in Browsers
    • As we have already stated that all the new version browsers have a support for geolocation, but for those who still use old browsers can check if their browser supports geolocation by just a simple code.
    • The API offers a very handy function to detect for Geolocation support in browsers.
      if(navigator.geolocation)
      {
               //do dtuff
      }
    • You can also check for geolocation using the “Modernizr” script that we used in earlier sessions.
  • Method of geolocation : getCurrentPosition()
    • The getCurrentPosition API is the main method using geolocation.
    • It retrieves the current geographic location of the users device.
    • The location is expressed as a set of geographic coordinates together with information about heading and speed. It returns the longitude and longitude, accuracy properties etc.
    • The location information is returned in a position object.
    • The syntax of the getCurentPosition() method is :
      getCurrentPosition(showLocation, ErrorHandler, options);
    • Parameters of getCurrentPosition() method:
      getCurrentPosition() method contains 3 parameters of which one is mandatory and the other 2 are optional.
    • The parameters are as follows:
      • showLocation: It defines the callback method that retrieves location information. It is the handler method that gets called if position is obtained successfully. It is specified by success callback parameter. This is a mandatory parameter.
      • ErrorHandler: It defines the callback method that is invoked when an error occurs in processing the asynchronous call. That means, it invokes if any kind of error occurs or any positioning fails. It is an optional parameter.
      • options: It defines the set of options for retrieving the location information. It is an optional parameter.
    • We have studied above that getCurrentPosition() method returns some values.
    • Some of the values are listed below:
    coords.latitude The latitude as a decimal number.
    coords.longitude The longitude as a decimal number.
    coords.accuracy The accuracy of position.
    coords.altitude The altitude in meters above the mean sea level.
    coords.altitudeAccuracy The altitude accuracy of position.
    coords.heading The heading as degrees clockwise from North.
    coords.speed The speed in meters per second.
    timestamp The date/time of the response.
  • Presenting the location
    • Once we get the position of the device, the next step is to just present the location information.
    • This location information can be presented in two ways:
      1. Geodetic
      2. Civic
    • The geodetic way of describing position refers directly to latitude and longitude.
    • The civic representation of location data is a more human readable and understandable format.
    • Each attribute/parameter has both a geodetic representation and a civic representation.
    • Some of the attributes with their geodetic and civic representations are given below:
    Attribute Geodetic Civic
    Position 59.3, 18.6 Stockholm
    Elevation 10 meters 4th floor
    Heading 234 degrees Total city center
    Speed 5 km/h Walking
    Orientation 45 degrees North-East

This is a short intro of “GEOLOCATION”. We will try and learn it more practically in next session.

Previous articleSVG in HTML5 – Part 2
Next articleWEBSTORAGE

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -