Plotting GeoLocation points on a 3D Earth model

VIEW THE DEMO

DOWNLOAD THE SOURCE CODE

Google Earth has put the world at our fingertips. With just a few clicks you can be looking at the street markings in Tokyo, viewing a 3D model of Uluru, or viewing your own house from space. Thanks to the Internet accessing global news, information and events is something we do every day. This tutorial will step you through the process of putting this global information into context by marking it on a 3D model of the earth.

This demo makes use of two technologies: the Away3D Lite hover camera covered here, and using the GeoCity GeoLocation service from Flex covered here. I recommend you read both articles, as this tutorial assumes you are familiar with the code required for both.

You will need to find a nice texture for the Earth model. This Google search will pull up a few options. Note that the process converting the latitude and longitude to a position on an Away3D sphere depends on the texture used. The code here assumes you are using a texture aligned like the one below (this image is included in the source code download).

We need to embed the texture inside the SWF file from the ApplicationManager class with the Embed tag.

[Embed(source="../media/earth.jpg")]

protected static const ModelTex:Class;

In the ApplicationManager onInit function we need to turn off the debug overlay that is shown in Away3D lite applications by default.

this.debug = false;

Create a new BitmapMaterial using the embedded earth texture. Set the smooth property to true to enhance the appearance of the texture.

var material:BitmapMaterial = new BitmapMaterial(Cast.bitmap(ModelTex));

material.smooth = true;

Create a new sphere, supplying the BitmapMaterial created above, and add it to the scene.

mesh = new Sphere(material, 100, 16, 12);

scene.addChild(mesh);

Create the hover camera.

hoverCamera = new HoverCamera3D(10, 100, mesh, 0, 0, EARTHRADIUS + 6000);

view.camera = hoverCamera;