Geo-location APP with Intel XDK

This App is created in HTML5 on Intel XDK platform while making use of Google Maps API The link for the JavaScript library is as follows:

<script src="http://maps.googleapis.com/maps/api/js"></script>

 

Main Parts

There are three components in the App window that are easily recognizable:

  1. A <div> element to hold the map
  2. JavaScript functions inside <script> </script;> - inside <head> </head;>
  3. HTML5 elements to add interactivity

Now, let's make our Geo-location app on Intel XDK.

Launch Intel XDK and create your first project. Let's use HTML5 standard template for the project. This is what Intel XDK says about standard HTML5 template:

<h1>Geo-location Finder</h1>
<h3>Kandy, Sri Lanka</h3>
<p>This is a map of Kandy, Sri Lanka, the ancient capital and a world heritage city. This app helps you explore the historic city and its famous landmarks, including the famous Temple of the Tooth Relic.</p>
<div id="googleMapsOne" style="width:auto;height:300px;margin-top:20px;margin-bottom:20px;"></div>
<span><strong>Zoom:</strong></span> <input type="range" id="rng" min="5" max="18" value="8" step="1" style="height:10px;width:60%;" onchange="initialize()"> <input type="checkbox" name="chkbox" value="mkr" id="mkr" onclick="initialize()"> City Centre
<p>Do you fancy a walk from <strong>Kandy City Centre?</strong> Choose a <strong>radius</strong> and explore the surroundings. You may <strong>zoom</strong> the selected area.</strong></p>
<span><strong>Circle Radius:</strong></span> <input style="height:10px;width:40%;" id="rad" type="range" min="1000" max="4000" value="2000" step="1000" onchange="rdus()"><input type="text" id="txt" style="text-align:center;width:40px;"> <input type="button" value="Mark It" onclick="initialize()" style="margin-top:20px;" onclick="initialize()">

Let's turn to styling now; it is fairly simple. Type in the following code inside <style></style>, in addition to what is given by Intel XDK:

<style>
h1,h3{text-align:center;}
h1{color:saddlebrown;}
h3{color:sandybrown;}
</style>

Now, the most important part; the 'engine' of the app - JavaScript code - that makes the app fully interactive must be included. In this case, it is included inside the HTML5 document for clarity. Intel XDK recommends placing the code inside special folders.

<script>
var l;
function initialize() {
// Radius of circle
rdus();
//Zoom
var k=eval(document.getElementById('rng').value);
//Circle radius
var m;
var n;
switch(l) {
case 1000:
m="#0000FF";
n="#0000FF";
break;
case 2000:
m="#00FFFF";
n="#00FFFF";
break;
case 3000:
m="#FF00FF";
n="#FF00FF";
break;
case 4000:
m="#000000";
n="#000000";
break;
}
//Center
myCity=new google.maps.LatLng(7.2964, 80.6350);
var mapProp = {
center:myCity,
zoom:k,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//Map
var map=new google.maps.Map(document.getElementById("googleMapsOne"),mapProp);
// Circle
var mycityCircle = new google.maps.Circle({
center:new google.maps.LatLng(7.2964, 80.6350),
radius:l,
strokeColor:m,
strokeOpacity:0.8,
strokeWeight:2,
fillColor:n,
fillOpacity:0.2
});
mycityCircle.setMap(map);
// Marker
if(document.getElementById('mkr').checked)
{
var marker=new google.maps.Marker({
position:myCity,
icon:'pin.jpg',
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map)
}
}
function rdus(){
l=eval(document.getElementById('rad').value);
document.getElementById('txt').value=l/1000+" km";
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Now, save the file and press emulate tab.There are emulators for all major mobile platforms:

  1. IOS
  2. Android
  3. Windows

You will see your Geo-location App. You will see your first Geo-location app like this: Voila!

Intel xdk Two

 

Intel XDK has tools to check how the app works on real life platforms - Android or IOS. This is how it works on emulators:

Intel xdk Three

 

 

 

 

 

Resources at Fingertips

There is a significant selection of tutorials here, covering ASP.Net, HTML5, CSS3 and JavaScript. They are categorized clearly for you to access them easily on any device - desktops/laptops, smartphones and laptops.
There are quite a few of them on HTML5 Canvas and CSS3. In addition, there are tutorials on JavaScript and ASP.Net too.

Email: 

Stand Out - from the crowd

students

"There's no such thing as a free lunch."

The best things in nature are free with no strings attached - fresh air, breathtakingly warm sunshine, scene of meadow on the horizon...

Vivax Solutions, while mimicking nature, offers a huge set of tutorials along with interactive tools for free.

Please use them and excel in the sphere of science education.

Everything is free; not even registration is required.

 

 

Recommended Reading

 

The best book to master HTML5 canvas animations. The author tells you how to manipulate the canvas element with JavaScript in a progressive way - starting from the easier to harder worked examples. It is ideal for anyone who wants to be a game developer in HTML5.

Advertisements

Advertisement