Google Map Wormhole in Gumbo Air (Flex 4)

Intro

I’m working on a huge Google map project for a seminar I’m doing next Tuesday, (and given that I have much time on my hands – right!), I could not resist creating this Google Map wormhole. The animation is created by iterating the map coordinates (longitude and latitude forward), and uses the Tunnel class developed by Petri Leskinen on Pixelero http://pixelero.wordpress.com/.

I don’t iterate uvtData as is done on Pixelero, but longitude and latitude coordinates of the Google map. The change is picked up by drawing the iterated movie into a bitmapdata object and throwing that on to the Tunnel class.

It’s actually map data coming at you (not just a jpeg being recycled).

Google Wormhole in Gumbo

YouTube

Air Source Files Click Here

Discussion

Bringing Google map data into CS4 or Papervision3D is really easy, as discussed in an earlier post (Google Map on a Papervision Primitive) . In this case, I use Gumbo (Flex 4) not Papervision3D. Gumbo performs better than Papervision3D and does not distort button positions on standard Google control buttons (as Papervision3D does) – hurray!!!

Here are the steps required to get your Google map Wormhole working!

Step 1: Create a movie clip to add your Google map to

movie.graphics.beginFill(0xFFFFFF);
movie.graphics.drawRect(0,0,300,300);

Step 2: Add the Google map to your movie

movie.addChild(Application.application.map);
movie.graphics.endFill();

Step 3: Create a bitmapdata and draw your movie into it

_bmpd=new BitmapData(300,300, false);
_bmpd.draw(movie);

Step 4: Instantiate the Tunnel class (adding in the bitmapdata material) and add the tunnel to a canvas container on your Flex stage.

tunnel = new Tunnel(_bmpd, 800.0, 600.0, 32, 32);
mapHolder.rawChildren.addChild(tunnel);

Step 5: Redraw the movie and iterate Latitude and Longitude coordinates in the onEnterFrame animation loop.

_bmpd.draw(movie);

myLat=myLat-.0002*sin;
myLng=myLng-.0002;

To see the complete code click the more button below