Geolocation is the identification of the real-world geographic location of an object, such as a cell phone or an Internet-connected computer terminal. Geolocation may refer to the practice of assessing the location, or to the actual assessed location.
http://en.wikipedia.org/wiki/GeolocationDevelopers use many techniques to retrieve this information. Navigation tools being some of the top selling and most demanded applications available. The W3C Geolocation API makes finding our location through the web browser as simple as a line in javascript. We no longer require a dedicated and complex application for our positioning.
This article is going to focus on retrieving the latitude and longitude through Javascript. Then we'll update a web page with a map.
To begin with the following navigator object has the methods to return our position. Add this to an init or window.load function in your javascript.
navigator.geolocation.getCurrentPosition(someMapFunction, errorHandler, {timeout:x});
This returns a one time location. To keep the position updated, use:
window.onload = function() { navigator.geolocation.watchPosition(someMapFunction, errorHandler, {timeout:x});}
An aside here on the {timeout:}. The error handling seems to be worthless because the position keeps trying to happen. An error will never occur. Adding a timeout will stop the page and your error trap function will fire.
// essential error handling
function error(e)
{
alert(e.code + ": " + e.message);
}
function displayMap(location)
{
var lat = location.coords.latitude;
var lon = location.coords.longitude;
// for stress free implementation, just update an iFrame
var map = document.getElementById('mappy');
map.src = ... url to embedded map ...
}
When testing the positioning tools out on a desktop browser it has been a little hit-or-miss recently. There is a good deal of comments on the internets about this issue and the usual debate of "it's a bug" vs. "that's how it's supposed to work." For the purposes here then, lets assume you're building this for a mobile application.
I have added in a few essential tags to a simple HTML page for rendering on mobile device (my iPhone at the moment). <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> was added into the html head.
Then the only tag in the html body is an iFrame.
<iframe id="mappy" width="100%" height="100%" src="">... placeholder ...</iframe>
The embedded map can be pretty much any of the available maps, Google, Yahoo, MapQuest, etc. I chose to be less cliche and embed Open Street Map. The result is a very usable web based map application on a mobile device.
For the full source code in this article, either view source from the above link or download directly.
In the next article, we'll be using the geolocation data to update and track our position.
0 comments:
Post a Comment