Map Maker

Tiles

Welcome!

- This is a map maker for my 3d printed tile system for D&D.
- It's fully open source - do what you want, just don't sell it. I don't care.
- This is a Unfolding program - It's functionality increases as you learn. It will look stupid simple and weak at first.
- I provided a simple guided tutorial below.

—The basics—

~How to design a map

Left-click to draw
Click tile in top left to select it
The x is your eraser
Mouse wheel to zoom
Middle-drag to pan
Click 'Download Map' to save your creation

~Digital to real-world

Like I said in the beginning, this is for my 3d printed tile system.
You need a 3d printer to use it in full.
If you don't have one, you can still use it digitally, or simply print it out on paper.

But for those who do, here's how to get your map into the real world:

First, download the map, same way as before.
Click the 'Get STLS' button to download the STLS for your printer.
Print the Mats in TPU (95A)
Everything else is PLA
Print out the tiles
Cut them out
Use the puncher to peirce the paper
Then put a pin in the holes
Everything else builds from this structure. You can even make your own if you know some basic modeling, from the base pins.

—Speeding up—

"This would take ages!"

Placing tile by tile is slow - we need bigger brushes.

Starting simple...

Change brush size with 1-9

Also, going to that top toolbar is annoying.

Right-click to erase
Cycle item with q & e
Ctrl to eyedrop tile

Another method to place many files...

Hold shift to box-place
Press F to fill

You may have noticed that ctrl left a weird brown box... wonder what that is...

—Taking note—

~Not one google doc needed!

Press N to open Notes

This is the notes menu!

It's a simple way to keep track of your thousands of notes.

Global notes are for general campaign notes that apply to the entire map.

There's also the Keywords section, where you can highlight important terms and add a easy popup-description or link a note page.

You can click the colors to change it's color on the map.

Eyedropping (ctrl) basically anything on the map will open a note page for it

We'll come back to notes later, once we have a better understanding of the map's structure.

—Accelerating—

~The all powerful Select tool!

Press s to select a tile area
Right-click to deselect
Press c to copy selection
Press v to show clipboard
Press v agian to paste
(right click cancels it)

Note that your cursor position matters when you copy - It's copied relative to your cursor position.

However, we can do better then just selecting areas.

Hold alt to select tiles
Press x to delete selection
F will fill selection

Works same way as before - just free-form (:

Alt is a universal modifier to select - Try holing alt + shift to select a box.

And your now placing tiles very fast! So fast in fact... it's getting really messy, and too much to make into a real, playable map...

—Zooming out—

~Litterally, zooming out.

What your looking at right now is Tile scope - the view of individual tiles.

But we can zoom out to see the bigger picture - Region scope.

Zoom out with the scroll wheel until it turns a green shade.

Welcome to Region Scope!

Here, instead of placing tiles, you place regions of them.

All tile-scope tools that can, will work in region scope.

Now, before we continue, I want to remind you that every tile is 1 inch in real life.

So, if you zoom out to region scope, and place a 1x1 region, that is 8x8 inches in real life.

For a size comparason, filling the screen in region mode right at the scope border is taller then you. Unless your above 8 feet in height.

So, to create massive, open wordly feel maps, we will need a way to properly scale them.

Oh, by the way, if you zoom out even further you will go into space. It's very easy to get lost in space.

—H U G E maps—

~Far too large to fit on a table

Place some regions, and select them.
Then, press g to group them.
Then, eyedrop a region in the group.

You will see that all regions not in the group have been darkened.

Note that pressing g again will just randomly generate a color.

To properly add or remove from a group, you can:

Eyedrop the colored square in the top-left of a region to select it's group
You can now choose what regions are in the group by drawing

However, it is kinda hard to tell the order in which we play the map...

—Scribbling—

~Plain drawing is nice to have

Go into [Tile scope]
Click a to toggle annotate mode
Now just draw on the map
Changing brush size changes the eraser radius

And yes, eyedropping a scribble will add it to the notes. Like I said, just about anything on the map can be noted.

On the topic of notes, let's talk about how to use them to their fullest potential.

—Fancy notes—

~The all powerful note system!

You have a general idea of how to make maps, maybe you have played around with the note system already.

When you create a basic note on the map and start editing, you can use HTML syntax to format the text how you want.

Heres's a list of the core HTML tags you can use:

<strong>Bold</strong>
<em>Italic</em>
<u>Underline</u>
<s>Strikethrough</s>
<br>Line break
<a href="url">Link</a>
<img src="url" alt="description">Image
<ul><li>List item</li></ul>Unordered list
<ol><li>List item</li></ol>Ordered list
<h1>Heading 1</h1> to <h6>Heading 6</h6>
<span style="color: red;">Color</span>
<span style="font-size: 18px;">Large text</span>
<details><summary>Details</summary><p>More information</p></details>

For the most part, you will find <details> and <h1> to <h6> most useful for organizing information.

Like I said though, you can use any HTML tags in your notes. Including script and style tags, which can be used to add custom functionality and styling to your notes. I do not reccomend trying to generate elements dynamically with these tags, however, as it will break UI lol

Also, if you didn't know, you can find element ids/classes by right-clicking on them and selecting "Inspect" (or press F12) in your browser's developer tools.

—Notes to notes—

~The art of linking notes together

Say you want to link two notes together. You can do this by creating a keyword in one note that points to the other note.

Go to the Note Browser > Keywords
Click "Add Keyword"
Enter a keyword name and type the key for the note you want to link to in the 'goto' field

Different categories of notes are specified by using different keywords.

global_Title - Global notes
regionX_regionY - Region-specific notes
regionX_regionY_tileX_tileY - Tile-specific notes
group_#hex - Group notes
scribble_# - Scribble notes

—Zooming... In?—

~The final frontier

So, we have a map, and we have notes. But what if we want to zoom in even further? What if we want to see the individual pixels of a tile?

Well, you can do that too! If you keep zooming in, you will eventually reach pixel scope. Here, you can edit the individual pixels of a tile.

Grayscale only here - no colors since well, it's ment to be a printed medium.

You can click the + icon to add a new tile type, and click Backspace to delete the currently select one.

Warning, though. Be careful to not accidentally delete important data, editing or deleting a tile effects every instance of that tile, not just the one you're editing.

—The end—

..finally...

Well, that's all I have to say for now. I hope you enjoy using this map maker as much as I enjoyed making it.

For some devleopment-related stats:

Time spent: Roughly 25 hours within 3 days
Lines of code: 6671 lines of javascript, 478 lines of css, and 289 lines of HTML
AI usage: Almost none. I did use a bit of generative AI here and there as last-minute touch ups or debugging support (it's better at finding silly human errors) I force it to add JSDocs on any function it touches - so anywhere you see JSDocs in this code, it was modifed in some way by AI.

I am Elijah Delima, known online as @100sidedice. My main website: 100sidedice.github.io

Update 1 - Variables

This is the first update to the map maker.

Just a simple UX improvement, Variables. They allow you to store and reuse text across multiple notes, so you don't have to type the same thing over and over again.

Wrap a note section in <var key="variableName">(Your variable content)</var> to store a variable.
Then, in any note, you can use <paste>variableName</paste> to insert the variable's value.

Bug fixes

Fixed an issue where if you opened the page, while another window is in focus, the page would not respond to any user input.
Fixed via properly giving the canvas a Tab index, and using the browsers focus system instead of the mouse-over event.

Update 2 - Cross-platform

You can now use this map maker on tablets, phones, and laptops!

Cross-platform support

Added touch input, and portrait-mode UI for phones.
Added trackpad support - use ctrl + scroll to zoom, 2 fingers pan.

New HTML elements!

<keyword>keyword content:value</keyword> - add a local keyword.
<value>value name:value</value> - Similar to keyword, but only the 1 word.
<random>name,a,b,c</random> - randomly select one of the values.

The dice system!

Typing something like [5d6] will turn it into a clickable dice roller.
You can add settings in (parenthisis) to modify it.
Examples
[d6]
[10d6]
[10d6 (*2)] Multiplies
[10d6 (+5)] Adds
[10d6 (adv)] Advantage to full roll
[10d6 (adv-all)] Advantage to each die
[10d6 (dis)] Disadvantage to roll
[10d6 (dis-all)] Disadvantage to each die
Hover over a result to see details of it.

Bug fixes/UX imporvements

Minor control-related adjustments
Added a proper toolbar, so you don't need to use hotkeys for everything
Improved note text area: alt to move lines, ctrl+alt to duplicate lines, tab adds 4 spaces
Added a list of some html tags at the top beneath the color buttons
Note that all html tags work - it's just a subset.

Notes

Are you sure?