#442 ✓ staged
Scott Downe

google maps needs a way to animate (tweening) on a path of lat and lngs

Reported by Scott Downe | March 21st, 2011 @ 04:40 PM | in 0.6

Just an idea, with google maps being able to display a map that moves or scrolls between two or more points while being displayed. This is most effective when displayed with street view as you can then walk the streets based on a path.

Comments and changes to this ticket

  • annasob

    annasob March 24th, 2011 @ 04:28 PM

    • Milestone changed from 0.5 to 0.6
    • Milestone order changed from “40” to “0”

    Pushing to 0.6

  • annasob

    annasob April 15th, 2011 @ 06:34 PM

    • Tag set to plugin
  • danman

    danman April 16th, 2011 @ 02:50 PM

    • Assigned user set to “danman”

    http://matrix.senecac.on.ca/~dsventura/streetviewTweening.html

    Something like this? Goes from Keele and York Blvd to Seneca on Pond Rd.

  • Brett Gaylor

    Brett Gaylor April 16th, 2011 @ 07:42 PM

    Yeah, doesn't seem to use popcorn, though?

    Another demo that does this is:
    http://fox-gieg.com/stuff/market_popcorn/

  • David Seifried

    David Seifried May 11th, 2011 @ 01:44 PM

    • State changed from “new” to “assigned”
    • Assigned user changed from “danman” to “David Seifried”
  • Cole Gillespie

    Cole Gillespie May 12th, 2011 @ 01:51 AM

    I have been doing ALOT of google maps work lately, dseif you mind if I tackle this one? I have been neck deep in the googlemap plugin and I think I may have a good way of doing this.

  • Cole Gillespie

    Cole Gillespie May 12th, 2011 @ 04:15 AM

    live view => http://www.colegillespie.com/popcorn/plugins/googlemap/popcorn.goog...
    forked view => http://bit.ly/jHWkVK

    basically i added an option "tween" then i set the properties for each tween

          tween:[ 
                    {
                        position: {lat: 35.778056, lng: -78.63903579999999}, 
                        pov: {heading: 183.5, zoom: 1, pitch:1}, 
                        interval:1000 
                    },
                    {   position: {lat: 35.7770258, lng: -78.63929150000001}, 
                        pov: {heading: 180, zoom: 1, pitch:1},
                        interval:1000
                    },
                    {   position: {lat: 35.775581, lng: -78.639395}, 
                        pov: {heading: 190, zoom: 1, pitch:1},
                        interval:1000
                    }, 
                    {   position: {lat: 35.775581, lng: -78.639395}, 
                        pov: {heading: 90, zoom: 1, pitch:1},
                        interval:1000
                    },
                    {   position: {lat: 35.775581, lng: -78.639395}, 
                        pov: {heading: 0, zoom: 1, pitch:1},
                        interval:1000
                    }   
                ]
    

    then i loop through those in the plugin and move them around on the streetview.

              var tween = function(rM, t){
                setTimeout( function () {
                    console.log(rM);
                    var p = new google.maps.LatLng( rM.position.lat, rM.position.lng );
                    sView.setPosition(p);
                    sView.setPov({heading: rM.pov.heading, zoom: rM.pov.zoom, pitch: rM.pov.pitch});
                }, t);
    
              }
              tmr = 0
              for(i=0; i < options.tween.length ; i++){
                tmr = tmr + options.tween[i].interval;
                tween(options.tween[i], tmr);
              }
    

    in this test case i am traveling down the main street of my hometown, when i get to the end i turn around...

    i need to add some more options to allow for panning as well. google offers alot of cool shit with street view. but that should take care of the tweening.

  • David Seifried

    David Seifried May 12th, 2011 @ 09:29 AM

    Hey Cole,

    Yea thats cool that your taking this over, I was working on it a bit yesterday, but didn't get too far. As far as the plugin goes, I was working with part of the api that would generate a route for you (which consisted of numerous lat+lng values) and would allow the user to enter a start and end location and "tween" along the route that was generated. I think something like that is neccissary, as inputting a ton of lat and lang values can start to get quite bulky in the html file, and many user's may not know all of these values, or have to patience to figure them out.

    Using what I was looking into the user could enter a start and end lat+lang, or a start and end string of two locations, such as start: "Toronto, On" end: "Ottawa, On" and so on. I like how you added a new option tween that has its own parameters.

    Here's a quick example of what I was working on, let me know if you want to tackle this, or if you mind if I add this in to what you've done so far.

    
    panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas"), startOptions);
    
        var directionsService = new google.maps.DirectionsService();
    
        var directionsDisplay = new google.maps.DirectionsRenderer(panorama);
    
        var request = {
          origin:new google.maps.LatLng(43.775176, -79.493937),
          destination:new google.maps.LatLng(43.770888, -79.498272),
          travelMode: google.maps.TravelMode.DRIVING
        };
       
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            showSteps(response);
          }
        });
    
      
        function showSteps(directionResult) {
          for (var i = 0; i < directionResult.routes[0].legs.length; i++) {
            for (var j = 0; j < directionResult.routes[0].legs[i].steps.length; j++) {
                getSteps(directionResult.routes[0].legs[i].steps[j].start_point, directionResult.routes[0].legs[i].steps[j].end_point);
            }
          }
        }
    

    This will give you all the lat+lng values for each step of the route, which I then pass to another function to do all of the displaying like you did and such.

    Heres a link to what I was referencing: http://code.google.com/apis/maps/documentation/javascript/services....

  • Cole Gillespie

    Cole Gillespie May 12th, 2011 @ 11:38 AM

    I really like where you are heading with this actually. Your method is much more user friendly and cleaner than mine. My method or more geared toward a developer who would really want to get down and customize their tweens. So maybe we should combine the two and give the user either option. What do you think?

  • David Seifried

    David Seifried May 12th, 2011 @ 12:39 PM

    Yea that sounds like a great idea, im actually going to be in a meeting from 1:00 - ?, but after that iill start trying to hack togethor my code and yours and see what comes about. Are you in the popcorn irc channel?

  • David Seifried

    David Seifried May 17th, 2011 @ 12:22 PM

    • State changed from “assigned” to “peer-review-requested”
    • Assigned user changed from “David Seifried” to “annasob”

    Here is the commit/tree for the tweening stuff. Credit goes out to cole for all the work he did with this, as well as Dan for his initial demo where I got a lot of ideas from.
    Commit: https://github.com/dseif/popcorn-js/commit/ec4cba2f0d108740490e54e2...
    tree: https://github.com/dseif/popcorn-js/tree/ec4cba2f0d108740490e54e2c9...

  • Rick

    Rick May 17th, 2011 @ 12:32 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “annasob” to “David Seifried”

    Please restore the indents to 2 space soft tabs (spaces, not tabs). Thanks! :D

  • David Seifried

    David Seifried May 17th, 2011 @ 12:56 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “David Seifried” to “annasob”

    Hey, i think i fixed the spacing issue, heres the new commit,
    https://github.com/dseif/popcorn-js/commit/830bd72402f2481c0c1c77f0...
    Also, cool if I assign this to you for review rick?

  • David Seifried

    David Seifried May 17th, 2011 @ 12:57 PM

    • Assigned user changed from “annasob” to “Rick”
  • Rick

    Rick May 17th, 2011 @ 01:59 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Rick” to “David Seifried”

    global var leak: sView

    This might help to show what's going on with the whitespace and indentation stuff: http://gyazo.com/2b11ce9a848fc6065649e03bf21a1211.png

    You'll need to run this through the lint command, it's not passing :\

    Don't get discouraged, we'll nail all this down as a team.

  • David Seifried

    David Seifried May 17th, 2011 @ 02:47 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “David Seifried” to “Rick”

    Hey Rick,

    Thanks for finding that, gonna get in the habit of linting before asking for review now.

    Commit: https://github.com/dseif/popcorn-js/commit/11bb670d925e0aff500e23f0...

  • David Seifried

    David Seifried May 17th, 2011 @ 03:31 PM

    Fixed some more style issues I saw, this hopefully will be the last style fix haha.
    commit: https://github.com/dseif/popcorn-js/commit/378bdf2f49f933f745c55431...

  • Scott Downe

    Scott Downe May 17th, 2011 @ 03:53 PM

             var that = this;
    
    +        var sView;
    

    should be:

            var that = this,
                sView;
    
    if( typeof options.tween === "object" ){
    

    should be:

    if ( typeof options.tween === "object" ) { // notice I added TWO spaces
    
    if( that.media.currentTime >= ( rM[ i ].interval*( i+1 ) )/1000 &&
    

    should be

    if ( that.media.currentTime >= ( rM[ i ].interval*( i+1 ) ) / 1000 &&
    

    That's three spaces added.

  • Rick

    Rick May 17th, 2011 @ 06:58 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Rick” to “David Seifried”
  • David Seifried

    David Seifried May 18th, 2011 @ 11:12 AM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “David Seifried” to “Rick”
  • Rick

    Rick May 18th, 2011 @ 12:52 PM

    • State changed from “peer-review-requested” to “under-review”

    Merge conflicts:

    CONFLICT (content): Merge conflict in plugins/googlemap/popcorn.googlemap.html
    CONFLICT (content): Merge conflict in plugins/googlemap/popcorn.googlemap.js

    Scott or Anna can you verify?

  • Scott Downe

    Scott Downe May 18th, 2011 @ 01:16 PM

    It is this commit plus all the style changes that is causing the conflict: https://github.com/annasob/popcorn-js/commit/ad7a07064a81d6085eb4f9...

    Dave, can you please fix the conflicts?

  • David Seifried

    David Seifried May 18th, 2011 @ 01:57 PM

    • State changed from “under-review” to “peer-review-requested”

    Yea sorry about that, everything is merged fine now with the most up to date version of 0.6, should be fine.
    https://github.com/dseif/popcorn-js/tree/t442

  • Rick

    Rick May 18th, 2011 @ 02:15 PM

    • State changed from “peer-review-requested” to “super-review-requested”
    • Assigned user changed from “Rick” to “Scott Downe”

    This is SO FULL OF WIN!

    Tested: googlemap test suite;

    Passing in:

    • FF 3.6, 4.x, 6.x

    • Chrome 11, 12, 13

    Failing in:

    *

  • annasob

    annasob May 18th, 2011 @ 02:25 PM

    This looks good to me.

    • lint passes
    • demo and unit tests work in Fedora: Chrome, Firefox 3.6 and 4.0

    Scott can you look to ensure the changes u requested are in

  • Scott Downe

    Scott Downe May 18th, 2011 @ 02:44 PM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “Scott Downe” to “David Seifried”

    We still need to change:

            var that = this;
            var sView;
    

    to

            var that = this,
                sView;
    
    if ( typeof options.tween === "object" ) { // notice I added TWO spaces
    

    should be

    if( that.media.currentTime >= ( rM[ i ].interval*( i+1 ) )/1000 &&
    

    this:

    if( that.media.currentTime >= ( rM[ i ].interval*( i+1 ) )/1000 &&
    

    should be

    if ( that.media.currentTime >= ( rM[ i ].interval * ( i + 1 ) ) / 1000 &&
    
  • Scott Downe

    Scott Downe May 18th, 2011 @ 02:46 PM

    Actually, there are a bunch of style errors like:

    if(){}
    

    instead of:

    if () {}
    

    and spaces around mathematical operators.

  • Scott Downe

    Scott Downe May 18th, 2011 @ 03:20 PM

    • State changed from “review-needs-work” to “review-looks-good”

    Awesome!

    sr+

  • Scott Downe

    Scott Downe May 18th, 2011 @ 03:21 PM

    • Assigned user changed from “David Seifried” to “annasob”
  • David Seifried

    David Seifried May 18th, 2011 @ 03:35 PM

    Hey,

    Actually updated this ticket before I asked Scott to review it, so here is the commit:
    https://github.com/dseif/popcorn-js/commit/eb545ff8576fc12148f1a51d...

  • annasob

    annasob May 18th, 2011 @ 03:35 PM

    • State changed from “review-looks-good” to “staged”

    Staged in annasob/popcorn-js commit

  • Matt

    Matt October 31st, 2011 @ 02:31 PM

    is it possible to tween in views other than STREETVIEW? And if not, how hard would it be to add that functionality? We cna try to do that ourselves but I don't know the google maps api well enough to know what's possible. Thanks much!
    matt

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Tags

Pages