Information

The map shows geocaches that we have hidden or found, but it can be modified to show whatever you like.
The map is made using the Google Maps API version 2.
No database is needed, the data can be fetched from static data files. (But the data could of course be generated dynamicly from a database by a script instead).
To use the CacheMap on your own web site you need to:

Installation

Download cachemap.zip and unzip it on your web server.
Included files:

Transform.class
Transform.java
cachemap.css
cachemap.js
cmconfig.js
gpx2json.sh
gpx2json.xsl
gpx2xml.sh
gpx2xml.xsl
img/closed.gif
img/empty.gif
img/open.gif
img/wp.gif
Then you need to do the configuration below and obtain some data files.


Configuration

There are some configuration changes to be done in cmconfig.js and cachemap.html to adapt the map to each installation.

These changes are marked in red.

cmconfig.js

var configShowTree = true;                                 // Should the sidebar menu be shown, true or false.
var configInitialZoom = 13;                                // Initial zoom level, higher number = more detail.
var configHomePoint = new GLatLng( 59.0000000, 17.000000); // Coordinates for the home point.
var configHomeText = "XXX home";                           // Text in the infowindow of the home point. Can contain HTML.
var configUserName = "XXX";                                // Show logs of type "Found it", "Attended" and "Webcam photo taken" for this user name.
                                                           // Only valid for GPX files.
                                                           // Set to "*" for any user or leave blank for no logs.
                                                           // If there are several matching logs only the last will be used. (Last in the file, not last by date.)

cachemap.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>XXX Geocaching Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
    <script src="http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/src/markermanager.js" type="text/javascript"></script>
    <script src="cmconfig.js" type="text/javascript"></script>
    <script src="cachemap.js" type="text/javascript"></script>
    <link rel="StyleSheet" href="cachemap.css" type="text/css" />
  </head>

  <body onload="loadMap();" onunload="GUnload();">

    <div id="banner"><span id="profile"><a href="http://www.geocaching.com/profile/?guid=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" target="_blank">
      <img src="http://img.geocaching.com/stats/img.aspx?txt=XXX&amp;uid=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX&amp;bg=2" title="Profile for XXX" alt="Profile for XXX" height="50" width="200" border="0"/></a></span>
      <h1>XXX Geocaching Map</h1>
    </div>

    <div id="main">
      <div id="map"></div>
      <span id="set">
        <input type="radio" name="set" value="home" onclick="showHome()" id="home" checked="checked"/><strong>Home</strong>
        <input type="radio" name="set" value="hidden.xml" onclick="loadFile(this.value,gpxCB)"/><strong>Hidden</strong>
        <input type="radio" name="set" value="found.xml"  onclick="loadFile(this.value,gpxCB)"/><strong>Found</strong>
      </span><span id="tech"><a href="http://marikanders.lugn.nu/geocaching/cminfo.html" target="_blank">Technical Info</a></tech>
    </div>

    <div id="sidebar">
      -
    </div>

  </body>
</html>

statbar

The html code between <span id="profile"> and </span> can be generated by the statbar function at geocaching.com.

To make the code valid xhtml it should be slightly edited.
Replace all occurances of & with &amp; and add height="50" width="200" to the <img> tag.

Callbacks

The data files can be of three different types.

For each type of file there is a different Javascript function to interpret the data in the file. These functions are called "callbacks".
In the loadFile(this.value,xxCB) instructions xxCB must be replaced by the correct callback name.
These are as follows:


Data files

The data files can be of three different types.

Groundspeak GPX files

GPX files are a type of XML files generated by geocaching.com Pocket Queries.
They can also be downloaded from each cache page or generated by other tools such as GSAK.
These files contain a lot of information not used by the geocaching map, making large files a bit slow to load.
The advantage is that they can be used directly without any editing.
There is however one thing that needs to be modified, the file name extension.
Most web servers will return files having a .gpx extension with a content type of plain text rather than XML.
This will cause incorrect display of accented characters like åäö in the cache description.
The solution is to rename the files to have a .xml extension.
It's also possible to configure the web server to treat .gpx files as XML, but that's outside the scope of this instruction.

Simplified XML files

These XML files only include the data used by the geocaching map, in a simplified structure without attributes or namespaces.
I have made a XSLT file that can be used to translate from GPX to this format.
See the following example if you want to create this type of files yourself. The codes for the <type> element can be found here.
The first <time> element directly under the <root> element is the creation time of the file.
It is used to determine if the file has changed since it was loaded the last time.
The <time> element under each <wpt> element is the time the cache was hidden. Only the first ten characters, (the date), are used.
The <log> entry is optional. If present it will by shown in the info bubble when clicking a cache icon on the map.
If there are several log entries for a cache only the last will be used. (Last in the file, not last by date.)

<?xml version="1.0" encoding="utf-8"?>
<root>
  <time>2006-05-14T03:55:52.9881176-07:00</time>
  <wpt>
    <lat>60.82375</lat>
    <lon>14.64405</lon>
    <time>2003-06-28T00:00:00.0000000-07:00</time>
    <name>GCGDBF</name>
    <desc>A sober view by marikanders, Traditional Cache (2/3)</desc>
    <type>2</type>
    <url>http://www.geocaching.com/seek/cache_details.aspx?guid=536f59be-6e54-47a4-b901-a38900fea1f0</url>
    <country>Sweden</country>
  </wpt>
  <wpt>
    <lat>59.4701</lat>
    <lon>17.9222666666667</lon>
    <time>2004-07-04T00:00:00.0000000-07:00</time>
    <name>GCJWTX</name>
    <desc>Jäst i verkligheten by marikanders, Traditional Cache (2/2.5)</desc>
    <type>2</type>
    <url>http://www.geocaching.com/seek/cache_details.aspx?guid=c6606d77-f7f6-47c4-b07c-4b5ca48be629</url>
    <country>Sweden</country>
    <log>XXX</log>
  </wpt>
</root>

JSON files

These files only include the data used by the geocaching map, in a format that can be read directly by Javascript for best performance.
I have made a XSLT file that can be used to translate from GPX to this format.
See the following example if you want to create this type of files yourself. The codes for the "type" element can be found here.
The first "time" element is the creation time of the file. It is used to determine if the file has changed since it was loaded the last time.
The "time" element under each "wpt" element is the time the cache was hidden. Only the first ten characters, (the date), are used.
The "log" entry is optional. If present it will by shown in the info bubble when clicking a cache icon on the map.
If there are several log entries for a cache only the last will be used. (Last in the file, not last by date.)

({gpx:{time:"2006-05-14T03:55:52.9881176-07:00",wpt:[
{point:new GLatLng(60.82375,14.64405),
time:"2003-06-28T00:00:00.0000000-07:00",
name:"GCGDBF",
desc":"A sober view by marikanders, Traditional Cache (2/3)",
type:2,
url:"http://www.geocaching.com/seek/cache_details.aspx?guid=536f59be-6e54-47a4-b901-a38900fea1f0",
country:"Sweden"},{point:new GLatLng(59.4701,17.9222666666667),
time:"2004-07-04T00:00:00.0000000-07:00",
name:"GCJWTX",
desc:"Jäst i verkligheten by marikanders, Traditional Cache (2/2.5)",
type:2,
url:"http://www.geocaching.com/seek/cache_details.aspx?guid=c6606d77-f7f6-47c4-b07c-4b5ca48be629",
country:"Sweden",
log:"XXX"}]}})

Type codes

In the simplified XML and JSON data files the following values are used in the type field:

Traditional2
Multi3
Virtual4
Letterbox5
Event6
Unknown/Mystery8
Webcam11
Locationless12
CITO13
Earth Cache15

XSLT

Extensible Stylesheet Language Transformations (XSLT) is an XML-based language used for the transformation of XML documents.
I have made two such stylesheets to convert GPX files to the simplified XML and JSON formats that can be used instead of GPX, gpx2xml.xsl and gpx2json.xsl.

The optional parameter logs can be passed to the stylesheets to include logs of type "Found it", "Attended" and "Webcam photo taken" in the output file.
The logs parameter can be a username to include logs for that user only, or * to include logs for any user.
Only the LAST such log for each cache will be used by the geocaching map. (Last in the file, not last by date.)

The GPX file and the XSL stylesheet must be run trough a XSLT-processor. There are a number those available.

In MS Windows Microsoft's Command Line Transformation Utility (msxsl.exe) can be used.
You also need to have MSXML 4.0 Service Pack 2 (Microsoft XML Core Services) or later installed.

C:\>msxsl hidden.gpx gpx2json.xsl -o hidden.json
C:\>msxsl hidden.gpx gpx2json.xsl -o hidden.json logs=XXX
C:\>msxsl hidden.gpx gpx2json.xsl -o hidden.json logs=*

There is also a java version that can be run on any platform where java is available, (MS Windows, Linux, MacOS X etc).
The source code and a version compiled for Java 1.6 is included in the distribution zip file.

C:\>java Transform hidden.gpx gpx2json.xsl > hidden.json
C:\>java Transform hidden.gpx gpx2json.xsl logs=XXX > hidden.json
C:\>java Transform hidden.gpx gpx2json.xsl logs=* > hidden.json