Slide 12.8: HTML5 Geolocation

Slide 12.7: HTML5
Slide 12.9: HTML5 Geolocation API
Home Print version

HTML5 Geolocation

Geolocation is a feature of the HTML5 specification and API (Application Programming Interface). Geolocation can pinpoint the user’s location anywhere in the world. Since this can compromise user privacy, the position is not available unless the user approves it. Geolocation adds location based features that are ECMAScript compliant (Javascript).

Geolocation uses the Location Information Server (LIS) to locate and track information on a user which was set up by the National Emergency Number Association. Other sources of information may include GPS, if available, RFID, the device’s IP address, Wi-Fi identification.

The API operates on a “best-effort” but does not guarantee the exact location precision. The API for the Geolocation determines your location and returns the latitude and longitude of your position if you allow it.

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation. However, Geolocation is much more accurate for devices with GPS, like iPhone.


Internet Explorer 9+	Firefox 3.5+	Chrome 5+	Opera 10.6+

Safari 5+	iPhone 3+	Android 2+	Windows Phone 7.5+

Demonstration
The following demonstration shows how the HTML5 script is displayed on the Web.


<!DOCTYPE html> <html> <head><title>HTML Working Area</title></head> <body> <div style="text-align:center"> <button onclick="playPause( )">Play/Pause</button> <button onclick="makeBig( )">Big</button> <button onclick="makeSmall( )">Small</button> <button onclick="makeNormal( )">Normal</button> <br /><br /> <video id="video1" width="420"> <source src="http://undcemcs01.und.edu/~wen.chen.hu/course/457/12/video/movie.mp4" type="video/mp4"> <source src="http://undcemcs01.und.edu/~wen.chen.hu/course/457/12/video/movie.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <script language="javascript"> var myVideo = document.getElementById( "video1" ); function playPause( ) { if ( myVideo.paused ) myVideo.play( ); else myVideo.pause( ); } function makeBig( ) { myVideo.width = 560; } function makeSmall( ) { myVideo.width = 320; } function makeNormal( ) { myVideo.width = 420; } </script> </body> </html>

◀
Previous

Slide 12.7: HTML5
Slide 12.9: HTML5 Geolocation API
Home Print version

▶
Next

I went on a once in a lifetime holiday.
Never again.