Putting 3D Google Maps on the Web (using Flash 10)

April 18, 2009

Intro

To this point, I’ve been putting Google Maps into Air applications due to the Flash Sandbox issue encountered in PV3D (discussed in a previous post). But in CS4, guess what, it’s not an issue. They go right on the web as you can see from the demo below:

Google Map in 3D on the Web

Google Map in 3D on the Web

Demo

Source

Discussion

Now here is how you do it, and it’s so simple you will not believe it. Use the code below to put your map into a movie where it’s free to move freely in 3D.

movie.addChild(map);

Placing a Google Map on a CS4 Plane is easier in Flex 4 (Gumbo) than it is in PV3D. All you do is throw your map into a movie clip using the code below, and then center it to get your map pivot right. The code snippet below sets your map in a movie clip, centers its pivot, sets map controls, places your movie in a Flex canvas, and centers your movie on the stage.

//Place your map in a movie so you can position its pivot
movie.addChild(map);

//Set your map pivot
map.x=-map.width/2;
map.y=-map.height/2;

//Add Map Controls
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());

//Put your movie in a Flex Canvas
mapHolder.rawChildren.addChild(movie);

//Center your Movie
movie.z=0;
movie.x=450;
movie.y=300;

The map also has two additional Flex components; a button, which stops it from spinning and a slider, which adjusts its speed and direction of rotation.

This is the great power of CS4 over PV3D. You can now bring native Flex components into your 3D environment in conjunction with your 3D objects. Bringing Flex components into PV3D is a difficult task and requires the use of the draw BitmapData feature. But with CS4 it occurs natively, and those components can be manipulated in 3D as well.

Hey that’s it, how crazy can that be! And all the controls and buttons are fully functional and in the right place.

Note: You could have just rotated the map directly, but you put it in a movie to control positioning and its pivot point.

The rest of the code is shown in the link below and discussed in greater detail in Chapter 7 of the book.

Read the rest of this entry »


CS4 Google Maps Project – a money maker!

March 8, 2009

Intro

It seems like most sites like mine give you basic examples of how to do things but never take you to the next level – the level that makes money. This project, though not complete, closed the deal on a contract and is great starter code for any one doing Google maps.

It ‘s an air project, and the code is a little disorganized due to the short time frame. Basically, I had written the same project in Papervision3D but my buttons were off, but in CS4 everything is right on. So in about four hours I transferred this project from Papervision3D to CS4.

Code was flying everywhere and by the end of it I had to spray my keyboard down with liquid nitrogen … it was smok’n red hot …

The contract crew walked into the meeting with a good working prototype, where others were not even close, and guess what … they got funded … and that’s the way to do it. Give your clients something that works (a few bells and whistles) … not just a design … and you’ll win every time (unless the other contractor is the boss’s brother – it happens.).

Landmark Covington

Landmark Covington Air Project

The original Papervision3D code was Wii controlled and I left the Wii code inside the project just in case I needed to reactivate it. Check out my Wii Post to learn how to create a Wii controlled project.

Source 200+ Megs

YouTube

Discussion

Here are the highlights of its development.

1. Use of Flex custom mxml components and Cairngorm to control pop-ups with images and audio

Flex Popup Component

Flex Popup Component

2. removedFromStage trick to close audio after clicking the close button of the maps pop up (same component can be used for video pop-ups as well).

MXML

<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; width=”482″ height=”222″ creationComplete=”MyImageBox()” removedFromStage=”leaveStage()” horizontalScrollPolicy=”off” verticalScrollPolicy=”off” fontSize=”12″ backgroundColor=”#FFFFFF” alpha=”1.0″ backgroundAlpha=”0.0″>

ActionScript

private function leaveStage():void{

if(soundChannel){

soundChannel.stop();

SoundBtn.label=”Play Audio”;

}}

3. Primitive swapping using remove and add child

//movieParent.
movieParent.removeChildAt(0);
movieParent.addChild(tunnel);

4. Location navigation using a Combo Box including animated map directions

Navigation Menu

Navigation Menu

5. Application.application.map trick to add Google Maps to Flex

movie.addChild(Application.application.map);

Map in 3D

Map in 3D

6. XML data file to hold pop-up info including audio location.

XML for Marker Pop-up Box

XML for Marker Pop-up Box

I could spend 1 week going through every detail, but the stuff above was the stuff I had to think about! Hope it helps…

Sorry about the messiness of the code. Like I said, it was pretty short order. Once the project was completed, I didn’t have time to rework it. But if you’re working on a project like this one…this code will be very helpful to you. The real key to making this thing work was creating custom Flex components and using Cairngorm to talk to them. Google maps pops them up, and you can put anything in them: audio, video, or 3D.

I’m off to the next job. This coming week one of my programs is being presented in Austria (I haven’t written it yet…of course). But my graphic designers have been working like crazy building the assets for it.

I write about 5000 “working” lines of code a week now (that’s about two projects a day)…but that’s because my code base is growing. The more code I have, the more I can write…that’s right…this number includes cutting and pasting code from one project to another.

Once the Austria project is completed, I’ll post it so you can see how these larger (money making) projects go. Have a great week…


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

December 16, 2008

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.

Read the rest of this entry »


Follow

Get every new post delivered to your Inbox.