Basic Tutorial

This tutorial walks you through all the basics of GermaniumWeb API. We recommend going through this tutorial once because it will introduce you to most of the API in one sitting. The finished tutorial will look similar to this.


Marking Locations

You just learned how you can interact with a loaded building using the BBL. Next, let us see how you can add information to it. GermaniumWeb allows you to mark locations using placemarks. You can add a name, a description, and a 'more info' URL to a placemark. This way, you can tell the user of your web application where, say, a shop is located in a shopping mall.

Let us begin by creating a basic placemark.

Creating a Placemark

var staircaseMark = germ.CreatePlacemark("Staircase", "In case of fire, use this.");

Of special note is the third line. You will not see a Placemark you've created until you add it to the scene by calling germ.AddPlacemark(staircaseMark). You can click a placemark to see its name and description. Here is how the placemark you just created looks:

The placemark we have just created.

Notice that the placemark we just created is not properly located at the staircase. We did not specify its location when we created it, so GermaniumWeb simply puts it at the origin (0, 0, 0). Let us now reposition the placemark properly.

Repositioning the Placemark

var pmark = germ.GetPlacemarkByIndex(0);
pmark.GetGeometry().SetPosition(0, 4.209, -28.309);

Finally, you may want to change the placemark color and size to make it easier to spot. You can do so as follows.

Changing Placemark appearance

// create a new style
var geoStyle = germ.CreateDiamondStyle();
geoStyle.SetColor(0, 250, 255, 200);	// specify color as RGBA
var scale = 5;
geoStyle.SetWidth( scale * geoStyle.GetWidth() );		// scale up size
geoStyle.SetUpperHeight( scale * geoStyle.GetUpperHeight() );
geoStyle.SetLowerHeight( scale * geoStyle.GetLowerHeight() );

// set the style to placemark
var entrMark = germ.GetPlacemarkByIndex(0);

Here is the placemark's final look.

The placemark after changing color and size.

In this tutorial, we only customize the appearance of 3D diamond point placemarks. GermaniumWeb provides 2 other visual appearance for point placemarks: 3D arrow and 2D icon. They are available from API version 1.1 and newer. You can learn how to use them in the Placemark Properties article.

In addition, there are 2 other types of placemark available in API version 1.3 and newer: line string and polygon. You can customize their appearance using line style and polygon style respectively.

You may want to read further about placemarks in the API documentation:


This concludes the Basic Topics tutorial. You can have a look at the finished application and compare it to yours.

Next, you may want to:

Retrieved from ""

This page has been accessed 289,465 times. This page was last modified on 19 January 2010, at 07:24.



API Key Registration

Developer Guide
- Introduction
- Buildings
- Point Placemarks
- Line & Polygon      PlacemarksUpdated
- Model Placemarks New
- HTMLBoxes New
- Eye Control
- Clip Planes
- Events
- Coordinate System
- Navigation Modes
- Options

API Documentation

- Applications Gallery
- Hello Germanium
- Interactive samples

More Resources
- API Release Notes
- Developer FAQ
- "A Beginner's Guide" slides
- Training Materials
- Icon Gallery
- Sample Buildings
- BBL Tree

Report Bugs