Location App demonstrates Cloud Usage
PUBLISHED
Location App demonstrates Cloud Usage
Overview
This article demonstrates the cloud usage in tizen web application. Intel's Location based cloud service is used to load default map, to search Adress, POI and to find out directions between two places . To Use the Location based cloud service, user has to Log In to Location Code Generator. User has to generate client id and secret id to use the location based cloud services. This services provide many geographical services like POI(Point of Interest), driving directions, mapping, etc.
Pre-conditions
To develop a PositionFinder UI 'intelmaps.js','jquery.js' and 'web-ui-fw.js' must be included inside 'script' tag of HTML 'head'.
<script> src="/usr/share/tizen-web-ui-fw/latest/js/jquery.js"></script> <script> src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-scriptbs.js"></script> <script> src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white" data-framework-viewport-scale="true"></script> <script> src="https://api.intel.com/js/location/v2/intelmaps.js" type="text/javascript"></script>
Location App HTML Directions Page
Location App UI pattern is an web based pattern that demonstrates cloud usage in application. User has to use the Location based cloud service to get the directions. User has to select Source and destination city to find out the direction details in map and panel.
Location App Content
The Location App content area consists of default map. User has to select the 'Start' and ' End' place to get the directions to the destination. Create two 'Divisions' in content area. One 'div' is to display default map and other 'div' is to display the route of directions.
<div data-role="content">
<table class="ui-ftr-table" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="ui-lf-if-title">Start:</td>
<td class="ui-lf-if-textarea"><select id="start" onchange="getDirections();"> <option value="51.488224326323476, -0.164794921875">London</option> <option value="51.487324326323476, -0.164794921875">London2</option> <option value="51.47589004249909, -3.172294552187026">Cardiff</option> <option value="50.908327899613646, -1.4126549202489684">Southampton</option> <option value="50.67859921989393, -1.2876482317137175">Isle of Wight</option> </select></td>
</tr>
<tr>
<td class="ui-lf-if-title">End:</td>
<td class="ui-lf-if-textarea"><select id="end" onchange="getDirections();"> <option value="51.488224326323476, -0.164794921875">London</option> <option value="51.487324326323476, -0.164794921875">London2</option> <option value="51.47589004249909, -3.172294552187026">Cardiff</option> <option value="50.908327899613646, -1.4126549202489684">Southampton</option> <option value="50.67859921989393, -1.2876482317137175">Isle of Wight</option> </select></td>
<td><a href="#poi_page" data-role="button" style="float: right;" id="poi" class="ui-hdr-btn">Search POI</a> </td>
</tr>
<tbody>
</table>
<div style="width: 100%; height: 100%;">
<div id="map_div" style="width: 100%; height: 50%; float: top;"></div>
<div id="directionsPanel" style="float:bottom;width:100%;height:50%;overflow:auto;"></div>
</div>
</div>Location App HTML Address Search Page
Location App Address Search is an web based pattern that demonstrates cloud usage in application. User has to use the Location based cloud service to get the Address. To find the address, user has to enter a keyword in 'Search Field'. User can change the 'Region' code( eg. US, GB, IN) in java script file.
Address Search Header
In this Application, create header with fixed position. Create table, 'label', 'Search field' and Adress Search button in header as shown below.
<div data-role="header" data-position="fixed">
<label class="ui-lf-if-title">Address: </label>
<table class="ui-ftr-table" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="ui-lf-if-textarea">
<input id="search" type="search" class="ui-lf-if-text" name="name" placeholder="Enter address" data-mini="true">
</td>
<td class="ui-hdr-title-col">
<input type="submit" value="Address" onclick="geocode()">
</td>
</tr>
</tbody>
</table>
</div>Address Search Content
The Location App address search content area consists of map. User enters a keyword in search field for the specific region, address will display in map. User can change the region in java script code.
<div data-role="content"> <div id="map_div" style="width:100%; height:100%;"></div> </div>
Location App CSS File
Header Style
Table is created and style has been defined for table row and table data. The css
code for 'Search' field and 'table' are shown below
#ui-hdr-btn{
float:right;
background:rgb(212,209,204);
}
.ui-lf-table-main{
width:90%;
background:#FFF;
border:1px solid rgb(190, 194, 192);
border-radius:15px;
margin-left:7%;
margin-right:7%;
margin-top:3%;
font-family:Georgia, "Times New Roman", Times, serif;
}
.ui-lf-table-main tr:not(:last-child) td{
border-bottom: 1px solid rgb(190, 194, 192);
}
.ui-lf-if-title{
width:8%;
padding:5px 5px;
text-align: left;
vertical-align: middle;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:34px;
}
.ui-lf-if-textarea{
width:70%;
}
.ui-lf-if-text{
border: 1px double #FFFFFF;
vertical-align: middle;
color:black;
min-width:90%;
horizantal-align:center;
}
.ui-hdr-title-col{
width:10%;
margin-right:1%;
}Location App javascript File
Log In for Directions based service
Below code is used to login to the Intel's location based cloud services using client id and secret id.
var location = new intel.maps.Location();
location.login({
client_id: '',
secret_id: ''
}, on_login);Draw a default Map for Direction based service
Below code is used to draw a map with directions details in panel and map.
function drawMap(){
var prefs = {
mapTypeId:intel.maps.MapTypeId.ROADMAP,
zoom:13,
center:new intel.maps.LatLng(40.783,-73.964)
};
var map = new intel.maps.Map(document.getElementById("map_div"), prefs);
addHiddenDiv();
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById("directionsPanel"));
window.onresize = function(){ intel.maps.event.trigger(map, "resize"); };
}
function on_login(response, status) {
if (status != "OK")
alert("Login failure: "+status);
else
drawMap();
}Get Directions
Below code is used to get the directions from 'Start' point to 'End' point.
function getDirections() {
var request = {
origin:intel.maps.LatLng.parse(document.getElementById("start").value),
destination:intel.maps.LatLng.parse(document.getElementById("end").value),
travelMode:intel.maps.DirectionsTravelMode.DRIVING,
unitSystem:intel.maps.DirectionsUnitSystem.IMPERIAL
};
document.getElementById("hiddenpane").style.display="";
directionsService.route(request, function(response, status) {
document.getElementById("hiddenpane").style.display="none";
if (status == intel.maps.DirectionsStatus.OK)
directionsRenderer.setDirections(response);
else
alert("Route calculation failed: " + status);
});
}Log In for Address Search
Below code is used to login to the Intel's location based cloud services using client id and secret id.
var location = new intel.maps.Location();
location.login({
client_id: '',
secret_id: ''
}, on_login);Draw a default Map for Address Search
Below code is used to draw a map.
function drawMap(){
var prefs = {
mapTypeId:intel.maps.MapTypeId.ROADMAP,
zoom:13,
center:new intel.maps.LatLng(40.783,-73.964)
};
map = new intel.maps.Map(document.getElementById("map_div"), prefs);
addHiddenDiv();
window.onresize = function(){ intel.maps.event.trigger(map, "resize"); };
}
function on_login(response, status) {
if (status != "OK")
alert("Login failure: "+status);
else
drawMap();
}Search Address
User has to enter the input in search field. User can change the 'region' code(Eg. US, IN, GB) in java script file based on their search criteria. To find out the the result of address search , the foloowing code is used:
function geocode() {
var address = document.getElementById("search").value;
var coder = new intel.maps.Geocoder();
document.getElementById("hiddenpane").style.display="";
coder.geocode({'address':address, region:'IN'}, search_results);
setTimeout(search_results, 20000);
}
function search_results(response, status) {
document.getElementById("hiddenpane").style.display="none";
if(!(response === undefined)){
if (status == intel.maps.GeocoderStatus.OK) {
if(response.results.length == 0)
alert("Geocoder returned no matches: ZERO_RESULTS");
else{
var c = response.results[0];
point = new intel.maps.LatLng(c.geoPoint.y, c.geoPoint.x);
var bounds = new intel.maps.LatLngBounds(point,point);
for (var i = 0; i < response.results.length; ++i) {
var r = response.results[i];
var point = null;
var title = null;
point = new intel.maps.LatLng(r.geoPoint.y, r.geoPoint.x);
if(r.description !== undefined)
title = r.description;
else
title = r.name+(r.street == null ? "" : ", "+r.street )+(r.city == null ? "" : ", "+r.city)+(r.state == null ? "" : ", "+r.state)+(r.countryCode == null ? "" : ", "+r.countryCode);
new intel.maps.Marker({position:point, title:title, map:map});
bounds.extend(point);
}
map.fitBounds(bounds);
if (response.results.length == 1)
map.setZoom(15);
}
} else alert("Geocoder returned no matches: " + response);
}
}Screenshots
Below is the screenshot of the Location App
Figure-1: Directions based map 
Figure-2: Address Search based map Below link is used to refer Location based cloud services
Location Based Cloud Services
