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.
- 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 :
- 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:
- 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:
|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.|
|Elevation||10 meters||4th floor|
|Heading||234 degrees||Total city center|
This is a short intro of “GEOLOCATION”. We will try and learn it more practically in next session.