Show Device GPS Position

Using HTML 5's geolocation API, this example will demonstrate how display a user's position on a micello map.

HTML 5 Geolocation:

HTML 5 comes with a built-in and widely supported geolocation API capable of returning location information to users of mobile devices and even (less acurately) to desktop computers.

A good overview of the Geolocaion API is available at the W3 Schools HTML5 Geolocation page and is recommended reading for this example which will not get in depth on the subject.

More information on the navigator.geolocation.watchPosition() method can be found here.

Getting a Location:

Getting position coordinates is relatively simple and the basic process is carried out like this:

function getLocation () {
    if (navigator.geolocation) { // check geolocation support
        navigator.geolocation.getCurrentPosition(function (position) {  
            show_gps_position(position); // send the position to be marked
    } else { // geolocation is not supported
        alert("No geolocation support!");

First, the navigator.geolocation object is checked to ensure support of geolocation in the user's browser. On line three the method getCurrentPosition() is used and the resulting object position is passed into a callback function. The position object has a sub object called coords which contains the latitude and longitude along with other positioning information.

In the next section this information will be used to add a marker to the map!

Adding a marker from GPS data:

A more thorough example of placing markers can be seen in the Marker Overlay example.

The function specified as callback above in getCurrentPosition() should look something like this:

function show_gps_position (position) {
    var thisLevel = mapDataObject.getCurrentLevel(); // get current level
    var gps_dot = {"src": "blue_dot.png", "ox":10, "oy":10}; // define image
    // use latLonToMxy to convert lat/lon into Micello coordinates
    var map_coords = mapDataObject.latLonToMxy(position.coords.latitude, position.coords.longitude);
    var gpsMarker = {
        "mx": map_coords[0],
        "my": map_coords[1],
        "mt": micello.maps.markertype.IMAGE,
        "mr": gps_dot, // the object defining the blue dot image
        "anm": "my_location", // part of the group 'tweets'
        "idat": "<div>"+position.coords.latitude+", "+position.coords.longitude+"</div>"
    mapDataObject.addMarkerOverlay(gpsMarker); // using a global mapDataObject

The most important thing to note in this function is line 5, where position.coords.latitude and position.coords.longitude are converted into Micello mx and my values using latLonToMxy(). Those values are then used on lines 7 and 8 to specify the mx and my values for the marker.