Google Earth KML file for the photographs on my photoblog

| |

Summary: A quick tutorial on how I put together a PHP script to serve a Google Earth KML file updated live with all the geo-tagged photos from my photo-blog, stored in MySQL. Rather than having people store the whole, static data file on their local machine, I've created a small, second XML file that uses the <NetworkLink> element to have Google Earth re-load the data file every hour, so that newly geotagged photos are included as well.

If you have Google Earth installed you should just be able to load the KML data file on this page to see a live version of the links.

Some people can just click on the KML link in their web browser and have Google Earth load the file automatically, but I find that doesn't work for me. Instead I have to save the sart.kml file locally, then load it with Google Earth.

Once it has loaded, you should see a new Temporary Places entry for sart.kml, with Canada and the United Kingdom listed:




Note the little folder icon below sart.kml, and above the entry for Canada -- click on that to re-load the data. As I geo-tag more entries on my photoblog each day they will automatically appear in the KML file.

Now that you see the end result, here's the steps I took to get this working, as well as links a the bottom of the page to the relevant KML documentation:

Step 1: Geotagged data: I've been tracking the location of each photo I post, and storing it in a MySQL database that drives my photoblog. I use complete decimal latitude and longitude, and always include the metadata in the header of my pages, like:
<meta name="ICBM" content="-80.00044584274292, 44.69370496288508">

Step 2: Basic KML Placemark entry: The heart of the data file is a whole bunch of <Placemark> entries, one per photo, in my case. I only define 3 elements within the <Placemark>. Here's an example:

<Placemark>
    <name>Ludlow Parish Church</name>
    <description><![CDATA[
        <table border="0"><tr><td>
        A red brick wall with 2 signs<br/><br/>http://www.seemsartless.com/index.php?pic=1250
        <br/><br/>Photo taken: <b>2007-7-2</b>
        <br/><br/>Location: <b>Near the Parish Church</b></td>
        <td><img src="http://www.seemsartless.com/photos/square/uk-ludlow-parish.jpg" with="160" height="160"></td></tr>
        </table>
]]>
    </description>
    <Point>
        <coordinates>-2.718687057495117,52.368092505872504,0</coordinates>
    </Point>
</Placemark>
Note the following:

  • <name>: The name of the location, "Ludlow Parish Church" in the example above.
  • <descritption>: I define HTML in this entry, which is displayed on the pop-up, so the contents of the entry has a <![CDATA[ entry at the start, then the HTML (hightlighted in green above - I use a table to layout the description text, a link to my photo entry, as well as a 160x160 thumbnail image). Finally, the entry ends with a ]]> close.
  • <Point>:Contains a sub-element for the co-ordinates of the entry, like:
    <coordinates>-80.00044584274292,44.69370496288508,0</coordinates>


Step 3: Hierarchical structure of the places: All of the various <Placemark> elements for a single area (in my case London, or Ludlow) are contained within a single <Folder> element, and those <Folder> elements are contained within higher level elements as well (in my case Canada or the United Kingdon).The <name> element is used here to define the name of the folder. So this gives us:

<Folder><name>Canada</name>
    <Folder><name>Balm Beach</name>
        <Placemark>...</Placemark>
        <Placemark>...</Placemark>
        ...
        <Placemark>...</Placemark>
    </Folder>
    <Folder><name>Balsam lake</name>
        <Placemark>...</Placemark>
        ...
    </Folder>
    ...
This sort of indented structure should be common if you've ever worked with HTML list items, or any sort of XML structures. Of course I haven't created the whole data file by hand, but use PHP to run a common MySQL query and iterate through the results.

Step 4: Wrap it up in valid XML tags:
Finally we wrap the Folder structure with an XML header, as follows:

<kml xmlns="http://earth.google.com/kml/2.1">
    <Document>
        <name>Photoblog photos from Wholemap</name>
        <open>1</open>
        <description>Locations of photoblog photos</description>
        <Folder><name>Canada</name>
...
        </Folder>

    </Document>
</kml>
All of these items are pretty self-explanatory, except for the <open> element, which is set to 1 if you want the section to be automatically expanded when it is loaded in Google Earth.

Step 5: Create a separate XML file to point to the data file:
The above file is generated on the fly by my PHP script, but I've also created a second XML file, called sart.xml which contains a <NetworkLink> element. I've done this so that you can have this static file on your local machine, which tells Google Earth to load the data from my PHP script -- you're not stuck looking at a local copy of photos when I geotag new photos.

<?xml version='1.0' encoding='UTF-8'?>
<kml xmlns = 'http://earth.google.com/kml/2.1'>
    <Folder>
        <NetworkLink>
            <Link>

                <href>
http://www.wholemap.com/earth/pblog.php?code=SART</href>
                <refreshMode>onInterval</refreshMode>
                <refreshInterval>3600</refreshInterval>
                <linkName>SeemsArtless photos</linkName>
                <linkDescription>A collection of daily Photoblog photos</linkDescription>
            </Link>
        </NetworkLink>
    </Folder>
</kml>

Notice that I've set the <refreshMode> and <refreshInterval> elements to re-load the data file from the PHP script every 3,600 seconds, or every hour.

Related Links: