Permalink
Browse files

fixes and improvements

  • Loading branch information...
1 parent e3f67ad commit 237cf9eb65be145a9c3b0bc1f900da85cff61b0b @codepo8 committed Dec 20, 2010
Showing with 30 additions and 26 deletions.
  1. +1 −1 index.html
  2. +8 −11 map.js
  3. +14 −14 spirit.js
  4. +7 −0 styles.css
View
@@ -2,7 +2,7 @@
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+<meta charset="utf-8">
<title>Animated Google Maps path synced with HTML5 video</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
View
19 map.js
@@ -44,14 +44,11 @@
pos = [],
addx = (end[0] - start[0]) / amount,
addy = (end[1] - start[1]) / amount,
- i,now,full,path;
+ i,full,path;
/* Calculate the points and seed the array */
for(i=animationstart;i<animationend;i++){
- pos[i] = new google.maps.LatLng(
- start[0] += addx,
- start[1] += addy
- );
+ pos[i] = new google.maps.LatLng(start[0] += addx,start[1] += addy);
}
/* Once all tiles have loaded, start the animation */
@@ -63,18 +60,18 @@
spirit.draw = function(){
var path = new google.maps.Polyline({
path: [startpos,pos[now]],
- strokeColor: "#c00",
- strokeOpacity: .7,
- strokeWeight: 10
+ strokeColor:'#c00',
+ strokeOpacity:0.7,
+ strokeWeight:10
});
path.setMap(map);
- map.panTo(pos[now])
+ map.panTo(pos[now]);
now = now + 1;
if(now < animationend-1){
setTimeout(spirit.draw,200);
}
- }
- }
+ };
+ };
/* Create the map when the page is done */
window.addEventListener('load',function(){
View
@@ -26,7 +26,7 @@ spirit.initialize = function() {
/* Define the start and endpoint of the path animation and draw map */
var start = [40.743529, -73.611844],
- end = [48.8566667, 2.3509871]
+ end = [48.8566667, 2.3509871],
startpos = new google.maps.LatLng(start[0],start[1]),
endpos = new google.maps.LatLng(end[0],end[1]),
map = new google.maps.Map(
@@ -55,14 +55,14 @@ spirit.initialize = function() {
needed steps in th path animation.
*/
var animationstart = 21,
- animationend = parseInt(v.duration)+1,
+ animationend = parseInt(v.duration,10)+1,
amount = animationend - animationstart,
pos = [],
addx = (end[0] - start[0]) / amount,
addy = (end[1] - start[1]) / amount;
/* Create an array of location points in between start and end */
- for(var i = animationstart; i < animationend; i++) {
+ for(i = animationstart; i < animationend; i++) {
pos[i] = new google.maps.LatLng(
start[0] += addx,
start[1] += addy
@@ -79,7 +79,7 @@ v.currentTime = 7;
if(played === false){
/* Create a button to start the video */
- but = document.createElement('button');
+ var but = document.createElement('button');
but.innerHTML = 'Click to see Lindbergh\'s flight';
but.addEventListener('click',function(e){
v.currentTime = 7;
@@ -93,7 +93,7 @@ v.currentTime = 7;
/* Loop the song... */
a.addEventListener('ended', function(o) {
a.currentTime = 0;
- },false)
+ },false);
/*
Once the video has finished, stop the audio, remove the button
@@ -103,21 +103,21 @@ v.currentTime = 7;
a.pause();
spirit.credslist.parentNode.style.display = 'block';
spirit.creds();
- },false)
+ },false);
/* When the timestamp has changed... (this fires a lot!) */
v.addEventListener('timeupdate',function(o){
/* execute every second rather than fraction of second */
- full = parseInt(v.currentTime);
+ full = parseInt(v.currentTime,10);
/*
If the time is the right to start the animation, change map and video
opacity to show both...
*/
if(full === now-1){
- mapelm.style.opacity = .8;
- v.style.opacity = .4;
+ mapelm.style.opacity = 0.8;
+ v.style.opacity = 0.4;
}
/* If the animation started, play the music*/
@@ -144,12 +144,12 @@ v.currentTime = 7;
if(full >= now) {
path = new google.maps.Polyline({
path: [startpos,pos[full]],
- strokeColor: "#c00",
- strokeOpacity: .7,
- strokeWeight: 10
+ strokeColor:'#c00',
+ strokeOpacity:0.7,
+ strokeWeight:10
});
path.setMap(map);
- map.panTo(pos[full])
+ map.panTo(pos[full]);
now = now + 1;
}
@@ -159,7 +159,7 @@ v.currentTime = 7;
played = true;
}
});
-}
+};
/*
Very rough and ready animation of the credits
View
@@ -2,6 +2,9 @@ html,body{
background:#cc9;
overflow:hidden;
}
+header,footer,article,section{
+ display:block;
+}
#boundary{
width:500px;
margin:0 auto;
@@ -17,6 +20,8 @@ html,body{
#stage{
margin-top:150px;
-moz-box-shadow:4px 4px 10px rgba(0,0,0,.7);
+ -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.7);
+ box-shadow:4px 4px 10px rgba(0,0,0,.7);
}
#mapcanvas{
opacity:0;
@@ -95,6 +100,7 @@ video,#credits{
right:20px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
+ transform: rotate(20deg);
}
h1 {
@@ -105,6 +111,7 @@ h1 {
line-height: 0.87em;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
+ transform: rotate(-30deg);
text-shadow:0 0 .3em white;
color:#333;
z-index:20;

0 comments on commit 237cf9e

Please sign in to comment.