Styles

Overview

The size, color and opacity of icons and lables in KML can all be specified. They are defined as child elements of <IconStyle> and <LabelStyle>. Similarly, the properties of description balloons can be defined using <BalloonStyle>. How features are displayed in the list (in the sidebar) can be defined through <ListStyle>.

New KML: <BalloonStyle> <bgColor> <displayMode> <hotSpot> <Icon> <IconStyle> <key> <labelColor> <LabelStyle> <listItemType> <ListStyle> <Pair> <scale> <Snippet> <Style> <StyleMap> <styleUrl> <text> <textcolor>

Tutorial

Reference IDs

(1) Create a Placemark at Buckingham Palace (Latitude 51°30'3.53"N, Longitude 0°8'31.36"W).
(2) Name your <Placemark> I see the Queen and save the KML as BuckHouse.kml.
(3) Open BuckHouse.kml in a text editor.
(4) Rename the <Document> as Buckingham Palace.
(5) Delete all content between and including <LookAt>.
(6) Look at the KML and note the use of "id" within the <Style> element. All elements derived from Object can have an id assigned to them (it is a standard XML ID). Use of id allows defined <Style> elements to be shared by multiple objects, e.g., a collection of placemarks. This is done using <styleUrl>.

Icon and Label Styles

(7) You should notice that the KML actual defines two sets of <Style></Style> elements. Delete one of them (and the contents within) and rename id of the other as "Lizzy".
(8) Delete all content between and including <StyleMap> and <Hotspot>.
(9) Identify the <styleUrl> and change the referenced id to Lizzy. Note the use of the # symbol.
(10) Save the file as QueenHome.kml and view in Google Earth.
(11) Open the properties dialog box and select the Style,Color tab.
(12) Change the values of color, scale, opacity for both the label and icon.
(13) Save the file as QueenHome.kml (overwrite) and open in a text editor.
(14) Identify the new child elements you have added to style. Also note the use of <href> linking to an image used as the <Icon>.

Color in KML

Color and opacity (alpha) values are expressed in hexadecimal notation. The range of values for any one color is 0 to 255 (00 to ff). For alpha, 00 is fully transparent and ff is fully opaque. The order of expression is aabbggrr, where aa=alpha (00 to ff); bb=blue (00 to ff); gg=green (00 to ff); rr=red (00 to ff).

e.g, blue color with 50 percent opacity: 7fff0000

(15) Change elements in <IconStyle> to use this icon (http://earth.images.alaska.edu/kml/images/flag.gif) with a size of 4.0.
(16) Change elements in <LabelStyle> so the label is red with 50% opacity.
(17) Save the file as QueenHome.kml and view in Google Earth.
(18) It is also possible to change the position within the icon that is "anchored" to the <Point> specified in <Placemark>. This is done within <hotSpot>. Read the KML documentation on this element and experiment.

Rollover Effects

(19) Move the cursor over the placemark icon and observe closely what happens
(20) The <Placemark> is making use of the different styles (with different icon sizes) by mapping them to the same <Placemark>. Open BuckHouse.kml in a text editor.
(21) Open QueenHome.kml in a text editor and copy the style you defined as id="Lizzy".
(22) In BuckHouse.kml replace (by pasting over) the style with id="sh_ylw-pushpin" with the Lizzy style.
(23) The mapping of styles is done by <StyleMap>. The id of StyleMap is then referenced by the <styleUrl> child in <Placemark>. Change the appropriate value of the <styleUrl> child element in <StyleMap> to Lizzy.
(24) Change <Document> and <Placemark> names as you did for QueenHome.kml.
(25) Save your file as BuckHouse.kml and open in Google Earth.
(26) Move the cursor over the placemark's icon and check that the style changes.

Description Balloon Styles

(27) Open QueenHome.kml in a text editor.
(28) Similar to <IconStyle> and <LabelStyle> add a <BalloonStyle> element into <Style>.
(29) Add <bgColor> and <textColor> as child elements of <BalloonStyle>. Add values for color and opacity according to the conventions described before.
(30) Save and view in Google Earth. This is an example of KML that cannot be edited through Google Earth client GUIs.

Removing the Driving Directions

The <text> element defines to be displayed in the description balloon.

If no text is specified, Google Earth draws the default balloon (with the Feature <name> in boldface, the Feature <description>, links for driving directions, a white background, and a tail that is attached to the point coordinates of the Feature, if specified).

To prevent the driving directions links from appearing in a balloon, include the <text> element with some content, or with $[name] and/or $[description]. These will include the content found within the placemark's <name> and <description> elements.

Example:

Sidebar Description

<Snippet> provides a short description in the Places panel under the name of the feature. If <Snippet> is not supplied, the first two lines of the are used. In Google Earth, if a Placemark contains both a <description> and a <Snippet>, the <Snippet>appears beneath the Placemark in the Places panel, and the <description> appears in the Placemark's description balloon. This tag does not support HTML markup. <Snippet> has a maxLines attribute, an integer that specifies the maximum number of lines to display.

List Style

(31) Create a folder in My Places
(32) Add 3 or more placemarks to this folder
(33) Open the folder's properties dialog box and check the Show contents as option box
(34) Try selecting different placemarks in the folder
(35) Save as radio.kml and open in a text editor
(36) Within the <ListStyle> element there are now two new child elements shown:

<bgColor> Specifies a background color for the <Snippet>

<listItemType> Specifies how a Feature is displayed in the list view. Possible values are:

check (default) - The Feature's visibility is tied to its item's checkbox.
radioFolder - When specified for a Container, only one of the Container's items is visible at a time
checkOffOnly - When specified for a Container or Network Link, prevents all items from being made visible at once-that is, the user can turn everything in the Container or Network Link off but cannot turn everything on at the same time. This setting is useful for Containers or Network Links containing large amounts of data.
checkHideChildren - Use a normal checkbox for visibility but do not display the Container or Network Link's children in the list view. A checkbox allows the user to toggle visibility of the child objects in the viewer.

Exercises

(A) Create a radioFolder containing five placemarks that label five different countries. Give the placmarks icons/labels of varying sizes and colors. When you pass your cursor over the placemark icons they should change to that country's flag.

(B) For the placemarks created in (A) remove the to/from directions from the description balloons. Make all description balloons grey; containing the placemark's (country's) name in white and a photo from that country.