Creating an Immersive User Experience
Google Earth allows you to put your content into a geospatial context. More importantly, it
allows you to tell stories. In this tutorial, you'll learn some ways to make your content
accessible, easier to navigate and more compelling.
The Google Earth Interface
There are three main ways people will interact with your KML through the Google Earth
- Places panel
- 3D map
- Your description balloons
To design an immersive experience for people viewing your content, consider the most common
path that visitors will take. Start by scanning the map in the 3D view, explore a few
placemark balloons and discover the full range of options in the Places panel. Make sure
your design starts with a solid foundation on the map itself.
Here are examples of KMLs that provide an immersive, high-quality visitor experience:
Make a Good First Impression
The first thing that most people see when they open a KML or KMZ file are the icons,
models, image overlays and polygons in the 3D view of Google Earth. It's your job to engage
them and get them interested in exploring your content. Below are some tips for making a
good first impression.
Take Snapshots of your placemarks.
Setting a good default view for your placemarks and folders is one of the most important
things you can do to ensure a good user experience.
- Double-clicking a placemarks flies you to its current default view. If you haven't
explicitly set one, this view could be too close to the placemark.
- Pick a perspective for each placemark. Don't get too close if the surrounding satellite
imagery is low-resolution; if there is high-resolution imagery, make the best of it!
- Don't always look straight down! Tilt the camera
to capture the local terrain, or match the perspective from real photos in the placemark's
- To set a placemark's default view right-click on a placemark, either
on the map or in the Places panel, and choose Snapshot view.
Don't overwhelm visitors.
Too many placemarks can be overwhelming, even for the most experienced Google Earth
visitor. Here are some ideas for keeping the number of placemarks manageable:
- Use regions to control when placemarks become visible. For help getting started with
regions, take a look at the Regions
section of the KML 2.1
Tutorial and the Avoiding Overload with
Regions tutorial on this site.
- Combining network links and regions provides a powerful method of dynamically
delivering content to visitors based on their location. Learn more in the Smart
Loading of Region-Based Network Links section of the KML 2.1
- You don't have to put everything in one KML or KMZ file. Include links to other KML or
KMZ files in your placemark balloon descriptions for the visitors to download on-demand.
Inform with your icons.
You can communicate plenty of information before a visitor even clicks a placemark. Here
are a few helpful hints for using icons effectively:
Choose colours carefully.
- Use different colors for lines, polygons, and icons to visualize data or represent
classes of locations.
See this example from the Crisis in Darfur layer which uses different colored
polygons to represent displaced people and refugee camps, as well as different colored
icons to represent partially damaged and completely destroyed villages:
- Choose colors for icons and line/polygon features that contrast against the satellite
imagery in the background.
The use of yellow lines in the Global Heritage Fund layer stands out against the
green forest in the background.
Create Balloons That Shine
Once you've got a visitor to open one of your placemark balloons, make the best of their
attention. Placemark description balloons are a great way to communicate extra information
about a particular location, but they're also a powerful tool for guiding viewers to other
placemarks and to your website.
Include an introductory placemark.
You know your content much better than anyone else, so it's easy to forget that others need
guidance to explore all of your content. Consider including an introductory placemark to
guide the use of your KML file. Highlight the most different components of your content.
Some suggestions for what to include:
- An overview of your organisation and work.
- Screenshots of the Places panel or time slider to guide visitors to the best way to
navigate your content.
- Explain the use of icons or colours used in your KML.
Here are examples of a user's guide and an introductory placemark from the Global Awareness
layer (Global Heritage Fund and Crisis in Darfur).
Keep it short and sweet.
The best balloons engage the user, offering a brief description with links to additional
information. You can always direct the user to your site for the full story or invite them
to download additional KML files with more detailed information.
Continuing this philosophy, keep your balloons to a reasonable size. Put all of your
content into an HTML table no wider than 400-500 pixels. This helps ensure that the
balloons aren't too big on small monitors and that there is a little space left for the
user to see and click back to the map.
Maintain consistent style.
A consistent look and feel in your balloons helps to orient your visitors. Get started with
some templates you can create with the Building Better Balloons
tutorial. As you develop your own designs, keep some of these tips in mind:
- Use slightly different balloon design to indicate different types of placemarks.
Consider using distinct border colours to denote environmental threat levels or programmes
on different continents. You could also use more ornate layouts for different levels of
hierarchy within your content, such as international, national, regional and local offices,
research locations or humanitarian aid projects.
- Use a header. Create a banner with your organisation's logo and either a consistent
colour or an eye-catching photo for the top of each balloon.
- Include a footer. Always put your organisation's name, a link to your website and a
copyright notice at the bottom of all your balloons. Use a grey or light colour font, so
that the footer text is accessible but not distracting.
- Use colour schemes from your organisation's website to help create a cohesive
- Take advantage of text colour. Use colour to add or diminish emphasis to titles and
- Use standard icons, such as the KML icon, if
your balloon includes links to such additional content.
Use <BalloonStyle> to
standarize you header and footer.
For an easy way to add consistent headers and footers to each of your balloons, check out
tags. These tags allow you to create an HTML template that is applied to all of your
placemarks. You can insert the descriptions unique to each placemark into the template.
This keeps the universal elements of your balloon design separate from the content specific
to each placemark.
The Santa Cruz,
Bolivia example KML shows you how placemarks can use <BalloonStyle> for the
header and the footer. (This example was modified from UNEP's Atlas of Our Changing
Use <BalloonStyle>to color
the entire balloon.
By using the <bgcolor>
tags with <BalloonStyle>, you can specify a background color for the entire balloon.
You enter 8-digit hex codes for colors, such as AABBGGRR (R - red, G - green, B - blue, A -
alpha transparency). This is different than the traditional 6-digit hex codes used in HTML
(RRGGBB). Here are two ways to choose a background color in Google Earth:
- Try the KML Colour
- If you know the HTML color code you want to use, swap the last two characters with the
first two characters, and add "FF" to the beginning to make this a fully opaque color. For
example: for HTML color: #0066CC, use FFCC6600 (FF + CC6600).
Don't Forget the Places Panel!
Although many visitors are drawn in by the 3D view in Google Earth, it's also important to
keep the view of your KML file in the Places panel organised and useful.
Use blank snippets.
Choose informative names.
- Often, when you save your KML project, Google Earth saves your features into a
container. You'll recognize a document by its icon:
By default, a document's name is the same as the name of the KML file itself. This name
is often uninformative, if not confusing. Avoid using characters that are illegal for
file names ( / ? < > \ : * | ). If you try to save a folder named "Offices: 2007"
or "Local/Regional", Google Earth won't let you save the feature. You can fix this
problem by re-opening the KML file, renaming the top-level document, and saving it,
overwriting the original file.
- Below is an example of a good and bad name for a document - "bgColor Examples" versus
Use list icons to better convey contents and purpose.
- By using <ListStyle>
you can change the default icons for folders, documents, placemarks, and other features.
- Brand your layers by using your organisation's logo for the top level documents and
folders. This technique is especially useful if you want to hide the content of a folder
but want that folder to visually represent the placemarks it contains. (See "Avoiding
clutter" below for more information about hiding the contents of a folder).
- List icons are scaled down to 16 x 16 pixels, so, for the best results, use
images with those exact dimensions.
- See the official KML 2.1
Reference and the examples below
Example: The "custom folder icon" folder uses <ListStyle>
to specify a red cross icon, informing visitors that the contents might be clinics or
Avoiding clutter: Control the behaviour of your folders.
- Keep the list view of your KML file short and organised.
- Include no more than 2-3 levels of hierarchy within your documents.
- Where exposure of certain placemarks is important, save the KML with the folders open;
otherwise, leave them closed.
- Control the contents of a folder from the list view using the and tags.
- Radio folders allow visitors to turn on only one item in a folder at a time.
- Tick Hide Children for folders to conceal their contents – a great
idea if you have hundreds or thousands of placemarks inside!
- Tick Off Only so that folders can be turned off, but not turned on
- great for folders that have lots of models or intense polygons and paths. Visitors
can't turn on everything at the same time and overwhelm Google Earth.
See the KML 2.1
and the KML 2.1
for more information, and check out the example below.
Have questions about this tutorial? Want to give us some feedback? Visit the
Google Earth Outreach Discussion Group to discuss it with others.