Creating Data for Google Earth
From Docupedia
Written By: Bryan Rite
Date: 11/29/2005
Contents |
Overview
This is a quick overview of how to transfer your points in a Google Map to a Google Earth readable XML file. I'll just be covering the basics, mapping your co-ordinates correctly and displaying info bubble about them, and some other cool stuff like image overlays, polylines, and even making your own 3D buildings.
I'm just covering the syntax, populating the data should be simple using PHP or something once you understand how to create it.
Pre-Installation
Checklist
- The only thing we need is our geographic points, in decimal degrees, and any html we want to describe the points with.
- I'm just going to use a vi to make my XML but use any text editor.
The Basics
This will describe a basic map like seen at the top of this tutorial. Simple placemarks with bubbles in a proper folder structure.
Setting Up the Map
Google Earth's KML is just XML with Google flavouring. It starts out defining the document type and getting the namespace scheme and enclosing it in <Document> tags.
<?xml version="1.0" encoding="UTF-8"?> <kml xmlns="http://earth.google.com/kml/2.0"> <Document>
Pretty standard. Thats it for the head.
Regular Placemarks
These are the normal placemarks you get when you search within Google Earth. They just sit on the ground at the co-ordinates you specify. First we want to start a placemark, name it, and describe it very simply:
<Placemark> <name>Hello World</name> <description>My first Google Earth Placemark</description>
Now I want to set the default visibility to on. This means that when you load in our KML, it will automatically show up on the map. If we use 0 instead of 1, the user will have to click the check box beside our listing to display it.
<visibility>1</visibility>
Now we set the co-ordinates of where to display our placemark. We set the extrude to 0, this is used to show distance from the Earth, something we'll get into later (see: Floating Placemarks). The altitudeMode is set to clampToGround as we want our listing to just lie on the Earth. Google Earth will alter our placemark's height based on the ground form underneath it; so if its on a mountain, Google Earth will automatically rise it to the correct height (more on altitudeMode in Floating Placemarks). Finally we set our co-ordinates in decimal degrees with longitude first, then latitude, then we use 0 to show we want it to follow the Earth's contour.
<Point>
<extrude>0</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>-123.03211212158203,49.272284876050875,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Put all that into a text file, save as .kml and open it with Google Earth. Center and zooms in nicely to your placemark, using your description as the bubble info and the summary on the left. Try adding a second placemark by duplicated everything between the <Placemark> tags and adding it directly after:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<Placemark>
<name>Hello World</name>
<description>My first Google Earth Placemark</description>
<visibility>1</visibility>
<Point>
<extrude>0</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>-123.03211212158203,49.272284876050875,0</coordinates>
</Point>
</Placemark>
<Placemark>
<name>Hello World 2</name>
<description>My Second Google Earth Placemark</description>
<visibility>0</visibility>
<Point>
<extrude>0</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>-123.43211212158203,49.672284876050875,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>
Run that and google Earth automatically centers and zooms so that you can view both placemarks. Alternatively, we can manually set the camera's positioning if need be but we'll get into that later (see: Camera Positioning).
HTML Bubbles
The Bubbles that display information can be as simple or complex as you want. As in above, we wrote some simple text and it was used as the Bubble's text and the summary on the left. Alternatively, we can specify HTML in the bubble to spice them up. You can use basically all HTML in the bubble including colours, font-size, images, etc...
Note: At the time of writing, Google Earth (v 3.0.07) b0rks on GIF images in an <img>? This is to be fixed in the next version.
The only important thing when using HTML in an XML document is to include the <![CDATA["]]> tag. This lets the XML parser know its HTML and it won't mess up.
An example of a detailed description looks like:
<Placemark>
<name>Hello World 3</name>
<description>
<![CDATA[
<h1>Hello World 3</h1>
<p><font color="red">Who uses the font tag anymore anyways?!</font></p>
]]>
</description>
<visibility>1</visibility>
<Point>
<extrude>0</extrude>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>-123.03211212158203,49.272284876050875,0</coordinates>
</Point>
</Placemark>
Personally I think that looks like crap, I'd only use HTML for layout, images and links.
Folder Structure
The final basic thing I want to cover is the structure of your placemarks. I've used KMLs with hundreds of placemarks in them and if it just creates an ugly list like we've been doing, you'll never find em.
We are able to define a folder structure in our KML to better orginize our placemarks. Just surround the placemarks in <Folder> tags. The <Folder> should specify a name and its open state (do we want it to open automatically or only when the user clicks it?). Folders can be nested.
<Folder>
<name>The Docupedia Test</name>
<open>1</open>
<Folder>
<name>Nested Folder 1</name>
<open>1</open>
<Placemark>...</Placemark>
<Placemark>...</Placemark>
</Folder>
<Folder>
<name>Nested Folder 2</name>
<open>0</open>
<Placemark>...</Placemark>
</Folder>
</Folder>
Put it all together and you should have a nice folder structure. The all the placemarks should be visible but only the first nested folder is open while the second one is collapsed.
Advanced Features
These describe some of the cooler things you can do with Google Earth to be really creative.
Floating Placemarks
Floating Placemarks are exactly the same as regular, Earth-bound Placemarks except they float about the ground. We specify a third number in our <Point> declaration and set a different <altitudeMode>.
A floating point uses these lines instead:
<altitudeMode>relativeToGround</altitudeMode> <coordinates>-123.03211212158203,49.272284876050875,50</coordinates>
We specify 50 as our third co-ordinate for the height off the Earth in meters. This is 50 meters relative to the contours of the Earth. If we want absolute specify absolute as your altitudeMode.
We can have Google Earth drop an anchor to the Earth from our floating spot if you want to show exactly where it is floating above. Change the <extrude> from 0 to 1 to add an anchor line.
By default, the Google Earth Camera doesn't appreciate our floating and goes for the bird's eye view. You can't tell its floating. The next section explains how to alter the camera manually.
Camera Positioning
I want to be able to lower the tilt so I can see that something is floating or the contours of the Earth. Fortunately we have complete control over the camera for each Placemark or per Folder etc.
We simply set the <LookAt> tags to specify longitude, latitude, range (zoom), tilt, and heading. For example, my Placemark code would look like:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<Placemark>
<name>Anchor</name>
<description>Anchor that floater</description>
<LookAt>
<longitude>-123.0320141442482</longitude>
<latitude>49.27286853753884</latitude>
<range>257.1109506990837</range>
<tilt>70.51411008994708</tilt>
<heading>0</heading>
</LookAt>
<Point>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<coordinates>-123.032112121582,49.27228487605088,50</coordinates>
</Point>
</Placemark>
</Document>
</kml>
The LookAt tags can be applied to almost all Google Earth elements such as Placemarks, Folders, Ground Overlays, Polylines, and Polygons.
Ground Overlays
Ground overlays take a simlar but slightly different approach then Placemarks. A ground overlay consists of an image and 4 points. Google Earth will then place the image inbetween the 4 points, streching the image to fit. The overlay image becomes the icon which is displayed between the points.
We replace our Placemark code with this:
<GroundOverlay> <name>An Image Overlay</name> <Icon> <href>/path/to/an/image.jpg</href> </Icon> <LatLonBox> <north>49.40672663384876</north> <south>49.37932489410251</south> <east>-123.1140520576652</east> <west>-123.1719693640018</west> </LatLonBox> </GroundOverlay>
Specifying a box using <LatLonBox> for our image to be enclosed in. Google Earth will map this image to the coutour of the Earth so you can overlay images to get a sense of depth.
Polylines
Polylines can be very cool but they take some work. You have to specify line segments if you want anything other then a straight line between two points but you can do some cool things with them.
Polylines are just a type of Placemarker, but instead of a Point, we specify multiple points to make a line. We set tessellate to 1 because we want to break the line up into segments without overlapping or having gaps in the line (not really applicable here, but you'll want it for more advanced polyline structures).
<Placemark>
<name>Line</name>
<description>This is a segmented line.</description>
<visibility>1</visibility>
<open>1</open>
<LineString>
<extrude>0</extrude>
<tessellate>1</tessellate>
<altitudeMode>absolute</altitudeMode>
<coordinates>
-123.032112121582,49.27228487605088,1000
-123.132112121582,49.17228487605088,1000
</coordinates>
</LineString>
</Placemark>
This creates a line hovering 1000 meters above Vancouver, Canada. Try changing extrude to 1, this drops a wall down to the earth, extruding from the line to the earth. This next one creates a triangle extruded to the ground with a difference in height at one point relative to the ground.
<Placemark>
<name>Line</name>
<description>This is a segmented line.</description>
<visibility>1</visibility>
<open>1</open>
<LineString>
<extrude>1</extrude>
<tessellate>1</tessellate>
<altitudeMode>relativeToGround</altitudeMode>
<coordinates>
-123.032112121582,49.27228487605088,1000
-123.132112121582,49.17228487605088,2000
-123.072112121582,49.32228487605088,1000
-123.032112121582,49.27228487605088,1000
</coordinates>
</LineString>
</Placemark>
As far as I know there isn't a way to use Google's road map database as they do when you look for directions, so you have to manually edit your own.
3D Polygons
Finally we have the polygons. These are sweet because we can make buildings and structures with them.
A polygon is simply an outer layer shape with an optional inner layer. That is, if you define 4 points in a square, you'll create a box. If you define 4 outer points in a square and 4 inner points as a smaller square inside the first, you'll make a square donut.
Instead of a LineString, we define a polygon as such:
<Polygon>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>...</coordinates>
</LinearRing>
</outerBoundaryIs>
<innerBoundaryIs>
<LinearRing>
<coordinates>...</coordinates>
</LinearRing>
</innerBoundaryIs>
</Polygon>
If we put our points from above in we get a solid triangle. If you specify a shape within the first, you get a hole in the triangle. A good example I stole is the Pentagon building:
<Polygon>
<extrude>1</extrude>
<altitudeMode>relativeToGround</altitudeMode>
<outerBoundaryIs>
<LinearRing>
<coordinates>
-77.05788457660967,38.87253259892824,100
-77.05465973756702,38.87291016281703,100
-77.05315536854791,38.87053267794386,100
-77.05552622493516,38.868757801256,100
-77.05844056290393,38.86996206506943,100
-77.05788457660967,38.87253259892824,100
</coordinates>
</LinearRing>
</outerBoundaryIs>
<innerBoundaryIs>
<LinearRing>
<coordinates>
-77.05668055019126,38.87154239798456,100
-77.05542625960818,38.87167890344077,100
-77.05485125901024,38.87076535397792,100
-77.05577677433152,38.87008686581446,100
-77.05691162017543,38.87054446963351,100
-77.05668055019126,38.87154239798456,100
</coordinates>
</LinearRing>
</innerBoundaryIs>
</Polygon>
Conclusion
There are a couple more things I didn't get into like styles and icons, I may put them in later, but they aren't functional specs, just help asethetics.
It should be obvious that you can easily import any Google Map data into Google Earth with minimal coding as you already have all the necessary information, you just need to create the KML.
--- Bryan Rite 11:46, 30 Nov 2005 (PST)
