Quick And Dirty Shared Custom Maps

A bunch of my friends (about 15 people in all) have gotten together to participate in a Western Marches style campaign using the World of Dungeons system. (More thoughts on that below). Anyway, I thought that it would be really handy to have a shared map that everyone could annotate, since we are all collectively exploring the map and sharing information.

After a wrong turn with the Google Maps API (hit quota limit within five minutes of playing around, oddly, and splitting the tiles was surprisingly painful) I discovered the Leaflet.js API, which is just a well-designed, beautiful API. Even better for my purposes, it could take an image directly – no need to split it into tiles or anything.

To totally cheap it out, instead of bothering with a backend, I just decided to use Google Spreadsheets to host the “database” for points of interest.

Assuming a spreadsheet something like this:

If you have an image, the core code to display the map with the markers is as simple as:

var url = 'https://sheets.googleapis.com/v4/spreadsheets/[SPREADSHEET_ID]/values/A2%3AE99?dateTimeRenderOption=SERIAL_NUMBER&majorDimension=DIMENSION_UNSPECIFIED&valueRenderOption=FORMATTED_VALUE&key=[API_KEY]'; $(document).ready(function () { jQuery.getJSON(url, function (data) { for (ix = 0; ix < data.values.length; ix++) { var x = parseInt(data.values[ix][0]) + center[0]; var y = -parseInt(data.values[ix][1]) + center[1]; var marker = data.values[ix][2]; var addedby = data.values[ix][3]; var description = data.values[ix][4]; if (addedby > "") { description += "
Added by: " + addedby + ""; } console.log(x, y, marker, addedby, description); var marker = L.marker([y, x]).bindPopup(description).openPopup().addTo(map); } }); });

… and that’s it. No backend, no database, no node.js/NPM/gulp/grunt/webpack – nothing more than a static website is needed.

Obviously, if you trust your players less, you’ll want to sanitize inputs, and whatnot – otherwise, XSL heaven – and also obviously, it could be nicer, but for a few hours of playing around, it’s kind of nice to have a scrollable, zoomable map that allows multiple people to annotate it.

See this gist for the full file.

Western Marches

There are more details in this link, but at a high level, a Western Marches game is composed of spontaneous groups from a larger pool of players. Forcing the players to do the scheduling and pick their missions also forces them to engage with the game.

It also results in a kind of “stone soup” approach to world building – various people have written accounts of their adventures or stories of their background that have added to the tapestry of the game. For information sharing in our ongoing game, we ended up setting up a wiki, a shared world map (obviously), tons of spreadsheets and dungeon maps, and even had a town hall meeting the other day.

It’s given me the chance to group with some people that I would have never met otherwise, and I’ve seen some truly excellent role-playing.

The big downside of Western Marches is that of any hub-and-spoke model: it really stresses the hub. The GM has to be really flexible and has to do a lot of work. This is one of those things where having a couple GMs might make everything substantially easier on all involved.

World of Dungeons

World of Dungeons is the system we’re using. In general, I love nano-systems like this (it’s two pages, complete!), so I’m pretty biased. It’s worked pretty well for us, although we’ve been patching and adjusting rules as we go – the advantage of an experienced GM and players is that you can just roll with it (pun not intended) and adjust on the fly as circumstances dictate.

And, really, that might be the lesson: any system can work, if the GM and the players are up to it. (Although I will hate forever Traveller’s chargen system).

Discussion

Comments are moderated whenever I remember that I have a blog.

There are no comments on this article.