Map Maker

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

—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 h & k
Click Undo to restore the map before the last tile or region click
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.

I will be giving this program updates every once in a while. They will be listed below of what had changed. They can range from small bug fixes to major features.

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.
<textarea id="comment"></textarea> - add a saved comment box to a note.
<bhr></bhr> - add a bold brown horizontal rule.
<space></space> - add a quarter-line vertical gap.

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.

Update 3 - Markers

Markers! (Tile scope)

You can add a marker to do things like mark say player locations.
The UI for them is similar to keywords, should be easy to figure out.
Just for an example usage, you can put in a character note into the goto box, so picking the marker will take you to the charcter's infomation.

New HTML element: The textarea

I added proper support for the textarea element.
If it's wrapped in <li> tags, it will have some basic calculator functionality.
Basically, "number (+-*/ number)" will be evaluated when you press enter.
You can use this for like tracking a players HP, so you can just type say (-5) and it'll update the value.

Updated random tag

Using the format: "default,num:value,num:name" will use weighted randomization based on the numbers provided.
"test,5:apple,2:banana" will select "apple" with a 5/7 chance and "banana" with a 2/7 chance.
Also, dice tags work in random selections now - note that it requires a shift click to roll the dice when used in this context.

Updated dice parsing

Keywords are now supported in dice expressions.
Doing say "[1d20 (+dex)]" will add the value of the "dex" keyword to the roll now.
(this is local-keywords only created with <keyword> tags) - not the global keywords.

Charcter templates

I added a templates catagory, I included a basic charcter template, but you can make your own as well.

Other

Updated ul to have brown borders in notes.
Added a 'bhr' tag (bold-horizontal line)
Added a 'space' tag (1/4th line spacing)

Update 4 - Connected

Server-side storage!

I have intergrated firebase for server-side storage.
Just type in a id and click upload, give the players that URL.
use #ignore at a start of a note (or class="ignore" for one element) to hide it from uploaded view.

undo functionality

Yes, I finally added an undo button!

Pixel-mode imporvements

Added tools from my pixel-art editor to this program.
- Selecting pixels
- Color stepping (6/7/8) = channel, (+/-) for %, (h/k) to step.
- Line tool (l - connect the dots with selected pixels)
- alt+f to select fill, s to select color.

Update 5 - Maskin and tilin

Tile masking!

I have implimented tile masking.
Select some tiles, then hit 'm' to focus on those tiles. It mask everything else
You can use this to say, not accidently effect neighboring tiles in pixel mode, or safeguarding areas.

Special masks

Certain mask shapes I'll be adding special features too.
The first one, if you add a mask to a 4x4 region you may notice some darkened pixels.
Treat that as a tile template - everything darkened is walls, everything else is floor
Then select the 4x4 again and press m again.
Your brush will swap tiles placed based on that tileset, saving a LOT of time if used right.
Or if your lazy to create 16 tiles, just fill the all light and all dark tiles (#3 and #7), and only select those before exiting mask, and it'll generate the rest of the set for you.

Fixed Issues/minor changes

Swaped tile cycle to h/k keybinds, to match color-step controls.
Line tool works in tilemode, albiet a little worse due to not storing selection in order like pixel mode.
Swapped raterize button for a download image button.
Stopped a crash shen deleting a tile, where none would be selected and you try placing it. Now you just place the add tile button instead. Since well, perhaps you should make one.
Adjusted the fill algorithm. Should not feel different from before, however now it allows bewtween chunks if a mask is active.
Tile-outline tool now outlines selection, without outlining region borders as well.

Notes

Are you sure?