Question

I’m trying to setup a button on a map that allows a user to zoom to his location. I’m using the Leaflet mapping lib (leaflet.cloudmade.com).

The locate() method works great, but I want to make sure the user actually shared his location because I want to have the button change if the browser returns a location. Here’s the code that I’ve been trying to use:

function locateUser() {
    try {
        this.map.locate({setView: true});
    } catch(err) {
        alert("Couldn't find your location.");
        return false;
    }
    return true;
}

$("document").ready(function() {
    var map = null;
    initmap(); // This is the function that displays the map.

    // Here is where I need to check whether the user was located.
    // If he is located I want to switch the button to one that will
    // reset the view.
    var is_located = 0;
    $("#myLocation").click(function() {
        if (is_located == 0) {
            if (locateUser()){
                is_located = 1;
                $(this).attr('value', 'WILMINGTON');
            };
        } else if (is_located == 1) {
            $(this).attr('value', 'MY LOCATION');
            is_located = 0;
        };
    });
});

The leaflet documentation says the locate() method returns either a locationfound event or a locationerror event, but when I try to log what locate() returns, I just get an object and it isn’t clear to me whether it found the user’s location.

Answer 1

Leaflet’s locate() method will only return the Map object and not the state of the geolocation call. Leaflet will however fire one of two events after attempting geolocation:

• locationfound
• locationerror

I have uploaded an example using these events at: http://jsfiddle.net/XwbsU/5/

You can see I have registered to each of these events to determine whether the geolocation call was successful or not.

Hope that helps.