<< Python - CSV to sqllite | Home | PostgreSQL on Windows >>

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

    <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;}
    <div id="baseDiv">
        <canvas id="stage" width="600" height="600">Sorry, your browser does not support the canvas tag.</canvas>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
    <script type="text/javascript">
        var lineHeight = 14;
        jQuery(function() {

        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;
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

Avatar: javaScript evangelist

Re: W3C Geolocation, Bing Maps and HTML 5 Canvas

why you need jQuery for this? don't be a noob, use just javaScript or are you a designer? 

Avatar: Wyatt

Re: W3C Geolocation, Bing Maps and HTML 5 Canvas

That's fair criticism - for this limited sample jQuery is not particularly necessary, but it sure is convenient for cross-browser event binding, and jQuery IS Javascript after all...

I happen to be working on a project where jQuery is already on the page, so there is no extra overhead.  Why would I not use it?  Why would I duplicate code that's already handled by jQuery?

Add a comment Send a TrackBack