Google Earth Lessons

An Educational Resource for Teachers

Color Me...

With a little work you can create beautiful placemarks that will engage your students and make you look like a real Pro or give your advanced students a bit of a programming challenge as you assign the task to them.

It takes a little more work but is well worth it when you hear the 'Ooooh's and 'Ahhh's of engaged students or your students come to you beaming to proudly show off their work.

In this tutorial we are going to turn a placemark that began like this:

plain placemark

Into a placemark that looks like this:

coloredplacemark

It is a bit tricky, as I discovered, so bear with me...

You will want to download the example files: Sphinx1.kml, Sphinx2.kml, Sphinx3.kml, TwoPrettyPlacemarks.kml

Step 1. Finding your colors.

There are two places that you are going to mess with the colors. The first is in the 'Description' box in your placemark (the cream colored background in the example above), the second is going to be in the raw XML code of the placemark .kml file (the brownish border color in the example). Not only that, but colors are treated differently in both places. In order to find your colors there are several resources out there including a very nice color combination selector at wellstyled.com that will create pleasing combinations of colors for you with the associated code you will need. You may also wish to have a 'floating' html color picker handy for sampling colors on your screen, for instance from the picture you wish to insert in your placemark. A nice little one to have around is called 'Colour to HTML' which is free (Win 2K/XP). There are many others which you can find at freedownloadscenter.com.

Step 2. Create a placemark at the location of your choice and save it as a .kml file somewhere where you can find it later. Be sure it is saved as a .kml, NOT as .kmz!

kmlsave

Step 3. Create the content for your placemark.

In the example above, the content includes the text, the picture and the link. The picture was linked from the site that was given credit in the placemark and doesn't actually reside on the hard drive of the computer the placemark was created on. To create the content you will either need to know html or use an html authoring program such as FrontPage, Dreamweaver or the free program Nvu which is available in many languages and for all computer platforms. Essentially you are creating a little web page, so design your page with the background color of your choice. If you do not choose a background color, the background will be the color of the frame of the placemark that you will set in just a little bit. As an example, the code for the content of the placemark pictured above is below. Don't be intimidated by it. Programs like Nvu create the code for you, all you have to do is copy/paste it later after doing your designing in a word processor style environment.

EXAMPLE HTML CODE:

<body bgcolor="#FDFFCE">
<p align="center"><FONT size="+3" color="#B37D00">The Great Sphynx of Egypt</FONT> <BR>
<img src="http://www.touregypt.net/featurestories/sphinx3-4.jpg"></p>
<p align="center"><FONT size="+2" color="#B37D00">To learn more about the Great Sphynx,</FONT> </p>
<p align="center"><FONT size="+1" color="#B37D00">visit<a href="http://www.touregypt.net/featurestories/sphinx3.htm"> http://www.touregypt.net/featurestories/sphinx3.htm</a></FONT></p>
</body>

Step 4. Save your web page contents for later.

Step 5. Create the custom ballon frame color.

This is the tricky part. Since you designed your webpage with a colored background, you will want a border balloon color that contrasts nicely with it, a color from the same color family (unless of course you are into wild things and wild colors :-) For step 5 you will need a good text editor. Notepad on Windows and SimpleText on a Mac will work in a pinch, but you will be better served and save yourself some headaches by getting a text editor that handles what is called UDF-8. One free example would be TED Notepad. There are many commercial alternatives including BBEdit for Mac and UltraEdit for Windows. Step 5 is complicated enough that we continue it on the next page which you can print and use for reference. Continue to Step 5...