<< September 2010 | Home | November 2010 >>

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 :  Add this post to Slashdot    Add this post to Digg    Add this post to Reddit    Add this post to Delicious    Add this post to Stumble it    Add this post to Google    Add this post to Technorati    Add this post to Bloglines    Add this post to Facebook    Add this post to Furl    Add this post to Windows Live    Add this post to Yahoo!

Export this post as PDF document  Export this post to PDF document