Sillyness, werd

Working with Google Earth - Part 1

So I have been working on a little side project that involves Google Earth, and I thought I would share my findings with you all in the form of this little tutorial.

One of the most frustrating things about working with Google’s technology is the lack of good, clear documentation.  Most of your time is taken up with searchng for answers through a trial and error type of programming.

This tutorial won’t cover all there is to know about Google Earth, but I am confident that after reading this you will be capable of getting down to business and having some serious fun.

First the Problem

Okay, so I wanted to create an add-on for Google Earth that would list all of the sites in the 9rules network, affectionately dubbed 9rules Earth, and I wanted to have a web form component that would allow the members of the network to add thier sites to 9rules Earth, so I wasn’t inputing hundreds of sites.

Sounds simple enough, so let’s get to it.

The Format: KML (Keyhole Markup Language)

KML is the powerhouse behind Google Earth; it is a simple, well formed markup language based on XML… so you know right away that this is going to be easier than we thought.

In your KML File you define a ‘placemark’ that corresponds to your house/website/thingy.  A typical point would look like this:

<Placemark> <description>This is our house, aint it shiny.</description> <name>Our House</name> <visibility>1</visibility> <Point> <coordinates>76.7142,39.0996,0</coordinates> </Point> </Placemark>

So as you can see here we have set up our first placemark and given it a name: Our House, description: This is our house, aint it shiny, set its visibility to 1:”(0 means the ‘point’ is not visible on the map, 1 means it is.)”: and finally given Google Earth the coordinates so it can find our house:”(Remember longitude first, then latitude.)”: .

Pretty simple right?  Right.  So lets say we want to add a custom ‘point’ icon to our placemark, say a picture of our house… what then?

Well luckily KML has that covered as well with the Style decleration:

<Style> <IconStyle> <Border id="khBorderDefault"> <width>0</width> <color>ff000000</color> </Border> <Icon> <href>http://www.ourwebsite.com/images/point.png</href> <w>32</w> <h>32</h> </Icon> </IconStyle> </Style>

So lets look at the above code and what it is doing exactly.  To add your own custom point image you need to create the Style block and declare your IconStyle; you will notice that I have declared Border with a width of 0.  Why not just skip that all together?  If you don’t declare Border at all then you get a white background effect that is not cool, so go ahead and just declare it and make it 0.

Next we get to the important part, declaring Icon.  Any URI that you reference in KML needs to be bracketed in <href>’s, be fully qualified and have width and height declared.

So let’s put it all together to create a point that has a custom icon:

<Placemark> <description>This is our house, aint it shiny.</description> <name>Our House</name> <visibility>1</visibility> <Style> <IconStyle> <Border id="khBorderDefault"> <width>0</width> <color>ff000000</color> </Border> <Icon> <href>http://www.ourwebsite.com/images/point.png</href> <w>32</w> <h>32</h> </Icon> </IconStyle> </Style> <Point> <coordinates>76.7142,39.0996,0</coordinates> </Point> </Placemark>

Now all we have to do is save this as our-point.kml and open it with Google Earth.  You will now be able to find your point at the coordinates you specified, isn’t that shiny?

So that is it for part 1, in Part 2 we will cover more than one Placemark in your KML file, and how to automate the input of sites and creation of the KML file from data stored in a database.  Be warned there will be a fair amount of coding going on around this mother in Part 2.  Just remember I warned you.