All about programming in GNU/LINUX

HTML5

Intro to HTML 5 Geolocation :Find the locational data and getting it on the Map

HTML 5 brings in lot of powerful features along with it , one of such fascinating feature is the capability to code locational based applications using the `Geolocation and Goolge MAPS API’s `

In this post i’ll be briefing you folks on obtaining your locational reference in terms of latitude and longitude and using the same to get the MAP on the webpage centred around your current location

There are 3 parts to be coded to achieve the objective.The HTML5 code where the execution starts and links to the Java Script file and the CSS stylesheet

Here is the HTML5 code which is pretty much straigh forward

<!doctype html>
<html>
<head>
	<meta charset = "utf-8">
	<title>Location</title>
	<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
        <!-- To link to the google map API's -->
	<script src="loc.js"></script>          
	<link rel = "stylesheet" href="myLoc.css">
</head>
<body>
	<div id="Location">
		Here comes the location              <!-- Place Holder for the locational data -->
	</div>
	
	<div id="map">				     <!-- Place holder for the Map -->	
	</div>

</body>
</html>	

The Java script part is the most important snippet to get this working , here goes the Java Script Code 😀

var map=null;


window.onload = getLocation ;

function showMap(coords) {
	var googleLatAndLong = new google.maps.LatLng(coords.latitude,coords.longitude);
	var mapOptions	= {
		zoom: 10, 
		center: googleLatAndLong ,
		mapTypeId: google.maps.MapTypeId.ROADMAP	
	};//The option object specifying the options for the map
	var mapDiv = document.getElementById("map");
	map = new google.maps.Map(mapDiv,mapOptions);//API which gets the map
}




function getLocation() {
	if(navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(displayLocation); 
//The API calls the display location function with position object containing the positional parameters
	}
	else {
		alert("Doesnt support Geolocation");
	}
}
function displayLocation(position) {
	var latitude = position.coords.latitude ; 
	var longitude = position.coords.longitude ;

	var div = document.getElementById("Location");
	div.innerHTML = "You are at latitude: " + latitude + " Longitude: " + longitude;
	showMap(position.coords); 
	//showMap function takes in the positional parameters and displays the map
}


Here the CSS code for the map id

div#map {
	margin: 5px;
	width: 400px;
	height: 400px;
	border: 1px solid black;
}

Advertisements

HTML-5 Basic tags:header,nav,section,aside and footer tags

The HTML 5 tags helps categorizing of the content of page based on their position on the page.For instance , header tags as the name suggests is used to publish the topmost content of the site , section tags are used to place the main body or the main content of the site

here is an example code illustrating the use of header,nav,section,aside and footer tags of HTML 5

<header>Here goes the header</header>
     <nav>
	<ul>
		<li>Here is the main navigation1</li>
		<li>The main navigational tabs are placed within nav tags of HTML 5</li>
	</ul>
    </nav>
<section>The main content of the page is placed here </section>	
<aside>Not so important content goes here</aside>
footer>The footer of the webpage goes here</footer> 

Here is another example code

<!doctype html>
<html lang=”en”>
<head>
	<meta charset=”utf-8” />
	<title></title>
	<link rel=”stylesheet” href=”main.css”>
</head>

<body>
<header>
 <h1>This is the header section of the HTML5</h1>
</header>
<nav>                                     <!-- <nav> tag is to create the main navigation for the site -->   
	<ul>
		<li>HTML 5</li>
		<li>JAVA SCRIPT</li>
		<li>PHP</li>
	</ul>
</nav>

<section>
  <h2>This is the Main section of the site,HTML 5 provides section tag to add content to the main section</h2>
</section>
<aside>
	<h3>About aside tag</h3>
	Aside tag is used to post the side content for the site,HTML5 will postin them , but it is just to describe that the information here is not so important 
</aside>
<footer>
 @Karthic Rao's Site
</footer>
</body>
</html>