Wednesday, April 18, 2012

GeoLocation API HTML5

Finding the user location with HTML5 GeoLocation API is quite simple. I have been experimenting Geo api, just sharing what I learned. Follow the reference given below for more understanding.

Geolocation can be obtained from navigator object like navigator.geolocation.

First step check whether your browser supports geolocation. If not fall back to native javascript.

if(navigator.geolocation)
else alert("your browser doesn't support geolocation")

geolocation object has 3 methods

  • getCurrentPosition
  • watchPosition
  • clearWatch


getCurrentPosition & watchPosition looks similar and takes same arguments.

ex:

navigator.geolocation.getCurrentPosition(success, error, {map of geolocation options});

success = function(position) {
position.coords.latitude ;
position.coords.longitude  ;
position.coords.accuracy;
};

failure = function(error) {
// 3 types of error

1: 'Permission denied',
2: 'Position is not available',
3: 'Request timeout'

};

Failure return error code  of 1,2,3.


The third argument for both getCurrentPosition and watchPosition is the geolocation options which is optional.
 1) enableHightAccuracy - takes boolean true/false, enables the device to get more accurate latitude & longitude positions
2) timeout - time allowed for the device to get the data. keep it zero will let the browser to never timeout (in milliseconds). Setting to 2000 will wait for 2000 milliseconds before it quits with REQUEST TIME OUT error code 3.
3) maximumAge - lets the browser to use the cached data. if set to zero will always look up new position for each request.

I have made a small demo which is still in work in progress.

Reference:
Geolocation API Specification
HTML5 By Bruce Lawson and Remy Sharp

Friday, April 06, 2012

Boolean Attribute vs Boolean Value

If you are writing some thing using HTML5 then you need to understand their Boolean Attributes which is not same as what you think as true or false.Thanks to the Boolean father George Boole

Boolean attribute doesn't need any value set as true or false,  require=required.
Then how to use Boolean Attribute in your HTML ?
just add this attribute and do not assign any value. What .. Yes, its up to you if you want to assign you can.

Lets see the below example.
< input type=text name="user" disabled / >

You can use disabled=disabled or disabled=true.  Both has same meaning or just keep it simple and use "disabled" as I said the very existence of them makes meaning KISS principle

List of HTML5 Boolean Attributes