From 917c4b9a9eb8e0339f9a84ce688a449f04c11186 Mon Sep 17 00:00:00 2001 From: David Seifried Date: Tue, 17 May 2011 09:45:52 -0400 Subject: [PATCH] Streetview tweening, with demo added to the html file --- plugins/googlemap/popcorn.googlemap.html | 93 +++++++++++++-- plugins/googlemap/popcorn.googlemap.js | 142 ++++++++++++++++------- 2 files changed, 187 insertions(+), 48 deletions(-) diff --git a/plugins/googlemap/popcorn.googlemap.html b/plugins/googlemap/popcorn.googlemap.html index 48b6587a..a351a57a 100644 --- a/plugins/googlemap/popcorn.googlemap.html +++ b/plugins/googlemap/popcorn.googlemap.html @@ -5,7 +5,7 @@ - +

Popcorn google Map Plug-in Demo

A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.

-

A Google StreetView Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.

+

A Google Map Streetview image of Toronto, Ontario will appear at 0 seconds and disaapear at 20 seconds

A Google Map displaying Boston will appear at 0 seconds and disappear at 30 seconds.

+

A Google Map Streetview tweening from Oakville, Ontario to York University will appear at 0 seconds and disaapear at 40 seconds

+

A Google Map Streetview tweening from 217 Fayetteville Street to East Davie Street will appear at 0 seconds and disaapear at 20 seconds - Using hardcoded lat+lng values

+

A Google Map Streetview tweening from Buffallo to Ottawa will appear at 0 seconds and disaapear at 40 seconds

+
-
+ +

Locations in this video:

Locations in this video:

Locations in this video:

+

Locations in this video:

+

Locations in this video:

+

Locations in this video:

- \ No newline at end of file + diff --git a/plugins/googlemap/popcorn.googlemap.js b/plugins/googlemap/popcorn.googlemap.js index 215dc0bf..2051cbd4 100644 --- a/plugins/googlemap/popcorn.googlemap.js +++ b/plugins/googlemap/popcorn.googlemap.js @@ -44,9 +44,22 @@ var googleCallback; * -Heading [optional] STREETVIEW orientation of camera in degrees relative to true north (0 north, 90 true east, ect) * -Pitch [optional] STREETVIEW vertical orientation of the camera (between 1 and 3 is recommended) * -Lat and Lng: the coordinates of the map must be present if location is not specified. - * -Location: the adress you want the map to display, bust be present if lat and log are not specified. + * -Location: the adress you want the map to display, must be present if lat and lng are not specified. * Note: using location requires extra loading time, also not specifying both lat/lng and location will * cause and error. + * + * Tweening works using the following specifications: + * -Location is the start point when using an auto generated route + * -endLoc is the end location when using an auto generated route + * Note that both location and endLoc must be present when using an auto generated route, or the map will not tween + * -Interval is the speed in which the tween will be executed, a reasonable time is 1000 ( time in milliseconds ) + * Heading, Zoom, and Pitch streetview values are also used in tweening with the autogenerated route + * + * -Tween is an array of objects, each containing data for one frame of a tween + * -position is an object with has two paramaters, lat and lng, both which are mandatory for a tween to work + * -pov is an object which houses heading, pitch, and zoom paramters, which are all optional, if undefined, these values default to 0 + * -interval is the speed in which the tween will be executed, a reasonable time is 1000 ( time in milliseconds ) + * * @param {Object} options * * Example: @@ -128,6 +141,8 @@ var googleCallback; * options variable */ start: function (event, options) { + var that = this; + // ensure the map has been initialized in the setup function above var isMapSetup = function () { if (map) { @@ -159,7 +174,8 @@ var googleCallback; // Switch this map into streeview mode map.setStreetView( // Pass a new StreetViewPanorama instance into our map - sView = new google.maps.StreetViewPanorama(newdiv, { + + sView = new google.maps.StreetViewPanorama( newdiv, { position: location, pov: { heading: options.heading = options.heading || 0, @@ -170,72 +186,120 @@ var googleCallback; ); - - - + + // Function to handle tweening using a set timeout + var tween = function ( rM, t ) { - var tween = function (rM, t) { + setTimeout( function () { - setTimeout(function () { + // Checks whether this is a generated route or not + if( options.tween ){ - if(options.tween){ + for ( var i = 0; i < rM.length; i++ ) { - var p = new google.maps.LatLng(rM.position.lat, rM.position.lng); - sView.setPosition(p); + // Checks if this position along the tween should be displayed or not + if( that.media.currentTime >= ( rM[ i ].interval*( i+1 ) )/1000 && + ( that.media.currentTime <= (rM[ i ].interval*( i+2 ) )/1000 || + that.media.currentTime >= rM[ i ].interval*( rM.length )/1000 ) ){ - sView.setPov({ - heading: rM.pov.heading, - zoom: 1, - pitch: 1 - }); + var p = new google.maps.LatLng( rM[ i ].position.lat, rM[ i ].position.lng ); + sView3.setPosition( p ); + sView3.setPov({ + heading: rM[ i ].pov.heading || 0, + zoom: rM[ i ].pov.zoom || 0, + pitch: rM[ i ].pov.pitch || 0 + }); + + } + + } + // Calls the tween function again at the interval set by the user + tween( rM, rM[ 0 ].interval ); } else{ - sView.setPosition(rM); + + for ( var i = 0; i < rM.length; i++ ) { + + if( that.media.currentTime >= (options.interval*(i+1))/1000 && (that.media.currentTime <= (options.interval*(i+2))/1000 || that.media.currentTime >= options.interval*(rM.length)/1000)){ + + sView2.setPosition( checkpoints[i] ); + + sView2.setPov({ + heading: options.heading || 0, + zoom: options.zoom, + pitch: options.pitch || 0 + }); + } + + } + tween( checkpoints, options.interval ); } - }, t); + }, t ); } - var tmr = 0; - - if ( !options.tween && ( options.location && options.endLoc) ){ + + // Determines if we should use hardcoded values ( using options.tween ), + // or if we should use a start and end location and let google generate + // the route for us + if ( !options.tween && ( options.location && options.endLoc ) ){ + + // Creating another variable to hold the streetview map for tweening, + // Doing this because if there was more then one streetview map, the tweening would sometimes appear in other maps + var sView2 = sView; // Create an array to store all the lat/lang values along our route var checkpoints = []; + // Creates a new direction service, later used to create a route var directionsService = new google.maps.DirectionsService(); - var directionsDisplay = new google.maps.DirectionsRenderer(sView); + // Creates a new direction renderer using the current map + // This enables us to access all of the route data that is returned to us + var directionsDisplay = new google.maps.DirectionsRenderer( sView2 ); var request = { - origin: options.location, - destination:options.endLoc, - travelMode: google.maps.TravelMode.DRIVING + origin: options.location, + destination: options.endLoc, + travelMode: google.maps.TravelMode.DRIVING }; - directionsService.route(request, function(response, status) { - if (status == google.maps.DirectionsStatus.OK) { - directionsDisplay.setDirections(response); - showSteps(response); + // Create the route using the direction service and renderer + directionsService.route( request, function( response, status ) { + + if ( status == google.maps.DirectionsStatus.OK ) { + directionsDisplay.setDirections( response ); + showSteps( response, that ); } + }); - function showSteps(directionResult) { - for (var j = 0; j < directionResult.routes[0].overview_path.length; j++) { - checkpoints.push(new google.maps.LatLng(directionResult.routes[0].overview_path[j].lat(), directionResult.routes[0].overview_path[j].lng())); + function showSteps( directionResult, that ) { + + // Push new google map lat and lng values into an array from our list of lat and lng values + for ( var j = 0; j < directionResult.routes[ 0 ].overview_path.length; j++ ) { + checkpoints.push( new google.maps.LatLng( directionResult.routes[ 0 ].overview_path[ j ].lat(), directionResult.routes[ 0 ].overview_path[ j ].lng() ) ); } - for ( var i = 0; i < checkpoints.length; i++ ) { - tmr = tmr + options.interval; - tween( checkpoints[i], tmr ); - } + + // Check to make sure the interval exists, if not, set to a default of 1000 + options.interval = options.interval || 1000; + tween( checkpoints, 10); + } } - else { - for ( i = 0; i < options.tween.length; i++ ) { - tmr = tmr + options.tween[i].interval; - tween( options.tween[i], tmr ); + else if( options.tween ){ + + // Same as the above to stop streetview maps from overflowing into one another + var sView3 = sView; + + for ( var i = 0; i < options.tween.length; i++ ) { + + // Make sure interval exists, if not, set to 1000 + options.tween[ i ].interval = options.tween[ i ].interval || 1000; + tween( options.tween, 10 ); } + } }