Upload file to Canvas

by Jon-Carlos Rivera

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<nav id="jumpTo"><a href="accessible.html">Switch to accessible version</a></nav>
    <article>
        <div id="googleMap" style="height:700px;">Need an accessible version or on a low bandwidth connection? <a href="accessible.html">Switch to accessible version</a></div>
        <div id="overlay">
            <img src="http://channel4maps.s3.amazonaws.com/timeteam/logo.png" alt="Time Team" id="logo">

            <p id="socialMedia">
                <a href="https://twitter.com/share?url=&amp;text=Time Team"><img src="images/button-tweet.png" alt="Tweet" class="twitter"></a>
                <a href="http://www.facebook.com/sharer.php?u=&amp;t=Channel%204%20:%20Time%20Team"><img src="images/button-like.png" alt="Like" class="fb"></a><br>
            </p>

            <form method="post" action="" id="search" class="first">
                <div>
                    <h2>Postcode, town or area:</h2>
                    <label for="c4mapsQ">Search for a map location</label>
                    <input type="text" name="search" id="q"><button type="submit">Go</button>
                </div>
            </form>

                <form method="post" id="filter" action="">
                <div>
                    <h2>Filter by:</h2>
                        <label for="filter6">Episode</label>
                    <select name="6" title="EPISODE" id="filter6">
                        <option value="">EPISODE</option>
                            <option value="69">Episode 1</option>
                            <option value="70">Episode 2</option>
                            <option value="71">Episode 3</option>
                            <option value="72">Episode 4</option>
                            <option value="73">Episode 5</option>
                            <option value="74">Episode 6</option>
                            <option value="75">Episode 7</option>
      ...

CSS

html {
    overflow:hidden;
    height:100%
}
body {
    padding:0;
    margin:0
}
article {
    position:relative
}
a img {
    border:none!important
}
#jumpTo {
    position:absolute;
    left:0;
    top:0;
    text-indent:-999em
}
#googleMap {
    position:absolute;
    left:0;
    top:0;
    width:100%
}
#overlay, #inOut {
    background-color:#21272c
}
#overlay {
    padding:0 16px 0 13px;
    width:171px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    font:12px/1.35'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow:4px 0 4px rgba(0, 0, 0, 0.2);
    transition:left .2s;
    -moz-transition:left .2s;
    -webkit-transition:left .2s;
    -o-transition:left .2s
}
#logo {
    padding-top:24px
}
#inOut {
    position:absolute;
    right:-20px;
    bottom:48px;
    width:20px;
    padding:4px 0 5px;
    line-height:1;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    cursor:pointer;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -moz-border-radius-topright:6px;
    -moz-border-radius-bottomright:6px;
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
    color:#FFF
}
#poweredBy {
    position:absolute;
    bottom:0;
    right:-74px;
    transition:opacity .2s;
    -moz-transition:opacity .2s;
    -webkit-transition:opacity .2s;
    -o-transition:opacity .2s
}
#overlay h2 {
    font-size:1em;
    font-weight:bold;
    text-transform:uppercase;
    color:#FFF;
    margin:0 0 8px;
    padding:0
}
#overlay form {
    border-bottom:1px solid #383d42
}
#overlay form>div {
    border-bottom:1px solid #070809;
    padding:11px 0 8px
}
#overlay form.first {
    border-top:1px solid #070809;
    margin-top:19px
}
#overlay form.first>div {
    border-top:1px solid #383d42
}
#overlay form input, #overlay form select {
    font:12px/1'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background:#FFF;
    color:#666;
    border:0;
   ...

JavaScript

var mapTitle = 'Time Team';
var mapOpts = {
    map: {
        mapTypeControl:true,
        bounds: {
            southWest: new google.maps.LatLng(17.33078980, -76.43431730),
            northEast: new google.maps.LatLng(60.52965070, 3.01757120)
        }
    },
    marker: {
      //  image: 'http://channel4maps.s3.amazonaws.com/timeteam/marker.png',
      //  vagueimage: 'http://channel4maps.s3.amazonaws.com/timeteam/marker-vague.png'
    },
    markerBundle: {
        url: 'http://channel4maps.s3.amazonaws.com/timeteam/marker-bundle.png',
        width: 24,
        height: 24
    },
    template: (($(window).width() < 800) ? $('#overlayTemplateNarrow').html() : $('#overlayTemplate').html()),
    markers: [{
        "id": 1024,
            "latitude": 52.05591070,
        "longitude": -2.62724610,
            "title": "Sutton St Michael, Hereford",
            "description": "Tony Robinson and the Time Team head for Herefordshire in search of the Royal palace of the great Anglo-Saxon leader, King Offa, who ruled the kingdom of Mercia from AD 757 to 796. Records show that Offa had a grand palace in the area, but its exact location has never been discovered. Will the Team make history, by finding the lost palace?",
            "vague": true,
            "image": {
            "url": "http://www.channel4.com/assets/programmes/images/time-team/series-7/3d7243fd-174a-4571-b712-c8108f4b9959_200x113.jpg",
                "alt": "",
                "width": 200,
            "height": 113
        },
            "filters": [{
            "id": 78,
            "title": "Episode 10",
            "visible": true
        }, {
            "id": 89,
            "title": "Series 7",
            "visible": true
        }, {
            "id": 171,
            "title": "Anglo-Saxon",
            "visible": true
        }],
            "links": [{
            "title": "Find out more about the Time Team Specials",
            "type": "3",
            "url":...