| Table of Contents | Encapsulator Compatibility for this Article
|
Getting Developers Service beta
You can sign up for the Developer Services and get access to the APIs Here:
After joining, you will need to also generate an API key and an encrypted digest. Check out the Developer Guide article for more information: Developer Guide. The below examples will also explain how to use these credentials in your app.
The purpose of this article and examples is to show how to use the API's in a meaningful manner. We have attempted to make the API simpler to understand and have attempted to make it more accessible to developers of all experience levels. Developers are encouraged to copy the code below and integrate the API into their own app. The Developer Guides and API reference guide at the bottom have much more detailed explanations.
Supported OS and Languages
The Developer Services Beta supports HTML5, Javascript, XML. In the examples below, they use HTTP to make the API request and we use XML/JSON to recieve the return values.
Login
Login into Developer Services Beta and initializing map/api. All sessions begin with a login call . The login call passes a valid API Key and a valid digest to the service and receives a valid access token back. Each subsequent call in the session must include this access token.
API Key: A unique API Key (apikey parameter) is assigned to an application when that application is registered with Developer Services Beta. The API Key is a GUID that identifies the login call as coming from a known application.
Digest (tknL Parameter): The digest (tknL parameter) is a unique encrypted token created by the developer program portal based on a secret the developer provided.
Response format: The response format (alt parameter) can be “json” or “xml”, depending on the format you specify. XML is the default response if this parameter is not included.
The language parameters (language1 and language2) are optional. English is the default primary and secondary language if no languages are specified in the call. The languages assigned when the session is started are used as the base languages throughout the session. Languages cannot be changed during the session, but the Search POI Request call can override the base languages for one call occurence. See the table below for a list of supported languages.
The access token returned (tkns parameter in the responses) is an encrypted token that must be included in all subsequent calls during the session. The access token ensures that Developer Services Beta maintains the session across calls. Sessions are automatically terminated after an extended period of inactivity. The inactivity period at the time of publication is 80 minutes, although this may change.
Source Code
<!doctype html>
<html>
<head>
<title>ILWS Login - jquery sample</title>
<style type="text/css">
body { font-family:Verdana,Sans-Serif; font-size:10px; }
fieldset { width:500px; padding:10px; }
.holder { padding:5px 0px 5px 0px; }
#txttoken { width:490px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// on document load
$(function () {
$("#btnlogin").click(function () {
var intel_location = new ILWS_Location();
intel_location.Login();
});
$('#ajaxload').hide().ajaxStart(function () {
$(this).show();
})
.ajaxStop(function () {
$(this).hide();
});
});
// init
ILWS_Location = function () {
this.apikey = "a4e16940-20ae-4e94-9174-6ae8ede992eb";
this.apitoken = "2fc60abebb79b2e887a666b21fed59b618bd0c3176fe16d23de183dc251cfcf7";
this.type = "GET";
this.url = "https://int.api.intel.com/location/";
this.version = "v1";
this.successCB = null,
this.errorCB = null,
this.alt = "json"; // can be JSON/XML
}
// helper function for ajax request
ILWS_Location.prototype.doAJAX = function (successCB, errorCB) {
$.ajax({
url: this.url,
type: this.type,
dataType: this.alt,
crossDomain: true,
success: successCB,
error: errorCB,
cache: false,
dataFilter: function (data, type) {
if (type == "json") {
$("#txtresp").val(data);
}
else {
$("#txtresp").val(new XMLSerializer().serializeToString(data));
}
return data;
}
});
}
// login function
ILWS_Location.prototype.Login = function () {
this.alt = $("input[@name=alt]:checked").val();
this.url += "session/" + this.version + "?apikey=" + this.apikey +
"&tknl=" + this.apitoken + "&alt=" + this.alt;
this.type = "GET";
var successCB = this.LoginsuccessCB;
var errorCB = this.LoginerrorCB;
if (this.alt == "xml") {
successCB = this.LoginsuccessCBxml;
}
this.doAJAX(successCB, errorCB);
}
//login success callback for JSON
ILWS_Location.prototype.LoginsuccessCB = function (data, status) {
var successerrortxt = "Error UNKNOWN";
if (data.SessionResponse != undefined) {
successerrortxt = "Session: " + data.SessionResponse.body.tkns;
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#txttoken").val(successerrortxt);
}
//login success callback for XML
ILWS_Location.prototype.LoginsuccessCBxml = function (data, status) {
var successerrortxt = "Error UNKNOWN";
var xml = data.getElementsByTagNameNS("http://api.intel.com/location/xmlresponse/v1/apiroot", "body");
if (xml.length > 0 && xml[0].attributes.length > 0) {
if (xml[0].attributes[0].textContent == "SessionResponse" &&
xml[0].getElementsByTagName("tkns").length > 0) {
successerrortxt = "Session: " + xml[0].getElementsByTagName("tkns")
[0].textContent;
}
else if (xml[0].attributes[0].textContent == "ErrorResponse"
&& xml[0].getElementsByTagName("ErrorCode").length > 0
&& xml[0].getElementsByTagName("Message").length > 0) {
successerrortxt = "Error code: " + xml[0].getElementsByTagName("ErrorCode")[0].textContent
+ " Message: " + xml[0].getElementsByTagName("Message")[0]
.textContent;
}
}
$("#txttoken").val(successerrortxt);
}
// error callback
ILWS_Location.prototype.LoginerrorCB = function (xhr, options, error) {
alert(xhr.status + ": " + error);
}
</script>
</head>
<body>
<fieldset>
<div class="holder" style="text-align:right" id="ajaxload">
<img src="loader.gif" alt="ajaxload" />
</div>
<div class="holder">
<input type="text" id="txttoken" placeholder="Login token" />
</div>
<div class="holder">
<textarea id="txtresp" rows="10" cols="59">Response text</textarea>
</div>
<div class="holder">
<input type="radio" value="json" name="alt" checked="checked"/> JSON
<input type="radio" value="xml" name="alt" /> XML
</div>
<div class="holder">
<input type="button" id="btnlogin" value="Login!" />
</div>
</fieldset>
</body>
</html>
Country List Request
Getting a List of Supported countries: Getting a list of supported countries allows applications to enable/disable features based on whether or not the target country is supported, or is supported for a user. The sample code below returns a list of supported countries.
- Invocation: GET https://api.intel.com/location/countries/v1?tknS={tknS}&listmode=ALL_USER_COUNTRIES&alt=xml
- Request object: Pass in your session token, and the other parameters as above. ALL_USER_COUNTIRES is the default if this parameter is not included.
- Get the response object and display it.
Source Code
<!doctype html>
<html>
<head>
<title>Supported countries</title>
<style type="text/css">
body { font-family:Verdana,Sans-Serif; font-size:10px; }
fieldset { width:500px; padding:10px; }
.holder { padding:5px 0px 5px 5px; border-bottom: 1px dotted #ccc;}
#countries {height:600px;width:500px;border:2px dotted #ccc;border-radius:5px;overflow-y:scroll;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// on document load
$(function () {
$("#btncountries").click(function () {
var intel_location = new ILWS_Location();
intel_location.Getsupportedcountries();
});
$('#ajaxload').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () { $(this).hide(); });
});
// init
ILWS_Location = function () {
this.session = "Xfxf929rWdC3-dHeQXn4wFNQuTgZkfpYhigREWq1S3SW_avB-0u1HCJVuTRIR48nUJraL7d7A8C3
TDaDd73tPrj62xyW1ShslLsrwgEC3HQ1";
this.type = "GET";
this.url = "https://int.api.intel.com/location/";
this.version = "v1";
this.successCB = null,
this.errorCB = null,
this.alt = "json"; // can be JSON/XML
}
// helper function for ajax request
ILWS_Location.prototype.doAJAX = function (successCB, errorCB) {
$.ajax({
url: this.url,
type: this.type,
dataType: this.alt,
crossDomain: true,
success: successCB,
error: errorCB,
cache: false,
dataFilter: function (data, type) {
if (type == "json") {
$("#txtresp").val(data);
}
else {
$("#txtresp").val(new XMLSerializer().serializeToString(data));
}
return data;
}
});
}
ILWS_Location.prototype.Getsupportedcountries = function () {
this.url += "countries/" + this.version
+ "?tkns=" + this.session
+ "&listmode=" + "ALL_USER_COUNTRIES"
+ "&alt=" + this.alt;
this.doAJAX(this.GetsupportedcountriessuccessCB, this.GetsupportedcountrieserrorCB);
}
//success callback
ILWS_Location.prototype.GetsupportedcountriessuccessCB = function (data, status) {
var successerrortxt = "Error UNKNOWN";
if (data.GetCountriesResponse != undefined) {
var temp = "";
for (var i = 0; i < data.GetCountriesResponse.body.countries.length; i++) {
temp += "<div class=\"holder\"><b>Country Code: </b>"
+ data.GetCountriesResponse.body.countries[i].countryCode.code
+ " <br /><b>Country name: </b>" + data.GetCountriesResponse.body
.countries[i].countryName.text
+ " <br /><b>Language code: </b>" + data.GetCountriesResponse.body
.countries[i].countryName.langCode
+ "</div>";
}
successerrortxt = temp;
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#countries").html(successerrortxt);
}
// error callback
ILWS_Location.prototype.GetsupportedcountrieserrorCB = function (xhr, options, error) {
alert(xhr.status + ": " + error);
}
</script>
</head>
<body>
<fieldset>
<div class="holder" style="text-align:right" id="ajaxload">
<img src="loader.gif" alt="ajaxload" />
</div>
<div class="holder">
<input type="button" id="btncountries" value="Get all countries" />
</div>
<div class="holder">
<div id="countries"></div>
</div>
</fieldset>
</body>
</html>
Search Address request
This call returns coordinates based on the full or partial address specified in the call. You can include a partial address as part of the request and the response includes a list of suggestions based on the partial address in the call. Applications can present these suggestions to the user so that they can narrow down the address they are looking for.
- Invocation: GET https://api.intel.com/location/geocode/v1?tknS={tknS}&countrycode=US&city=Denver&street=Ashland&jctStreet=Caldwell&postal=78643&results=10&offset=0&alt=json
- Request object: Pass in your session token, and the other parameters as above.
- Get the response object and display it.
Source Code
<!doctype html>
<html>
<head>
<title>ILWS Address Search</title>
<style type="text/css">
body { font-family:Verdana,Sans-Serif; font-size:10px; }
fieldset { width:500px; padding:10px; }
.holder { padding:5px 0px 5px 5px; border-bottom: 1px dotted #ccc;}
#countries {height:600px;width:500px;border:2px dotted #ccc;border-radius:5px;overflow-y:scroll;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// on document load
$(function () {
$("#btnaddresssearch").click(function () {
var intel_location = new ILWS_Location();
intel_location.Getcoordsforaddress($("#txtstreet").val(), $("#txtcity").val(), $("#txtstate").val(),
$("#txtcountry").val());
});
$('#ajaxload').hide().ajaxStart(function () {
$(this).show();
})
.ajaxStop(function () {
$(this).hide();
});
});
// init
ILWS_Location = function () {
this.session = "Xfxf929rWdC3-dHeQXn4wFNQuTgZkfpYhigREWq1S3TcRbsVy2RSdYIdfScI05IlcHXMeNF0nzEyVVaeS6
AKuxaByBTSlI9JCMNLGnFlYVo1";
this.type = "GET";
this.url = "https://int.api.intel.com/location/";
this.version = "v1";
this.successCB = null,
this.errorCB = null,
this.alt = "json"; // can be JSON/XML
}
// helper function for ajax request
ILWS_Location.prototype.doAJAX = function (successCB, errorCB) {
$.ajax({
url: this.url,
type: this.type,
dataType: this.alt,
crossDomain: true,
success: successCB,
error: errorCB,
cache: false,
dataFilter: function (data, type) {
if (type == "json") {
$("#txtresp").val(data);
}
else {
$("#txtresp").val(new XMLSerializer().serializeToString(data));
}
return data;
}
});
}
// login function
ILWS_Location.prototype.Getcoordsforaddress = function (street, city, state, country) {
this.url += "geocode/" + this.version
+ "?tkns=" + this.session
+ "&city=" + city.toLowerCase()
+ "&street=" + street.toLowerCase()
+ "&countrycode=" + country.toUpperCase() + state.toUpperCase()
+ "&alt=" + this.alt;
this.doAJAX(this.GetcoordsforaddresssuccessCB, this.GetcoordsforaddresserrorCB);
}
//login success callback for JSON
ILWS_Location.prototype.GetcoordsforaddresssuccessCB = function (data, status) {
var successerrortxt = "Error UNKNOWN";
if (data.GetGeocodeResponse != undefined) {
var temp = "";
for (var i = 0; i < data.GetGeocodeResponse.body.locations.length; i++) {
temp += "<div class=\"holder\">" +
//"<b>House Number: </b>" + data.GetGeocodeResponse.body.locations[i].houseNumber.text +
"<b>Street: </b>" + data.GetGeocodeResponse.body.locations[i].street.text +
"<br /><b>City: </b>" + data.GetGeocodeResponse.body.locations[i].city.text +
"<br /><b>State, Country: </b>" + data.GetGeocodeResponse.body.locations[i].countryName.text +
"<br /><b>Postal Code: </b>" + data.GetGeocodeResponse.body.locations[i].postcode +
"<br /><b>Geo point: </b>Latitude: " + data.GetGeocodeResponse.body.locations[i]
.geoPoint.latitude +
" Longitude: " + data.GetGeocodeResponse.body.locations[i].geoPoint.longitude +
"<br /><b>Bounding box: </b>Lower Left Latitude: " + data.GetGeocodeResponse.body
.locations[i].boundingBox.lowerLeft.latitude +
" Lower Left Latitude: " + data.GetGeocodeResponse.body.locations[i].boundingBox
.lowerLeft.longitude +
"<br /><b>Bounding box: </b>Upper Right Latitude: " + data.GetGeocodeResponse
.body.locations[i].boundingBox.upperRight.latitude +
" Upper Right Latitude: " + data.GetGeocodeResponse.body.locations[i].boundingBox
.upperRight.longitude +
"</div>";
}
successerrortxt = temp;
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#addresses").html(successerrortxt);
}
// error callback
ILWS_Location.prototype.GetcoordsforaddresserrorCB = function (xhr, options, error) {
alert(xhr.status + ": " + error);
}
</script>
</head>
<body>
<fieldset>
<div class="holder" style="text-align:right" id="ajaxload">
<img src="loader.gif" alt="ajaxload" />
</div>
<div class="holder">
*Street Address <br />
<input type="text" id="txtstreet" value="25th Ave"/><br />
*City Address <br />
<input type="text" id="txtcity" value="Hillsboro" /><br />
*State Address <br />
<input type="text" id="txtstate" value="OR" /><br />
*Country <br />
<input type="text" id="txtcountry" value="US" /><br />
</div>
<div class="holder">
<input type="button" id="btnaddresssearch" value="Search" />
</div>
<div class="holder">
<div id="addresses"></div>
</div>
</fieldset>
</body>
</html>
Point of Interest (POI)
Getting a list of Points of Interest for a specific POI category allows applications to show the POIs to users when the application displays maps. The following call requests a list of POIs from the POI_GAS_STATIONS category.
- Invocation: GET https://api.intel.com/location/poi/v1?tknS={tknS}&lowerleftlat=45.21&lowerleftlong=-118.43&upperrightlat=45.23&upperrightlong=-118.45&categoryid=poi_shopping&results=10&offset=0&alt=json
- Request object: Pass in your session token, and the other parameters like the Lower left latitude,Lower left longitude, upper right latitude, upper right longitude, category ID as above.
- Get the response object and display it.
Source Code
<!doctype html>
<html>
<head>
<title>POI</title>
<style type="text/css">
body { font-family:Verdana,Sans-Serif; font-size:10px; }
fieldset { width:500px; padding:10px; }
.holder { padding:5px 0px 5px 5px; border-bottom: 1px dotted #ccc;}
#countries {height:600px;width:500px;border:2px dotted #ccc;border-radius:5px;overflow-y:scroll;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// on document load
$(function () {
var intel_location = new ILWS_Location();
intel_location.Getpoicategories();
$('#ajaxload').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () { $(this).hide(); });
});
// init
ILWS_Location = function () {
this.session = "Xfxf929rWdC3-dHeQXn4wFNQuTgZkfpYhigREWq1S3TcRbsVy2RSdYIdfScI05IlcHXMeNF0nzEy
VVaeS6AKuxaByBTSlI9JCMNLGnFlYVo1";
this.type = "GET";
this.url = "https://int.api.intel.com/location/";
this.version = "v1";
this.successCB = null,
this.errorCB = null,
this.alt = "json"; // can be JSON/XML
}
// helper function for ajax request
ILWS_Location.prototype.doAJAX = function (successCB, errorCB) {
$.ajax({
url: this.url,
type: this.type,
dataType: this.alt,
crossDomain: true,
success: successCB,
error: errorCB,
cache: false,
dataFilter: function (data, type) {
if (type == "json") {
$("#txtresp").val(data);
}
else {
$("#txtresp").val(new XMLSerializer().serializeToString(data));
}
return data;
}
});
}
ILWS_Location.prototype.Getpoicategories = function () {
this.url += "poi/categories/" + this.version
+ "?tkns=" + this.session
+ "&alt=" + this.alt;
this.doAJAX(this.GetpoicategoriessuccessCB, this.GetpoicategorieserrorCB);
}
//success callback
ILWS_Location.prototype.GetpoicategoriessuccessCB = function (data, status) {
var successerrortxt = "";
if (data.GetPOICategoriesResponse != undefined) {
var temp = "";
for (var i = 0; i < data.GetPOICategoriesResponse.body.categories.length; i++) {
$("#categories").append($("<option></option>").attr("value",
data.GetPOICategoriesResponse.body.categories[i])
.text(data.GetPOICategoriesResponse.body.categories[i]));
}
$("#btnpoi").click(function () {
var p = new ILWS_Location();
p.Getpoi($("#lowerleftlat").val(),
$("#lowerleftlong").val(),
$("#upperrightlat").val(),
$("#upperrightlong").val(),
$("#categories option:selected").text());
});
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#error").html(successerrortxt);
}
// error callback
ILWS_Location.prototype.GetpoicategorieserrorCB = function (xhr, options, error) {
alert(xhr.status + ": " + error);
}
ILWS_Location.prototype.Getpoi = function (lowerleftlat, lowerleftlong, upperrightlat, upperrightlong, poi_cat) {
this.url += "poi/" + this.version
+ "?tkns=" + this.session
+ "&lowerleftlat=" + lowerleftlat
+ "&lowerleftlong=" + lowerleftlong
+ "&upperrightlat=" + upperrightlat
+ "&upperrightlong=" + upperrightlong
+ "&language=en"
+ "&categoryId=" + poi_cat
+ "&numresult=10"
+ "&alt=" + this.alt;
this.doAJAX(this.GetpoisuccessCB, this.GetpoicategorieserrorCB);
}
ILWS_Location.prototype.GetpoisuccessCB = function (data, status) {
var successerrortxt = "";
if (data.GetPOIResponse != undefined) {
var temp = "";
for (var i = 0; i < data.GetPOIResponse.body.locations.length; i++) {
temp += "<div class=\"holder\">";
temp += "<b>Actual Address: </b>" + data.GetPOIResponse.body.locations[i].actualAddress.text +
"<br />";
temp += "<b>Facility Type: </b>" + data.GetPOIResponse.body.locations[i].facilityType.text + "<br />";
temp += "<b>Description: </b>" + data.GetPOIResponse.body.locations[i].description.text + "<br />";
temp += "<b>Geo Point: </b>Latitude: " + data.GetPOIResponse.body.locations[i].geoPoint.latitude;
temp += " Longitude: " + data.GetPOIResponse.body.locations[i].geoPoint.longitude + "<br />";
temp += "<b>Bounding box: </b>Lower Left Latitude: " + data.GetPOIResponse.body.locations[i]
.boundingBox.lowerLeft.latitude;
temp += " Lower Left Longitude: " + data.GetPOIResponse.body.locations[i].boundingBox
.lowerLeft.longitude;
temp += "<br /><b>Bounding box: </b>Upper Right Latitude: " + data.GetPOIResponse.body.locations[i]
.boundingBox.upperRight.latitude;
temp += " Upper Right Longitude: " + data.GetPOIResponse.body.locations[i].boundingBox
.upperRight.longitude;
temp += "</div>";
}
successerrortxt = temp;
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#poi").html(successerrortxt);
}
</script>
</head>
<body>
<fieldset>
<div class="holder" style="text-align:right" id="ajaxload">
<img src="loader.gif" alt="ajaxload" />
</div>
<div class="holder">
<select id="categories"></select><br />
<div class="holder" id="error" style="border:1px dotted #ccc;padding:2px;"></div><br />
<b>Lower Left Latitude</b><br />
<input type="text" id="lowerleftlat" value="51.46776" /><br />
<b>Lower Left Longitude</b><br />
<input type="text" id="lowerleftlong" value="-0.17147039" /><br />
<b>Upper Right Latitude</b><br />
<input type="text" id="upperrightlat" value="51.53984" /><br />
<b>Upper Right Longitude</b><br />
<input type="text" id="upperrightlong" value="-0.051680893" /><br />
<input type="button" id="btnpoi" value="Get POI" />
</div>
<div class="holder">
<div id="poi"></div>
</div>
</fieldset>
</body>
</html>
Getting Directions
Recieving at least two points and outputting directions to User. Also show how to use multiple locations.
- Invocation:GET https://api.intel.com/location/route/v1?tknS={tknS}&originlat=45.21&originlong=-118.43&destinationlat=45.23&destinationlong=-118.45&routeAlgorithm=SHORTEST&avoid=TOLLWAY&measurement=IMPERIAL&zoom=5&&zoom=5&viapointslat=51.534707&viapointslong=- 0.109795&preferred=HIGHWAY&alt=json
- Request object: Pass in your session token, and the other parameters like the latitude of the source,longitude of the source, latitude of the destination, ongitude of the destination
- Provide routeAlgorithm : Type of algorithm to use for calculating route, e.g., FASTEST (driving) (default), SHORTEST (driving), PEDESTRIAN. These are case-sensitive parameters .
- avoids: a list of road types to avoid, e.g., FERRY, HIGHWAY, TOLLWAY, UNPAVED. These are case-sensitive parameters and must be entered exactly as shown.
- measurement: imperial or metric, e.g., METRIC (default,Use meters and kilometers to describe distance), IMPERIAL( miles to describe distance), IMPERIAL_FEET. These are case-sensitive parameters and must be entered exactly as shown
- zoom: polyline simplification to reduce points returned default be current map zoom
- viapoints : Ensure route includes indicated coordinate points, e.g., (multiple) &viapointlatlong=,&viapointlatlong=,
- preferred: a list of preferred road types. EX: FASTEST, SHORTEST or PEDESTRIAN
- Get the response object and display it.
Source Code
<!doctype html>
<html>
<head>
<title>ILWS Health check</title>
<style type="text/css">
body { font-family:Verdana,Sans-Serif; font-size:10px; }
fieldset { width:500px; padding:10px; }
.holder { padding:5px 0px 5px 5px; border-bottom: 1px dotted #ccc;}
#countries {height:600px;width:500px;border:2px dotted #ccc;border-radius:5px;overflow-y:scroll;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// on document load
$(function () {
$("#btnroute").click(function () {
var intel_location = new ILWS_Location();
intel_location.Getroute($("#txtsrclat").val(),
$("#txtsrclong").val(),
$("#txtdestlat").val(),
$("#txtdestlong").val()
);
});
$('#ajaxload').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () { $(this).hide(); });
});
// init
ILWS_Location = function () {
this.session = "Xfxf929rWdC3-dHeQXn4wFNQuTgZkfpYhigREWq1S3TcRbsVy2RSdYIdfScI05IlcHXMeNF0nzEy
VVaeS6AKuxaByBTSlI9JCMNLGnFlYVo1";
this.type = "GET";
this.url = "https://int.api.intel.com/location/";
this.version = "v1";
this.successCB = null,
this.errorCB = null,
this.alt = "json"; // can be JSON/XML
}
// helper function for ajax request
ILWS_Location.prototype.doAJAX = function (successCB, errorCB) {
$.ajax({
url: this.url,
type: this.type,
dataType: this.alt,
crossDomain: true,
success: successCB,
error: errorCB,
cache: false
});
}
ILWS_Location.prototype.Getroute = function (srclat, srclong, dstlat, dstlong) {
this.url += "route/" + this.version
+ "?tkns=" + this.session
+ "&origlat=" + srclat
+ "&origlong=" + srclong
+ "&destlat=" + dstlat
+ "&destlong=" + dstlong
+ "&routeAlgorithm=SHORTEST"
+ "&avoid=TOLLWAY"
+ "&measurement=IMPERIAL"
+ "&zoom=5"
+ "&preferred=HIGHWAY"
+ "&alt=" + this.alt;
this.doAJAX(this.GetroutesuccessCB, this.GetrouteerrorCB);
}
//success callback
ILWS_Location.prototype.GetroutesuccessCB = function (data, status) {
var successerrortxt = "Error UNKNOWN";
if (data.GetRouteResponse != undefined) {
var temp = "";
for (var i = 0; i < data.GetRouteResponse.body.instructions.length; i++) {
temp += "<div class=\"holder\">"
+ data.GetRouteResponse.body.instructions[i].description.text
+ "</div>";
}
$("#timedist").html("<div class=\"holder\">Total Distance: " + data.GetRouteResponse.body
.totalDistanceInMeters * 0.000621371192 + " Miles, " +
"Total Time " + data.GetRouteResponse.body.totalTimeSeconds / 60 + " Minutes</div>");
successerrortxt = temp;
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#route").html(successerrortxt);
}
// error callback
ILWS_Location.prototype.GetrouteerrorCB = function (xhr, options, error) {
alert(xhr.status + ": " + error);
}
</script>
</head>
<body>
<fieldset>
<div class="holder" style="text-align:right" id="ajaxload">
<img src="loader.gif" alt="ajaxload" />
</div>
<div class="holder">
Src Latitude: <input type="text" id="txtsrclat" value="51.533707"/>
Src Longitude: <input type="text" id="txtsrclong" value="-0.108795"/><br /><br />
Dst Latitude: <input type="text" id="txtdestlat" value="51.51571"/>
Dst Longitude: <input type="text" id="txtdestlong" value="-0.06955791"/><br />
<b style="color:Red">Preferences: shortest route, Avoid tollways, Prefer highways, Use Imperial miles</b>
</div>
<div class="holder">
<input type="button" id="btnroute" value="Route" />
</div>
<div class="holder">
<div id="timedist"></div>
<div id="route"></div>
</div>
</fieldset>
</body>
</html>
Map Tiles and Stitching
Getting the Map tile URL's: In order to get the Map tile URLS we need to pass a set of geographic coordinates to the request object and Use the URLs in the response to fetch the map tiles, then assemble and present the map to the user. The Request Map Tiles call includes the required access token, along with for geographic coordinates representing the map’s boundaries:
- Lower left latitude of a bounding box representing the map
- Lower left longitude of a bounding box representing the map
- Upper right latitude of a bounding box representing the map
- Upper right longitude of a bounding box representing the map
The responses include 4 URLs, with each URL pointing to a map tile. Each URL includes horizontal and vertical tile location values (x and y) and a zoom level (z). The number of tiles provided is a factor of the bounding box (window) size, the tile size, and the geographic coordinates. The application can use the URLs to fetch the tiles, and assemble and present the map to the user.
Source Code
<!doctype html>
<html>
<head>
<title>ILWS Health check</title>
<style type="text/css">
body { font-family:Verdana,Sans-Serif; font-size:10px; }
fieldset { width:500px; padding:10px; }
.holder { padding:5px 0px 5px 0px; }
#map {height:512px;width:512px;border:2px dotted #ccc;overflow:hidden;border-radius:5px;}
.tile {float:left;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
// on document load
$(function () {
$("#btnmap").click(function () {
var intel_location = new ILWS_Location();
intel_location.Getmap($("#txtlowerleftlat").val(),
$("#txtlowerleftlong").val(),
$("#txtupperrightlat").val(),
$("#txtupperrightlong").val());
});
$('#ajaxload').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () { $(this).hide(); });
});
// init
ILWS_Location = function () {
this.session = "Xfxf929rWdC3-dHeQXn4wFNQuTgZkfpYhigREWq1S3TcRbsVy2RSdYIdfScI05IlcHXMeNF0nzEy
VVaeS6AKuxaByBTSlI9JCMNLGnFlYVo1";
this.type = "GET";
this.url = "https://int.api.intel.com/location/";
this.version = "v1";
this.successCB = null,
this.errorCB = null,
this.alt = "json"; // can be JSON/XML
}
// helper function for ajax request
ILWS_Location.prototype.doAJAX = function (successCB, errorCB) {
$.ajax({
url: this.url,
type: this.type,
dataType: this.alt,
crossDomain: true,
success: successCB,
error: errorCB,
cache: false,
dataFilter: function (data, type) {
if (type == "json") {
$("#txtresp").val(data);
}
else {
$("#txtresp").val(new XMLSerializer().serializeToString(data));
}
return data;
}
});
}
ILWS_Location.prototype.Getmap = function (lowerleftlat, lowerleftlong, upperrightlat, upperrightlong) {
this.url += "map/" + this.version
+ "?tkns=" + this.session
+ "&lowerleftlat=" + lowerleftlat
+ "&lowerleftlong=" + lowerleftlong
+ "&upperrightlat=" + upperrightlat
+ "&upperrightlong=" + upperrightlong
+ "&alt=" + this.alt;
this.doAJAX(this.GetmapsuccessCB, this.GetmaperrorCB);
}
//success callback
ILWS_Location.prototype.GetmapsuccessCB = function (data, status) {
var successerrortxt = "Error UNKNOWN";
if (data.GetMapTilesResponse != undefined) {
var temp = "";
for (var i = 0; i < data.GetMapTilesResponse.body.tiles.length; i++) {
temp += "<img src=\"" + data.GetMapTilesResponse.body.tiles[i].url + "\" class=\"tile\" />";
}
successerrortxt = temp;
}
else if (data.ErrorResponse != undefined) {
successerrortxt = "Error code: " + data.ErrorResponse.body.ErrorCode + " Message: "
+ data.ErrorResponse.body.Message;
}
$("#map").html(successerrortxt);
}
// error callback
ILWS_Location.prototype.GetmaperrorCB = function (xhr, options, error) {
alert(xhr.status + ": " + error);
}
</script>
</head>
<body>
<fieldset>
<div class="holder" style="text-align:right" id="ajaxload">
<img src="loader.gif" alt="ajaxload" />
</div>
<div class="holder">
Lower left latitude*
<br />
<input type="text" id="txtlowerleftlat" placeholder="Lower left latitude" value="51.46776"/>
</div>
<div class="holder">
Lower left longitude*
<br />
<input type="text" id="txtlowerleftlong" placeholder="Lower left longitude" value="-0.17147039"/><br />
</div>
<div class="holder">
Upper right latitude*
<br />
<input type="text" id="txtupperrightlat" placeholder="Upper right latitude" value="51.53984"/><br />
</div>
<div class="holder">
Upper right longitude*
<br />
<input type="text" id="txtupperrightlong" placeholder="Lower left latitude" value="-0.051680893"/>
<input type="button" id="btnmap" value="Get Map"/>
</div>
<div class="holder">
<div id="map"></div>
</div>
</fieldset>
</body>
</html>
More resources
This is a section to refer to other great articles, tutorials, reference documents:
- Developer Services API Walkthrough
- Developer Services FAQ
- REST APIs: Release Notes | API Reference Guide | Developer Guide
- JavaScript* APIs: Release Notes | API Reference Guide