Current Courier Locations
In this example we'll learn how to put the current locations of eCourier couriers on a google map, like this:As this is a browser-based example you can just go ahead and view source and hack the code. This example assumes basic knowledge of HTML, CSS and JavaScript. We'll describe it now:
var mapstraction = new Mapstraction('mapstraction','google');
var myPoint = new LatLonPoint(51.5,-0.1);
mapstraction.setCenterAndZoom(myPoint, 10);
mapstraction.addSmallControls();
This creates a new mapstraction object and centers it roughly on london at zoom level 10. Mapstraction allows you to change mapping API easily - in this instance we choose google. We also add some small panning and zooming controls.
handle = function() {
for(var i = 0; i<couriers.length; i++) {
courier = couriers[i];
var myPoint = new LatLonPoint(courier.lat, courier.lng);
var marker = new Marker(myPoint);
marker.setInfoBubble("vehicle: " + courier.type + ' ' + courier.id);
mapstraction.addMarker(marker);
}
}
Next, we create a handler function which is called when the API returns. This iterates through a 'couriers' object to plot the positions on a map.
var script_tag = document.createElement( 'script' );
script_tag.setAttribute( 'type', 'text/javascript' );
script_tag.setAttribute( 'src',
'http://api.ecourier.co.uk/jsapi/0.1/API_KEY_HERE/courier/current' );
var head = document.getElementsByTagName('head').item(0);
head.appendChild(script_tag);
Due to security concerns, javascript cannot call arbitrary URLs for data. Thus the eCourier API returns valid javascript which sets a 'couriers' object as an array of courier objects. These have properties such as heading, lat, lng and so on which are set in JSON. The last command in this generated javascript calls our 'handle' function.