Javascript API

Geolocation

Get location of your visitor based on his IP

Woosmap Locator API provides an Object to get a visitor’s location. Depending on your integration and visitors browser’s settings it will be based on his IP address or HTML5. It uses a private endpoint API that cannot be used without including the Woosmap Locator Javascript API. In most of the cases you’ll get at least a location based on his IP address.

First create a LocationProvider object :

var locationProvider = new geolocationProvider();

With this you can already access IP geolocation :

locationProvider.get("location");

You’ll get :

{"lat": 43.6, "lng": 3.8833, "source": "ip"}

Get location of your visitor based on HTML5

Increase accuracy of the localisation by using the standard geolocation functionality of the web browsers. Access this information by creating a MVCObject.

var anMVCObject = new woosmap.utils.MVCObject();

And bind it to the Location provider like this

anMVCObject.bindTo('location', locationProvider);

Define a method that will automatically be called if the location is updated

anMVCObject.location_changed = function () {
    console.log(this.get('location'));
};

Now call askForlocation method on the locationProvider and pass it the navigator.geolocation object :

locationProvider.askForLocation(navigator.geolocation);

Whether your visitor accepts to be localized or not your MVC object is going to be notified by calling its location_changed method and using get('location') on your object will get you the best location available.

{"lat": 43.64654, "lng": 3.88331, "source": "html5"}

Get the nearest store from your visitor’s location

Most of the WoosmapLocator API’s objects are MVC like NearbyStoresSource. If you bind one of these with a location provider you can get the nearest store from your visitor like this

dataSource = new woosmap.DataSource();
//We pass the dataSource and the maximum number of assets that we want, which is one.
nearbyStoresSource = new woosmap.location.NearbyStoresSource(dataSource, 1);

nearbyStoresSource.bindTo("location", locationProvider);
locationProvider.askForLocation();

When you ask for the user’s location, the ‘stores’ property of your source will be updated to the nearest store available.

You can create an MVCObject to display the nearest assets information :

var template = '<b>{{name}}</b><br>{{address.zipcode}} {{address.city}}<br>{{contact.phone}}<br>{{distance}} km';
var storesInformationTemplateRenderer = new woosmap.TemplateRenderer(template);
var storesInformationDisplayer = new woosmap.utils.MVCObject();
storesInformationDisplayer.stores = null;
storesInformationDisplayer.stores_changed = function () {
var properties = this.get('stores')[0].properties;
    properties.distance = Math.round(properties.distance/1000);
    $('#store-info').html(storesInformationTemplateRenderer.render(properties));
};
storesInformationDisplayer.bindTo('stores', view);

Get visitor’s Postal Code using IP and HTML5 geolocation

The same goes for the user’s ZipCode information.

var zipCodeProvider = new woosmap.ZipCodeProvider();
zipCodeProvider.bindTo('location', locationProvider);

Here’s an example

...

var zipCodeWatcher = new woosmap.utils.MVCObject();
zipCodeWatcher.bindTo('zipcode', zipCodeProvider);
zipCodeWatcher.zipcode_changed = function () {
    $('#geoloc-zipcode-result').html(zipCodeProvider.getZipCode());
} ;

$("#geoloc-zipcode-ip").click(function () {
    $('#geoloc-zipcode-result').html(zipCodeProvider.getZipCode());
});

$("#geoloc-zipcode-optin").click(function () {
    locationProvider.askForLocation(navigator.geolocation);
});

Closest store from location using a given mode travel

The DistanceProvider computes travel distance and journey duration between user location and and nearby assets using a given mode of travel. If you want the closest store you’ll need to combine several tools provided to get this information.

First you need to get a list of the nearby assets using DataSource. Distance are computed with geodesic distance. The number of assets you’ll need to get depends on how close your assets are from one to another and the location to get distance from.

Then you need to ask the DistanceProvider to update the store’s distance with travelling distance. Get the updated list, the closest should be the first in line.

updateStoresDistanceWithGoogle method takes 3 parameters : the assets list to update, a callback on request completion, and finally an “order by” parameter which can have two values : duration or distance.

Here’s a full example :

The corresponding javascript :

var template = woosmap.$('#closest-store-template').html();
var locationProvider = new woosmap.location.LocationProvider();
var nearbyStoresSource = new woosmap.location.NearbyStoresSource(dataSource, 10);
var distanceProvider = new woosmap.location.DistanceProvider();
var closestStoreTemplateRenderer = new woosmap.TemplateRenderer(template);
var closestStoreDisplayer = new woosmap.utils.MVCObject();

closestStoreDisplayer.stores = null;
closestStoreDisplayer.stores_changed = function () {
    distanceProvider.updateStoresDistanceWithGoogle(this.get('stores'), function (updated_stores) {
        var $storesDiv = woosmap.$('#closest-store-info');
        var store_properties = updated_stores[0].properties;
        store_properties.distance = store_properties.distance / 1000;
        store_properties.duration = Math.round(store_properties.duration / 60);
        $storesDiv.html(closestStoreTemplateRenderer.render(store_properties));
        $storesDiv.show();
    }, 'duration');
};

closestStoreDisplayer.bindTo('stores', nearbyStoresSource);
nearbyStoresSource.bindTo('location', locationProvider);
distanceProvider.bindTo('location', locationProvider);
woosmap.$('#update-stores-distance').click(function () {
    locationProvider.askForLocation(navigator.geolocation);
});

The DistanceProvider can take an optional argument containing every options available for the Google Matrix Service like the travelMode or avoid Tolls and Highway (See : Distance Matrix Service )

var distanceProvider = new woosmap.location.DistanceProvider({
    travelMode: google.maps.TravelMode.WALKING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: true,
    avoidTolls: true
});

Compiled samples on jsFiddle

You can edit or play with this Sample on jsFiddle and download or fork the source code on GitHub.