I played a table-top RPG game during the lockdown and thought it would be cool to be able to play with friends online. Of course, there are lots of RPG websites full of cool features to manage online games, but I found that these need quite a lot of setup and what we wanted was just to have a lightweight shared interactive map that was quick to setup.

This was an interesting exercise and I built the prototype using Google’s Firebase as a real-time database and Leaflet.js to handle the interactive maps. By using a tile approach (similar to Google Maps, etc.) I was able to turn high-definition image maps into responsive and lightweight zoomable maps, like the examples below. Each character in the map can be dragged, and the changes are immediately visible in every browser that has the map open (these examples are static though).



I also created a simple form that would allow you to select your map image and the desired number of characters with their icons, and it would automatically create tiles based on the map image at different zoom levels, and host everything online, giving you an url that you can share with the other players.

Although this project is not online anymore, full code is available in Github as linked above.


License: MIT

interactive-fantasy-map is available under an MIT license.