Feb 132011

Note: This article will soon be moved to my personal Geocaching blog at http://team-eclipse.de

If you are into geocaching and have a WordPress blog like this one then maybe you’d like to include maps with geocaches in your blog posts. This is generally not a difficult task but awkward if you have to do it by hand.

In this article I’d like to show how you can create maps like the following in a very easy way

What you need:

The follwing tools have been used to create the map above:

  • WordPress for the blog software
  • The OSM plugin by MiKa to embed the maps in your blog posts
  • The icon set which can be downloaded here
  • GSAK and my „ExportWPOSM“ plugin (you don’t need it but it makes the task much easier especially if you change the data often)

Preparing everything

I won’t explain here how to install WordPress or the OSM plugin. Details on that can be found at the corresponding sites. The only preparation you need additionally is to put the icon files where the OSM plugin can find them. This place must be on the same site as the blog post. In my case I created a directory in my directory structure wp-contents/uploads/icons/gc and places all icon files in there. After that the icons can be referenced like this


If you are going to use the GSAK macro, you’ll need to remember the base URL (the part before the icon name, „http://schmolzi.de/wp-contents/uploads/gc/“ in this example) and specify it when exporting the data.

Embedding the map in your posts

To include a simple map without icons in a post you simply need to add the following code to your page (without the * at the beginning):

[*osm_map lat="49.81" long="8.71" zoom="13" width="600" height="400"]

„lat“ and „lon“ define the center point of the map, „zoom“ is the zoom level and width and height define how big the map will be displayed  on your page. This code creates the following map (note the blue „+“ sign at the top right. It opens a menu that lets you change the map type!)

Adding waypoints to the map

Now you have a map on your page you might like to add some waypoint markers to it. I’ll first explain how to do it with GSAK and the ExportWPOSM plugin. I will add a description of how to create the waypoint files by hand in another article.

Adding markers to your map using GSAK is very easy if you have installed the ExportWPOSM plugin. If you start it you will be prompted for some basic settings:

Configuration dialog

Here you need to specify the base URL for the icons as described above. Do not forget the trailing „/“.  Additionally you must enter the directory and file name where the markers description will be written and define if you also want to include child waypoints or – if so – want to include only child waypoints which have the user flag set.

The marco will then go through your current database with the active filter and create a marker file which contains every waypoint in it. Once it’s done it shows how many caches and child waypoints it has written.

After that upload the generated file to your webserver. I placed mine in wp-contents/uploads/2011/01/demo.txt. To include the markers in your map add add the tag „marker_file“ to the map defintion like this:

[*osm_map lat="49.81" long="8.71" zoom="13" width="600" height="400"

This will create the following map:

Icon colors

Currently six icon colors are provided per type. They are used by the macro in the follwoing way (maybe this will be configurable in a future version):

  • Green icons denote caches you have already found
  • Blue icons denote caches you own
  • White icons denote caches you have not found yet
  • Red icons denote caches you logged a DNF
  • Grey icons denote caches that are temporarily disabled
  • Yellow icons denote mystery caches that you have not found yet but have corrected coordinates. This is useful to show Mysteries that you have solved but not found yet.


  15 Responses to “Creating geocaching maps for WordPress blogs with GSAK”

Comments (11) Pingbacks (4)
  1. Good day I am so happy I found your blog,
    I really found you by mistake, while I was researching on Google for
    something else, Nonetheless I am here now and would just like to say thanks for a remarkable post and a all round entertaining blog (I also love the theme/design), I don’t have time to look over it all at the moment but I have saved it and also included your
    RSS feeds, so when I have time I will be back to read a lot
    more, Please do keep up the awesome job.

  2. Hallo,

    ich konnte beim ersten Versuch die Karte komplett nicht sehen. Bei mir lag das daran, dass ich in Ghostery den WordPress stats tracker geblockt hatte. Als ich das ausgeschaltet habe konnte ich die Karte mit den Markern sehen. Schau doch mal bei dir nach, ob irgend ein Browser-Plugin etwas bei dir blockt.

    Viele Grüße,

  3. Hi,

    ich habe ein Problem, was das Anzeigen der Karte angeht. Eventuell kannst Du Dir das ja mal in meinem Blog ansehen?

    Schade eigentlich, da es echt häufig von den Usern besucht wird.

    Gruß Torsten

  4. Hi MiKa,

    vielen Dank für den Hinweis! Jetzt klappt wieder alles!

  5. Hi,

    die Karten sind nicht sichtbar weil der Osmarender Kartenservice abgeschalten wurden. Einfach das OSM plugin update durchführen …

  6. Hallo Kurt,

    Danke für das Lob und vielen Dank für die Verbesserungsvorschläge. Ich werde sie für die nächste Version berücksichtigen.


  7. Cooles Macro! Danke, es funktioniert super! Was mir noch fehlen würde: eine Checkbox zum Ausblenden der Hints und eine korrekte Anzeige der deutschen Umlaute. Dann wäre es echt perfekt…

    Viele Grüße

  8. HI Astrid,

    Ich habe deinen Link eben ausprobiert und ich kann die Icons sehen – sowohl mit Friefox (4.0.1) als auch mit Chrome (11.0.696.71). Welche Versionen verwendest du denn?

    Viele Grüße,

  9. Hallo,

    auf meiner Karte werden in den Browsern Firefox und Chrome die Icons nicht angezeigt. Im Internet Explorer sehe ich sie aber.
    Hast du eine Idee, was ich da falsch mache?
    Hier der Link:


    Vielen Dank und liebe Grüße

  10. Thanks MiKa!

    I have inadvertently deleted the marker file on my web server and did not notice. Having backups is a fine thing 🙂


  11. In your OSM-plugin shortcode you are loading the marker text file at http://schmolzi.de/wp-content/uploads/2011/01/demo.txt but if you are checking this address in your browser there is an error 404-file not found. That’s the reason for the missing icons in your map.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>