Feb 132011
 

Note: This arti­cle will soon be moved to my per­so­nal Geo­ca­ching blog at http://team-eclipse.de

If you are into geo­ca­ching and have a Word­Press blog like this one then maybe you’d like to include maps with geo­ca­ches in your blog posts. This is gene­rally not a dif­fi­cult task but awk­ward if you have to do it by hand.

In this arti­cle I’d like to show how you can create maps like the fol­lo­wing in a very easy way

What you need:

The foll­wing tools have been used to create the map above:

  • Word­Press for the blog software
  • The OSM plu­gin by MiKa to embed the maps in your blog posts
  • The icon set which can be down­loa­ded here
  • GSAK and my “Export­W­POSM” plu­gin (you don’t need it but it makes the task much easier espe­cially if you change the data often)

Pre­pa­ring everything

I won’t explain here how to install Word­Press or the OSM plu­gin. Details on that can be found at the cor­re­spon­ding sites. The only pre­pa­ra­tion you need addi­tio­nally is to put the icon files where the OSM plu­gin can find them. This place must be on the same site as the blog post. In my case I crea­ted a direc­tory in my direc­tory struc­ture wp-contents/uploads/icons/gc and pla­ces all icon files in there. After that the icons can be refe­renced like this

http://schmolzi.de/wp-contents/uploads/gc/icon-T-green.png 

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

Embed­ding the map in your posts

To include a sim­ple map wit­hout icons in a post you sim­ply need to add the fol­lo­wing code to your page (wit­hout the * at the beginning):

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

lat” and “lon” define the cen­ter point of the map, “zoom” is the zoom level and width and height define how big the map will be dis­played  on your page. This code crea­tes the fol­lo­wing map (note the blue “+” sign at the top right. It opens a menu that lets you change the map type!)

Adding way­po­ints to the map

Now you have a map on your page you might like to add some way­po­int mar­kers to it. I’ll first explain how to do it with GSAK and the Export­W­POSM plu­gin. I will add a descrip­tion of how to create the way­po­int files by hand in ano­ther article.

Adding mar­kers to your map using GSAK is very easy if you have instal­led the Export­W­POSM plu­gin. If you start it you will be promp­ted for some basic settings:

Configuration dialog

Here you need to spe­cify the base URL for the icons as descri­bed above. Do not for­get the trai­ling “/”.  Addi­tio­nally you must enter the direc­tory and file name where the mar­kers descrip­tion will be writ­ten and define if you also want to include child way­po­ints or — if so — want to include only child way­po­ints which have the user flag set.

The marco will then go through your cur­rent data­base with the active fil­ter and create a mar­ker file which con­tains every way­po­int in it. Once it’s done it shows how many caches and child way­po­ints it has written.

After that upload the gene­ra­ted file to your web­ser­ver. I pla­ced mine in wp-contents/uploads/2011/01/demo.txt. To include the mar­kers in your map add add the tag “marker_file” to the map def­in­tion like this:

[*osm_map lat="49.81" long="8.71" zoom="13" width="600" height="400"
marker_file="http://schmolzi.de/wp-content/uploads/2011/01/demo.txt"]

This will create the fol­lo­wing map:

Icon colors

Cur­rently six icon colors are pro­vi­ded per type. They are used by the macro in the foll­wo­ing way (maybe this will be con­fi­gu­ra­ble in a future version):

  • Green icons denote caches you have alre­ady found
  • Blue icons denote caches you own
  • White icons denote caches you have not found yet
  • Red icons denote caches you log­ged a DNF
  • Grey icons denote caches that are tem­pora­rily disabled
  • Yel­low icons denote mys­tery caches that you have not found yet but have cor­rec­ted coor­di­na­tes. This is use­ful to show Mys­te­ries that you have sol­ved but not found yet.

Christian

  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 mis­take, while I was rese­ar­ching on Google for
    some­thing else, Nonethe­l­ess I am here now and would just like to say thanks for a remar­ka­ble post and a all round enter­tai­ning 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 inclu­ded your
    RSS feeds, so when I have time I will be back to read a lot
    more, Please do keep up the awe­some job.

  2. Hallo,

    ich konnte beim ers­ten Ver­such die Karte kom­plett nicht sehen. Bei mir lag das daran, dass ich in Ghos­tery den Word­Press stats tra­cker geblockt hatte. Als ich das aus­ge­schal­tet habe konnte ich die Karte mit den Mar­kern sehen. Schau doch mal bei dir nach, ob irgend ein Browser-Plugin etwas bei dir blockt.

    Viele Grüße,
    Christian

  3. Hi,

    ich habe ein Pro­blem, was das Anzei­gen der Karte angeht. Even­tu­ell kannst Du Dir das ja mal in mei­nem Blog ansehen?

    Schade eigent­lich, da es echt häu­fig von den Usern besucht wird.

    Gruß Tors­ten

  4. Hi MiKa,

    vie­len Dank für den Hin­weis! Jetzt klappt wie­der alles!

  5. Hi,

    die Kar­ten sind nicht sicht­bar weil der Osma­ren­der Kar­ten­ser­vice abge­schal­ten wur­den. Ein­fach das OSM plu­gin update durchführen …

  6. Hallo Kurt,

    Danke für das Lob und vie­len Dank für die Ver­bes­se­rungs­vor­schläge. Ich werde sie für die nächste Ver­sion berücksichtigen.

    Ciao,
    Christian

  7. Coo­les Macro! Danke, es funk­tio­niert super! Was mir noch feh­len würde: eine Check­box zum Aus­blen­den der Hints und eine kor­rekte Anzeige der deut­schen Umlaute. Dann wäre es echt perfekt…

    Viele Grüße
    Kurt

  8. HI Astrid,

    Ich habe dei­nen Link eben aus­pro­biert und ich kann die Icons sehen — sowohl mit Frie­fox (4.0.1) als auch mit Chrome (11.0.696.71). Wel­che Ver­sio­nen ver­wen­dest du denn?

    Viele Grüße,
    Christian

  9. Hallo,

    auf mei­ner Karte wer­den in den Brow­sern Fire­fox und Chrome die Icons nicht ange­zeigt. Im Inter­net Explo­rer sehe ich sie aber.
    Hast du eine Idee, was ich da falsch mache?
    Hier der Link:

    http://dimna.de/wordpress/2011/03/osm_plugin_gsak/

    Vie­len Dank und liebe Grüße
    Astrid

  10. Thanks MiKa!

    I have inad­ver­tently dele­ted the mar­ker file on my web ser­ver and did not notice. Having back­ups is a fine thing :-)

    Chris­tian

  11. In your OSM-plugin short­code you are loading the mar­ker text file at http://schmolzi.de/wp-content/uploads/2011/01/demo.txt but if you are che­cking this address in your brow­ser there is an error 404-file not found. That’s the rea­son for the mis­sing icons in your map.

 Leave a Reply

(required)

(required)

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=""> <strike> <strong>