Google Earth Text Render Demo (Don't use on Chrome!)

The Google Earth API does not provide text rendering to the screen. This demo shows how a simple Javascript class can provide this functionality.

Type text in here


Speed up the animation

Browser makers are making plugin communication with the browser more secure at the cost of SPEED. Click here to read what you can do to speed up Firefox4 and later. As far as I know IE runs fine.

Don't bother with the Google Chrome browser. Despite google Earth and Chrome being from the same company, they won't run fast together and we are talking a factor 10 slower!

"How it all works

Not so long ago a new feature was added to the Google Earth API. The KMLIcon now has the ability to do some basic texture mapping that can be used to specify a selection of an icon. These commands are setH() and setW()

Helicopters was the first time where I used a poor mans version of dynamic text rendering in Google Earth. In that case each letter was a separate bitmap which caused a scentence to slowly materialise as each letter was loaded. Now with texture mapping we can render text better and faster as you can see above.

Not only can text be rendered to the screen quickly, it is also possible to use the mapping feature to run short texture animations as ground overlays or screen overlays


We created several new java classes for this demo. First of all there is a textureAtlas. This object is given a URL to a bitmap and the width and size of the bitmap. The textureAtlas manages a collection of texture coordinates that can be defined individually or generated automatically based on a grid.

The above image is a 5 x 5 texture atlas. Texture coordinates for this atlas are easily generated with the following code:

The above created texture atlas holds no klm specific objects. It only manages a collection of texture coordinates to the same bitmap.


We will also need an animation object that uses the texture atlas to cycle through the images. For this we created the animatedIcon class. By creating an animated icon we can animate any KML object that uses a kmlIcon as a graphic. This includes groundOverlay, screenOverlay but also placemarks can be animated that way.

For the animatedIcon to work we need to pass it a real kmlIcon object.


You could just create a kmlIcon or pass one in that is already associated with a KMLgroundOverlay. In order to keep things easy I have combined the creation of groundOverlay and animatedIcon objects into a single object. The animatedGroundOverlay. For this explosion demo a new animatedGroundOverlay is added to an array everytime the user clicks on Google Earth.

In the above code a new animatedGroundOverlay object is created passing in textureAtlas, fps, loopCount, latitude, longitude, height, width, angle and drawOrder

The parameter names speak for themselves. Note that a lookCount value of 0 causes the loop to be repeated indefinetely and the width and height are in meters. The animation is frame-rate independent meaning that a 10 frame animation running at 10 fps will be completed in one second regardless of the render frame-rate.

However, you will still not see anything happening on the screen. For this to happen the animatedGroundOverlay needs to be pushed along by frequently calling animatedGroundOverlay.update(deltaTime). This can be done using the FrameEnd eventhander from Google Earth or one of the javascript timer objects.


Rendering text also uses the textureAtlas object. In this case the texture is a bitmap containing all the letters required for text rendering.

There are many good font rendering applications out there. The one I like to use is the Fancy bitmap generator You can not automatically genrate the texture coordinates and each letter needs to be carefully mapped individually.

The parameters are: name, xOffset, yOffset, width and height in pixels. Keep in mind that the pixels are counted from bottom left to top right. I like to prepare these maps in separate javascript units one for each font.

Now we need another object that can render the text to the screen. For this I wrote the textRenderer object. This renderer dynamically creates the screen overlays required for each letter.

The textRenderer object is passed a textureAtlas (akbarFont) which in the case of a text renderer consists of image tiles each representing a character. The renderer sizes text in UNITS_FRACTION. The textRenderer is given a size of 80 characters in this case using the akbarFont textureAtlas. This cass knows how to place screenOverlays on the screen and render text. Still some more refinement can be done as to enable text rendering on ground overlays.

In your application you simply render text by calling

The above example demonstrates the speed of the text renderer and the use of the animation object. If only we could set the texture mapping width and height to more than the bitmap size and be rewarded with tiling textures.

From here it is a matter of artwork to visualise smoke plumes, ship wakes, developing cloud layers etc. At some stage we will need to see a new feature in the KML spec that allows looping of update instructions


©2009 All Rights Reserved  •  by PlanetInAction.com