Index ¦ Archives ¦ Atom

Interactive Campaign Map

I created the Interactive Campaign Map as a proof of concept for a local gaming group I was a part of before I moved away. The idea behind it was to let campaign arbitrators and GMs create an interactive map for use in their tabletop or roleplaying games. It is a gaming aid made to help people tell a story and visually show players' progress throughout the whole campaign. I designed it so both GMs and players could follow along with a running campaign online and keep up to date with everything that may have happened. It is made with Leaflet.js which is an open-source JavaScript library made for mobile-friendly interactive maps. More information about Leaflet.js can be found in the GitHub Repository and a brief description of it is shown below.

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.

     – Leaflet.js Website

Thanks to Leaflet's powerful features there are many things that you can do with the Interactive Campaign Map just like you would with any modern interactive map you might find on Google or various other websites. As this was a proof of concept I didn't integrate them all into my design and focused on the ones that I thought would be needed most by GMs and players alike. The created maps can include, amongst other things, pins showing locations, pop-ups which could include information relevant to the campaign and layers to show the progression through a campaign as the weeks went on.

What Does It Look Like?

As mentioned earlier the general look and feel of the map should be familiar to anyone who has seen an interactive map online before and because you design it yourself it will look different almost every time. My proof of concept was very poorly designed if I'm honest as I only wanted to show how it worked rather than putting too much effort into polishing the design and tailoring it to a campaign that didn't exist at the time. A user of the project got in touch with me a while ago to show me what they had created and honestly, I was blown away by how great it looked and the amount of detail and effort they put into creating it. The following screenshots are taken from their map, it was created by @kdalkarl and is available to view at

interactive-campaign-map-01-1880x978 interactive-campaign-map-02-1880x978 interactive-campaign-map-03-1880x978 interactive-campaign-map-04-1880x978

– User-created map by @kdalkarl available to view at

Since moving I haven't been able to find a local gaming group that has had reliable, regular meetups that I had the time/availability to attend but hopefully, I will find one soon and be able to use this project in a real campaign. If you want to find out more information about the project and start creating your own interactive maps then please check out the project links that I have listed down below.

Project Links

For more information about the Interactive Campaign Map check out these links.

© @hreikin. Built using Pelican. Theme by Giulio Fidente on github.