Quick KML

February 16, 2009 | by Tim

I’ve seen some nice Google Earth mashups that draw things on the map and let the user poke around, so I had a brief look at KML to see how it works. Conceptually, it’s very similar to web page: you write a document in KML (instead of HTML), and load it in Google Earth (instead of a web browser).

Google has some good documentation (see below) and Google Earth itself has tools for drawing points and polygons to help you find latitude and longitude data. KML is very powerful and thus can get very complex, so I started with something simple: draw a box around the 2Paths office with a description balloon and our logo.

The first task is to draw a box around the office, using Google Earth to find the lat/long coordinates.

<Polygon>
	<extrude>1</extrude>
	<altitudeMode>relativeToGround</altitudeMode>
	<outerBoundaryIs>
		<LinearRing>
			<coordinates>
				-123.1397008457576,49.26945976671929,5
				-123.1396952540728,49.26958588852153,5
				-123.1398132208651,49.26958942110138,5
				-123.1398198299373,49.26946151355581,5
				-123.1397008457576,49.26945976671929,5
			</coordinates>
		</LinearRing>
	</outerBoundaryIs>
</Polygon>

Coordinates are specified in latitude, longitude, and altitude. The ones above draw a polygon 5 m above the ground (set by <altitudeMode>) with walls down to the ground to complete the box (set by <extrude>). KML lets you draw lines, paths and polygons. For polygons, you can do simple extruded shapes like this or more complicated shapes using inner and outer shells.

Next, slap on a 2Paths logo using Google Earth again to find the coordinates of the centre of the polygon. To make it stand out, I put the logo 5 m above ground too.

        <Placemark>
                <Point>
                        <coordinates>-123.1397550084801,49.2695262078802,5</coordinates>
                        <altitudeMode>relativeToGround</altitudeMode>
                </Point>
        </Placemark>

Finally, it’s simple to define styles for the polygon and label to specify where to find the 2Paths logo for the label and the colour to use for the office polygon.

        <Style id="logoPoint">
                <IconStyle>
                        <scale>1.0</scale>
                        <Icon>
                                <href>http://www.2paths.com/wp-content/themes/2pathstng/images/logo-header.png</href>
                        </Icon>
                </IconStyle>
        </Style>
        <Style id="officePoly">
                <LineStyle>
                        <width>1.5</width>
                </LineStyle>
                <PolyStyle>
                        <color>f01bbdb7</color>
                </PolyStyle>
        </Style>

The colour (or “color” if you prefer) is defined almost, but not quite, like in HTML. RGB are defined in opposite order and there’s an alpha value. Google says “[t]he 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).”

The complete KML is available here. View it with Google Earth.

In my quick investigation into KML, I wasn’t able to work out how to draw a more general shape like a box floating above the ground. (Or a tyrannosaurus fighting tanks, for that matter.) If you know, please tell me. The extrusion shape always draws walls right down to the ground or sea floor. Inner and outer shells really do have to be “inner” and “outer” as viewed from above – drawing one under the other with a different height doesn’t work. However, KML has definitely piqued my curiosity enough that I want to spend more time investigating.

Further reading
KML tutorial
KML reference

Bookmark and Share

Tags: ,

Leave a Reply