Google Earth Lessons

An Educational Resource for Teachers

Color Me...

Step 5 continued....

Once you have your text editor in hand you can use it to open up your kml placemark. What you will see is a bunch of html looking code like this:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<name>The Great Sphinx of Egypt</name>
<description>The Great Sphinx of Egypt</description>
<LookAt>
<longitude>31.1376421035748</longitude>
<latitude>29.97531730109229</latitude>
<range>197.0202883013975</range>
<tilt>27.35354524205621</tilt>
<heading>-140.3945943869927</heading>
</LookAt>
<styleUrl>root://styleMaps#default+nicon=0x307+hicon=0x317</styleUrl>
<Point>
<coordinates>31.13764210357481,29.97531730109229,0</coordinates>
</Point>
</Placemark>
</kml>

While this might look like HTML (hypertext markup language), it isn't. It is XML (Extensible Markup Language) and has it's own set of rules and syntax. You need to be a lot more careful with XML than you do with HTML because XML can be fussy about things like case sensitivity, how 'tags' are closed or nested and other things while HTML is a little more forgiving and will let you get away with some mistakes.

Notice how the code above begins with the <?xml... That tells Google Earth what computer 'language' is going to be spoken with the codes in the placemark. The next 'tag' (a tag is code that is inside the angle brackets < > that gives instructions to the program) tells Google Earth that it is going to be in <kml> (Keyhole Markup Language) and it is followed by the Placemark tag <Placemark>. Now skip down to the bottom and notice that the tags have a slash /. That 'closes' the tag at the top of the code. Also notice that they go in what looks like reverse order, first </Placemark> then </kml>. That is called 'nesting'. The tags define parts inside of parts, inside of parts. It might help if you think of it like the Russian dolls where one fits nicely inside the other inside the other inside the other.

What is important is the <Placemark> tag. It is called a 'Root' Element. You can only have one root element per kml file. You can have 'NESTED' elements, for instance placemarks inside of folders inside of documents, but you couldn't have something like:

<kml>
  <Placemark>
  </Placemark>
  <Folder>    <--THIS IS NOT ALLOWED!
  </Folder>
</kml>

since that would be two Root Elements in a single kml.

<kml>
 <Folder>
   <Placemark>
   </Placemark>   <-- 'Nesting' IS allowed with some Root-type elements
 </Folder>
</kml>

The next thing to understand concerns Parent-Child relationships in XML. <Placemark> is a Parent, <Style> is a Child of <Placemark> but a Parent to <BallonStyle>, <BalloonStyle> is a Parent of <color> but a Child of <Style>. For Example:

<kml> <--Tells what language is being spoken here
   <Placemark> <--Root Element
       <Style> <--A Child of Placemark
         <BalloonStyle> <--A Child of Style
            <color> <--A Child of BalloonStyle
            </color> <-- Children tags MUST begin and end inside a Parent tag. They end with the /
         </BalloonStyle>
       </Style>
       <description>This is stuff...</description> <--Parents can have more than one Child. Placemark is the Parent.
   </Placemark>
</kml>

The reason I bring all this up is because while in this tutorial we are just adding color to a single placemark, hopefully you begin experimenting with more and more ways to tinker with kml files and by learning a bit about how XML works now it will keep you from pulling your hair out trying to figure out why something isn't working. That and you won't actually have to learn XML to solve your problems/errors. Consider the preceding a 'mini hacking lesson' of sorts. If you do want to learn XML there are a number of wonderful resources out there both in book form and on the web.

In addition, Google has produced a Manual and Tutorials of sorts but in reading through it, it appears to me to be geared more towards users who have an intermediate to advanced understanding and working background with programming different kinds of computer code.The tag dictionary is a very good reference source though since it will tell you what is a Parent and what Children it is allowed to have.

But on to our Nifty Trick…

There are two sets of rules that we will be looking at. A. KML/XML rules. B. Color Rules.

A. KML/XML Rules:

The secret to creating a colored balloon is the <BalloonStyle> tag (pay close attention to capitalization, spelling and punctuation!!!).

The <BalloonStyle> tag cannot work alone. It needs three other tags to work. <Style>, <styleURL> and <color>.

Below is an example of how the <color> tag nests happily inside the <BalloonStyle> tag which itself is nestled inside the <Style> tag:

<Style id=”WhateverYouWantHere”>
   <BalloonStyle>
     <color>ff007db3</color>
   </BalloonStyle>
</Style>

In order to use your style, you need to give it a name. The name can be short or long, complicated or simple. In the example above the name given is WhateverYouWantHere. As a general rule you may wish to stay away from spaces or special characters other than numbers or letters as they may conflict with the XML or confuse Google Earth.

Once you have given your style a name you can ‘call’ for it elsewhere in the placemark code. The coding to call the style is as follows:

<styleUrl>#WhateverYouWantHere</styleUrl>

Depending on your project, the <styleURL> line like the one above will normally go just after the </LookAt> tag. Here is the code for our simple placemark after the BalloonStyle tag has been added (refer to Sphinx2.kml):

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<Style id="WhateverYouWantHere">
<BalloonStyle>
<color>ff007db3</color>
</BalloonStyle>
</Style>
<name>The Great Sphinx of Egypt</name>
<description>The Great Sphinx of Egypt</description>
<LookAt>
<longitude>31.1376421035748</longitude>
<latitude>29.97531730109229</latitude>
<range>197.0202883013975</range>
<tilt>27.35354524205621</tilt>
<heading>-140.3945943869927</heading>
</LookAt>
<styleUrl>#WhateverYouWantHere</styleUrl>
<styleUrl>root://styleMaps#default+nicon=0x307+hicon=0x317</styleUrl>
<Point>
<coordinates>31.13764210357481,29.97531730109229,0</coordinates>
</Point>
</Placemark>
</kml>

Here is what it looks like:

color balloon

If you do a copy/paste of the code above and get an error message it could be several things. The first possibility is that when it copied over it used 'stylized' quotation marks in the <Style id="...">. If so, Google Earth will say there was an error on Line 4. To fix it, use your text editor to delete the quotation marks and type them over again (that is where the UDF-8 stuff is important). Other erros might be generated because you had done something fancy to the icon instead of leaving it the default pushpin like in the picture. Later on if time permits we will produce an advanced section of this tutorial where we will deal with Mega-Fancy placemarks, several placemarks in a folder, etc.

You can now enter your basic HTML code into the placemark either in the Description box as you edit the placemark directly in Google Earth or by inserting the code into the kml code with your text editor. Be aware though that Google Earth will do funny things here:

description box

Results in:

interior color

But look what happened to the XML code in your placemark file! (refer to Sphinx3.kml)

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<name>The Great Sphinx of Egypt</name>
<description><![CDATA[<body bgcolor="#FDFFCE">   <--It inserted the ![CDATA[ coding in the Description!!
The Great Sphinx of Egypt
</body>]]></description>
<LookAt>
<longitude>31.1376421035748</longitude>
<latitude>29.97531730109229</latitude>
<range>197.0202883013975</range>
<tilt>27.35354524205621</tilt>
<heading>-140.3945943869927</heading>
</LookAt>
<styleUrl>root://styleMaps#default+nicon=0x307+hicon=0x317</styleUrl> <--What happened to YOUR styleURL???
<Style id="WhateverYouWantHere"> <--It moved your whole Style ID to under the LookAt tag!!
<BalloonStyle>
<color>ff007db3</color>
</BalloonStyle>
</Style>
<Point>
<coordinates>31.13764210357481,29.97531730109229,0</coordinates>
</Point>
</Placemark>
</kml>

If you can live with the changes and your placemark still has the colors you chose, if it doesn't error out, then, hey, why worry! The tags are still nested properly (Parent-Child) and Google Earth has added the different color inside the balloon. So it is time to move on.

Speaking of Colors...