How to Use Google Maps and Campaign Logger to Dynamically Map Your Campaign

A guest tutorial by Sebastian Antonsen

Johnn asked me if I would write up an article about my map for my campaign. I’ve integrated Campaign Logger into it in a cool way. I hope after reading this you’ve been inspired to create your own map for your campaign.You can have a look at the map over at

You can have a look at the map over at www.evralas.com. It isn’t the fastest loading site in the world, so just be a little patient.

The Mapping Tech I Used

For my campaign, I wanted a map that my players could access online. And I really meant “A” map. One big map to cover every nook and cranny of my fantasy world.

Luckily some really clever guys over at Google have already supplied us with a system that does just that. Google maps covers more or less the entire globe with every scale a DM could want. And they’ve created a great and well documented API that lets geeks like me create my own map. You can even give the Google maps

API your own map tiles so that you can render your own map and not earth.

Long story short, I set up google maps to display my own homebrew maps.

My experience with web development is very limited. I am however a proficient googler and soon found a project developed at the  University College London (UCL) called GMap Cutter. It’s a little program in java that takes an image, cuts it up into the tiles that Google Maps needs and gives you javascript file with everything you need to set things up with the Google Maps API. Reading through that javascript file I was able to tailor things to my need. I didn’t like the way GMap Cutter ordered the tiles and so I wrote my own cutter in python.

So now I had a script in python that could cut up my map image into tiles and I had a javascript file that would take those tiles and server them to a webpage using the Google Maps API. Cool, I thought, now how do I update this map as my campaign progresses? Editing the map in photoshop, then cutting it into tiles with python, then uploading all of those tiles to my webserver is way too cumbersome. So I decided I would use Google Maps Marker function. If you google for instance “restaurants near me” you’ll get a map with little symbols laid over the map. I used the same functionality to display my locations.

Using Google Maps and Campaign Logger

Screenshot of example Google Maps Markers

To get the coordinates for my desired location I added a function in my map so that when you right click the map somewhere the map outputs the correct coordinates in the webpages console. (You can access the console in google chrome by right clicking any web page and pressing inspect.) I then wrote a JSON file containing all my locations and had the map read from that file. All was well and everything was working the way I wanted it to.

Screenshot of JSON file with coordinates

 

Then along came Campaign Logger and all of a sudden I did all my campaign work there.

How cool wouldn’t it be, I thought, if whenever I create a new location in Campaign Logger it just shows up in my map? Luckily for me Jochen Linneman released an API for Campaign Logger which allowed me to do just that. I wrote a python script that accesses my logger and gets everything I’ve ever logged about my campaign. My script then filters out everything with a + tag. In my logger the + tag means a location with coordinates for my map. It then passes that location data directly to the map which in turn renders my location markers exactly where I want them.

My workflow now consists of these steps.

  • Right-click the map at the desired location to obtain coordinates.
  • Write a log entry using the + tag and the coordinates from my previous step

A location entry looks like this:

Screenshot of Campaign Logger for mapping

Screenshot of Campaign Logger for mapping

My python script splits the entry on a newline character. The anatomy of a location post is:

  • +Map location tag
  • #location tag that I use for every location in my logger
  • x coordinate
  • y coordinates
  • description that will show in the map when you click on the marker name of the marker icon the server will use

Things I’d Like to do Better in the Future

The map should show some markers only at specific zoom levels. What I mean is I don’t necessarily want to show every marker inside a city if you are zoomed so far out that they would all clump up.

Loading the data from Campaign Logger is slow. I’m pretty sure it isn’t the Campaign Logger API that’s slow but rather my python script that needs optimization.

Comments From Johnn

This is awesome, Sebastian. Thanks for putting this tutorial together!

Campaign Logger customers, here’s a zip file of Sebastian’s Python scripts.

And if you are not a Campaign Logger customer yet, here’s more information about my excellent GMing app.

GET 88 FIVE ROOM DUNGEONS COMPLIMENTS OF JOHNN


Cover for the book 5 Room Dungeons

Get 88 five room dungeons plus a free subscription to my Roleplaying Tips Newsletter when you download my free book, 5 Room Dungeons.


  • Learn the complete 5 Room Dungeon Template

  • Get instant inspitation 88 example 5 Room Dungeons

  • 18 PDF volumes compiled into this one free download for you



Download My Book!


Click Here to Leave a Comment Below 4 comments