Google Map on a Papervision Primitive (in 6 lines of code)

Intro

Putting a Google map on a Papervision Primitive is extremely easy. All you need to do is to turn the map into a Movie (using the MovieMaterial class) and then place it on a primitive. It’s really that easy! You can do it in only six lines of code given below;

1. Turn Google Maps into a Movie

movie.graphics.beginFill(0xFFFFFF);
movie.graphics.drawRect(0,0,800,600)
movie.addChild(Application.application.map);
movie.graphics.endFill();
mat = new MovieMaterial(movie, false, true,true,new Rectangle(0,0,800,600));

2. Place that movie onto a primitive

sphere = new Sphere(mat, 600, 32, 32);

In this case, we use a sphere, but you can use any primitive you want. The results are shown in the image below;

Google Map on a Primitive

Google Map on a Primitive

Discussion

Open source is a counter-intuitive concept. The success of Google maps illustrates the point. After developing a robust interface which parsed terabytes of satellite imagery and road data – they just gave it all away. And what a success and what a great resource that helps so many.

About a year ago our group decided to enter this global freeway as well by giving all our development work away – everything we do of consequence goes up on Google code and Youtube. At first, it was just an experiment. We were small and had nothing to lose. What a surprise?

As a result, we gained more global advertisement than we could ever pay for. And the job offers started pouring in. But then something happened – we found that we loved doing it. Our hearts were blessed. We didn’t care about the money or notoriety. Jesus had it right … it was better to give than receive, and man doesn’t live by bread alone …

Open source is just great fun…which makes me think…

There must be a human mechanism in the brain that equates creativity (accelerated brain chemistry) and giving (or letting go). It makes sense, letting go allows the brain to free fall up. The brain knows it’s only temporary and will die (and most likely when) – it just wants to fly (I guess that’s why we like roller coasters – it’s a brain ride). Well anyway, it works for us – we’re tripping over ourselves trying to get the next innovation out the door – who would know.

Enough of my open source propaganda (just think about it) – let’s take a look at how this puppy was made.

Procedure

I think the most important blog you could look at on this subject is Path Finder Development by Sasha Dzeletovic. They did a Papervision Yahoo maps which is actually much more complicated than what you’ll see here. I had worked quite a bit with the Yahoo Flash API last year and was delighted when Google created one. The Google API seemed to have solved many of the problems that I was having using the Yahoo API.

The only code I really needed from Path Finder was the first six lines at the beginning of this post. Everything else was just simple Papervision and the Google Flash API. Many of the complications I had with the Yahoo API just went away using Google. The real key was just converting the Map into a movie using the MovieMaterial class and placing it on a primitive. Also, handling the map display container similarly to the Path Finder article gave me full interactivity with the map – double click zoom – mouse panning – maker interactivity – and that’s really cool!

The only issue I had was that for more advanced applications I had to reprogram the Google control interfaces. Which I had to do for my Wii controlled applications anyway … more on that in upcoming posts.

YouTube – How it was made


Download (Air Application)

http://flex3cookbook2.googlecode.com/files/googlemaps.zip

Click the more button below to see the full code listing of the Google Map Air Application.

Google Map Air Application

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; xmlns:maps=”com.google.maps.*” layout=”absolute” width=”1200″ height=”800″ backgroundGradientAlphas=”[1.0, 1.0]” backgroundGradientColors=”[#9B9FAB, #05184C]“>

<maps:Map
id=”map”
key=”your key from Google goes here”
url=”your website url goes here”
mapevent_mapready=”onMapReady(event)”
width=”100%” height=”100%”/>

<mx:Script>
<![CDATA[
//Google Map Imports
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.MapMouseEvent;
import com.google.maps.controls.*;

//Papervision Imports
import org.papervision3d.view.Viewport3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.render.BasicRenderEngine;

import org.papervision3d.materials.MovieMaterial;

import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.*;

//Flash imports
import flash.display.Bitmap;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Rectangle;

import mx.core.Application;

//Properties
private var viewport: Viewport3D;
private var scene: Scene3D;
private var camera: Camera3D;
private var renderer: BasicRenderEngine;
private var sphere:Sphere;

// This is the movieclip that we’ll use as the texture.
public var movie:MovieClip = new MovieClip();
// This movieclip will be completley transparent and will hold the
// texture movieclip, then move it to the correct loaction under the mouse.
public var movieParent:MovieClip = new MovieClip();
// Button that toggles overlayed interactive map
private var showbutton:MovieClip = new MovieClip();
// A “MovieMaterial” will use a movieclip as a texture.
private var mat:MovieMaterial;
//container for easier scene manipulation
public var primitiveContainer:DisplayObject3D=new DisplayObject3D;
// This will import the file “Assets/showtex.jpg” to the project, and
// store the data in “ButtonIm”. (This is the “Show Movieclip” Button)..

//Generate the Google Map
private function onMapReady(event:Event):void {
map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
//control position
var bottomRight:ControlPosition = new ControlPosition(ControlPosition.ANCHOR_TOP_LEFT, 10, 10);
var myMapTypeControl:MapTypeControl = new MapTypeControl();
myMapTypeControl.setControlPosition(bottomRight);
map.addControl(myMapTypeControl);

//Initiate Papervision
init();
}

private function init():void {

//viewport = new BasicRenderEngine(width, height, scaleToStage, interactive);
viewport = new Viewport3D(800, 600, false,false);
pv3d.rawChildren.addChild(viewport);

//instantiates a Scene3D instance
scene = new Scene3D();
//instantiates a Camera3D instance
camera = new Camera3D();
scene.addChild(primitiveContainer);
//renderer draws the scene to the stage
renderer = new BasicRenderEngine();
movie.graphics.beginFill(0xFFFFFF);
movie.graphics.drawRect(0,0,800,600)
//movie.buttonMode=true
movie.addChild(Application.application.map);
movie.graphics.endFill();
mat = new MovieMaterial(movie, false, true,true,new Rectangle(0,0,800,600));

// mat.interactive = true;
mat.smooth=true;
movieParent.addChild(movie);
// Make it invisible.
movieParent.alpha = 0;
// Add the movieParent movieclip to the stage.
pv3d.rawChildren.addChild(movieParent);
//Add the movie to the sphere
sphere = new Sphere(mat, 600, 32, 32);

//Add the primitive to the container
primitiveContainer.addChild(sphere);

//Set the camerea
camera.rotationY=180;
camera.z=1000;

//set up enterFrame event
addEventListener(Event.ENTER_FRAME, onEnterFrame);

}

//define enterFrame Method, render the PV3D Scene and animate the primitive
private function onEnterFrame(e:Event):void
{
renderer.renderScene(scene, camera, viewport);
}

]]>
</mx:Script>

<mx:Canvas x=”62″ y=”44″ width=”923″ height=”778″ id=”pv3d”>
</mx:Canvas>

</mx:WindowedApplication>

About these ads

5 Responses to Google Map on a Papervision Primitive (in 6 lines of code)

  1. david siembab says:

    Hi mike,
    That’s pretty nifty, I was wondering though if it would be possible to make an auto-load class for the imports seeing as I am new to actionscript but not to php. probably a scandir of all the files from source with a concatenation of parent folders to child files in an array and then a regex array of the word new to ( from the actionscript file a foreach loop strcmp for every iteration in scandir array to regex array and an output of import array 1 values. Or maybe I am drinking to much coffee.

  2. david siembab says:

    Make a php class for papervision/actionscript that could read the class files and write the import section for the needed dependencies. I have been playing with php’s native directoryIterator class and I think this would be a neat way to read all the classes in papervision and the sdk and have it write a list of what depends on what. This way a person could just write what they need something to do and run this class to write the imports the script needs to function. Also with wildcards if the classes needed match the group of classes in the directory.
    Of course I could probably parse the docs but it would make more sense to have a class that goes through each and every as library file and see what it needs to function. Unless it is already out their.

  3. [...] > Google Map on a Papervision Primitive (in 6 lines of code) « Professional Papervision3D Book [...]

  4. [...] 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 [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: