Recommendation

HTML5 Location Sharing

How to recommend the right store and post contribution based on HTML5 Geolocation browser API

Post contribution based on HTML5 Geolocation (Around Me Button)

The Geolocation API of HTML5 helps in identifying the user’s location. There are many techniques used to identify the location of the user. A desktop browser generally uses WIFI or IP based positioning techniques whereas a mobile browser uses cell triangulation, GPS, A-GPS, WIFI based positioning techniques, etc. The Geolocation API will use one of these techniques to identify the user’s location. This features is one of our crowd sourced data to help building the Woosmap Recommendation Profile.

Take a little Coffee Break

Around Me Around Me!

loader

How to Implement the Feature

Get and Send HTML5 Position

A user is able to geolocate himself by clicking the button Around Me. We’ve described the javascript requirements for this feature through Contributing Use Case.

// Acquire a new position object.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
function successCallback(position) {
    //Contribute to Woosmap Profile
    woosmapRecommendation.sendUserHtml5Position({
        successCallback: function () {
            // finally, search the assets around your location
            searchWoosmapApiAroundLocation(position.coords.latitude, 
                                           position.coords.longitude);
        }
    })
}

Search Around the HTML5 Position

To search for assets around a geographic position, we recommend you to use the searchStores(SearchStoresOptions) method of recommendation.js (see SearchStoresOptions API Reference) for details. The best way to call it is on successCallback of sendUserHtml5Position(). Here is a basic implementation.

function searchWoosmapApiAroundLocation(lat, lng) {
    woosmapRecommendation.searchStores({
        successCallback: updateStore,
        errorCallback: function () {
            document.getElementById('recommendation-placeholder').innerHTML = 'Unable to retrieve Stores near {' + lat + ':' + lng + '}';
        },
        page: 1,
        storesByPage: 3,
        lat: lat,
        lng: lng,
        maxDistance: 100000
    });
}