W3C Geolocation, Bing Maps and HTML 5 Canvas
This code uses the W3C's Geolocation API in conjunction with Bing Maps and HTML 5 Canvas.
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 page</title>
<!--link rel="stylesheet" type="text/css" href="site.css"/-->
<style type="text/css">
#baseDiv {position:relative; width:80%; left:10%; border:1px solid;}
</style>
</head>
<body>
<div id="baseDiv">
<canvas id="stage" width="600" height="600">Sorry, your browser does not support the canvas tag.</canvas>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
var lineHeight = 14;
jQuery(function() {
navigator.geolocation.getCurrentPosition(showPosition);
});
function showPosition(position) {
var ctx = document.getElementById('stage').getContext('2d'),
txt = 'This is a string of text',
x = 10, y = lineHeight,
maxWidth = 50,
lat = position.coords.latitude,
lon = position.coords.longitude;
ctx.font = '12pt Courier New';
ctx.fillText('latitude: ' + lat, x, y);
y += lineHeight;
ctx.fillText('longitude: ' + lon, x, y);
y += lineHeight;
var img = new Image(),
url = 'http://dev.virtualearth.net/REST/v1/Imagery/Map/Road/' + lat + ',' + lon + '/15'
+ '?mapSize=400,400'
+ '&pushpin=' + lat + ',' + lon
+ '&mapLayer=trafficFlow'
+ '&key=XXXXXXXXXXXXXXXXXX';
jQuery(img).bind('load', function() {
ctx.drawImage(img, x, y);
});
img.src = url;
}
//]]>
</script>
</body>
</html>
Social Bookmarks : 
Export this post to PDF document
