mozilla
/
popcorn-js
зеркало из https://github.com/mozilla/popcorn-js.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Streetview tweening, with demo added to the html file

This commit is contained in:
David Seifried 2011-05-17 09:45:52 -04:00
Родитель 4cc25abe15
Коммит 917c4b9a9e
2 изменённых файлов: 187 добавлений и 48 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

93
plugins/googlemap/popcorn.googlemap.html
Просмотреть файл

@ -5,7 +5,7 @@
<script src="../../popcorn.js"></script> <script src="../../popcorn.js"></script>
<script src="popcorn.googlemap.js"></script> <script src="popcorn.googlemap.js"></script>
<script> <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var p = Popcorn('#video') var p = Popcorn('#video')
.volume(0) .volume(0)
@ -19,16 +19,71 @@
lng: -79.403323, lng: -79.403323,
zoom: "10" zoom: "10"
} ) } )
.googlemap({
start: 0, // seconds
end: 40, // seconds
type: "STREETVIEW",
target: "map3",
location: "6th Line, Oakville, Ontario",
//lat: 35.7795324,
//lng: -78.63915450000002,
zoom: "1",
heading: "180",
pitch: "1",
interval: 1000,
endLoc: "York university"
})
.googlemap({
start: 0, // seconds
end: 40, // seconds
type: "STREETVIEW",
target: "map5",
location: "Buffallo",
//lat: 35.7795324,
//lng: -78.63915450000002,
zoom: "1",
heading: "180",
pitch: "1",
interval: 1000,
endLoc: "Ottawa"
})
.googlemap({ .googlemap({
start: 0, // seconds start: 0, // seconds
end: 20, // seconds end: 20, // seconds
type: "STREETVIEW", type: "STREETVIEW",
target: "map1", target: "map4",
lat: 43.665429, lat: 35.7795324,
lng: -79.403323, lng: -78.63915450000002,
zoom: "1", zoom: "1",
heading: "0", heading: "180",
pitch: "1" pitch: "1",
tween:[
{
position: {lat: 35.778056, lng: -78.63903579999999},
pov: {heading: 183.5, zoom: 1, pitch:1},
interval:2000
},
{
position: {lat: 35.7770258, lng: -78.63929150000001},
pov: {heading: 180, zoom: 1, pitch:1},
interval:2000
},
{
position: {lat: 35.775581, lng: -78.639395},
pov: {heading: 180, zoom: 1, pitch:1},
interval:2000
},
{
position: {lat: 35.775581, lng: -78.639395},
pov: {heading: 105, zoom: 1, pitch:1},
interval:2000
},
{
position: {lat: 35.775581, lng: -78.639395},
pov: {heading: 0, zoom: 1, pitch:1},
interval:2000
}
]
} ) } )
.googlemap({ .googlemap({
start: 0, // seconds start: 0, // seconds
@ -37,16 +92,32 @@
target: "map2", target: "map2",
location:"boston", location:"boston",
zoom: 15 zoom: 15
} )
.googlemap({
start: 0, // seconds
end: 20, // seconds
type: "STREETVIEW",
target: "map1",
lat: 43.665429,
lng: -79.403323,
zoom: "1",
heading: "0",
pitch: "1"
} ); } );
}, false); }, false);
</script> </script>
</head> </head>
<body> <body>
<h1 id="qunit-header">Popcorn google Map Plug-in Demo</h1> <h1 id="qunit-header">Popcorn google Map Plug-in Demo</h1>
<p> A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.</p> <p> A Google Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.</p>
<p> A Google StreetView Map displaying Toronto, Ontario will appear at 0 seconds and disappear at 20 seconds.</p> <p> A Google Map Streetview image of Toronto, Ontario will appear at 0 seconds and disaapear at 20 seconds</p>
<p> A Google Map displaying Boston will appear at 0 seconds and disappear at 30 seconds.</p> <p> A Google Map displaying Boston will appear at 0 seconds and disappear at 30 seconds.</p>
<p> A Google Map Streetview tweening from Oakville, Ontario to York University will appear at 0 seconds and disaapear at 40 seconds</p>
<p> 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</p>
<p> A Google Map Streetview tweening from Buffallo to Ottawa will appear at 0 seconds and disaapear at 40 seconds</p>
<div> <div>
<video id='video' <video id='video'
controls controls
width= '250px' width= '250px'
@ -64,10 +135,14 @@
</video> </video>
</div> </div>
<div style="width:1000px">
<div style="width:2000px">
<div id="map" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div> <div id="map" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
<div id="map1" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div> <div id="map1" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
<div id="map2" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div> <div id="map2" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
<div id="map3" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
<div id="map4" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
<div id="map5" style="position:relative;float:left;width:300px;height:400px"><p>Locations in this video:</p></div>
</div> </div>
</body> </body>
</html> </html>

142
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) * -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) * -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. * -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 * Note: using location requires extra loading time, also not specifying both lat/lng and location will
* cause and error. * 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 * @param {Object} options
* *
* Example: * Example:
@ -128,6 +141,8 @@ var googleCallback;
* options variable * options variable
*/ */
start: function (event, options) { start: function (event, options) {
var that = this;
// ensure the map has been initialized in the setup function above // ensure the map has been initialized in the setup function above
var isMapSetup = function () { var isMapSetup = function () {
if (map) { if (map) {
@ -159,7 +174,8 @@ var googleCallback;
// Switch this map into streeview mode // Switch this map into streeview mode
map.setStreetView( map.setStreetView(
// Pass a new StreetViewPanorama instance into our map // Pass a new StreetViewPanorama instance into our map
sView = new google.maps.StreetViewPanorama(newdiv, {
sView = new google.maps.StreetViewPanorama( newdiv, {
position: location, position: location,
pov: { pov: {
heading: options.heading = options.heading || 0, 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); // Checks if this position along the tween should be displayed or not
sView.setPosition(p); 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({ var p = new google.maps.LatLng( rM[ i ].position.lat, rM[ i ].position.lng );
heading: rM.pov.heading, sView3.setPosition( p );
zoom: 1,
pitch: 1
});
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{ 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;
// Determines if we should use hardcoded values ( using options.tween ),
if ( !options.tween && ( options.location && options.endLoc) ){ // 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 // Create an array to store all the lat/lang values along our route
var checkpoints = []; var checkpoints = [];
// Creates a new direction service, later used to create a route
var directionsService = new google.maps.DirectionsService(); 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 = { var request = {
origin: options.location, origin: options.location,
destination:options.endLoc, destination: options.endLoc,
travelMode: google.maps.TravelMode.DRIVING travelMode: google.maps.TravelMode.DRIVING
}; };
directionsService.route(request, function(response, status) { // Create the route using the direction service and renderer
if (status == google.maps.DirectionsStatus.OK) { directionsService.route( request, function( response, status ) {
directionsDisplay.setDirections(response);
showSteps(response); if ( status == google.maps.DirectionsStatus.OK ) {
directionsDisplay.setDirections( response );
showSteps( response, that );
} }
}); });
function showSteps(directionResult) { function showSteps( directionResult, that ) {
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())); // 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; // Check to make sure the interval exists, if not, set to a default of 1000
tween( checkpoints[i], tmr ); options.interval = options.interval || 1000;
} tween( checkpoints, 10);
} }
} }
else { else if( options.tween ){
for ( i = 0; i < options.tween.length; i++ ) {
tmr = tmr + options.tween[i].interval; // Same as the above to stop streetview maps from overflowing into one another
tween( options.tween[i], tmr ); 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 );
} }
} }
} }