Create maps for D&D and other tabletop RPGs. Improved map exploration by hiding undiscovered rooms until they're entered.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Example Maps

Halmond's Laboratory:
Navigate using arrow keys, mouse drag, or touch. Zoom in/out using your browser's zoom tool. This map is used with the author's permission.

Salt Hall:
This map was created by Daniel Somerville and used with his permission. You can find this map and more at his DeviantArt gallery.


This is a library to help you create maps for D&D and other tabletop RPGs. It uses JavaScript and HTML5 canvas. Look at battle-map-explorer-dev.js and example-map.html to get started. The maps should work across all modern web browsers, operating systems, smart phones, and tablets.

Creating a map involves manually tracing the coordinates of walls and obstacles. The coordinates match the pixel positions of the background image (with the origin in the top-left). One way to find the coordinates is to load an image using this library (without any walls), navigate to a place you want to record, and press 'space'. This will log the coordinates at the crosshair into your browser's developer console. You can press '/' to adjust the movement speed to help fine-tune coordinates.

This project uses two external JavaScript libraries: visibility-polygon-js and hammer.js.

Contact me at if you have any questions or feature requests.