Diary SiteMap RecentChanges About Contact 2013-02 Calendar


Matching Pages:

2013-02-26 Text Mapper

Recently I wanted to create a little hex map and I wanted to do it on an iPad, I wanted to eventually integrate it into my campaign wiki, I wanted it to be SVG based, and so on. All that meant, Hexographer wasn’t the appropriate tool. I needed to cook something up myself. Based on code I wrote nearly five years ago—the Old School Hex Mapper—I wrote up a little something.

I’m calling it the Text Mapper because it takes text input. No interactive fiddling with the map.

There are various sections of the input.


This is simple. Coordinates, terrain.

# map definition
0101 mountain
0102 mountain
0103 hill
0104 forest
0201 mountain
0202 hill
0203 coast
0204 empty
0301 mountain
0302 mountain
0303 plain
0304 sea
0401 hill
0402 sand
0403 forest

The rest of the input determines how things look: what colors to use, what icons to display. When you start the Text Mapper, the input area already contains an example. Start with that before doing anything else.

Terrain attributes

Now it gets tricky. For every terrain we used, the script will generate a hex. We need to provide some SVG attributes! Need documentation? Check out the polygon in the SVG specification and click on show next to presentation attributes. That’s what you should be looking at.

# attributes
empty attributes fill="#ffffff" stroke="black" stroke-width="3"
plain attributes fill="#7cfc00" stroke="black" stroke-width="3"
forest attributes fill="#228b22" stroke="black" stroke-width="3"
hill attributes fill="#daa520" stroke="black" stroke-width="3"
mountain attributes fill="#708090" stroke="black" stroke-width="3"
sand attributes fill="#eedd82" stroke="black" stroke-width="3"
coast attributes fill="#7fffd4" stroke="black" stroke-width="3"
sea attributes fill="#4169e1" stroke="black" stroke-width="3"


In order to add little icons, you can specify a path per terrain.

hill path M -42,11 C -38,5 -34,0 -28,-3 C -20,-6 -11,-5 -5,-0 C -2,2 1,6 3,9 C 4,12 2,13 0,14 C -3,9 -7,5 -13,2 C -21,-1 -30,0 -36,6 C -38,9 -40,11 -43,14 C -43,15 -44,14 -44,13 C -43,12 -43,12 -42,11 z M -5,-0 C 0,-6 7,-12 15,-16 C 21,-18 28,-17 33,-14 C 39,-11 41,-5 43,-0 C 42,2 41,5 39,2 C 37,-2 33,-8 27,-10 C 20,-13 12,-12 6,-7 C 2,-4 -1,-1 -4,1 C -7,4 -6,0 -5,-0 z

plain path M -18,-13 C -13,-6 -13,4 -8,12 C -11,14 -15,21 -18,26 C -20,17 -22,4 -28,0 C -26,-4 -21,-9 -18,-13 z M 5,-31 C 4,-19 3,-6 6,5 C 1,10 -0,14 -3,19 C -2,6 -3,-4 -4,-16 C -4,-21 2,-26 5,-31 z M 26,-1 C 16,6 19,5 9,18 C 12,3 21,-8 34,-17 C 32,-12 29,-6 27,-1 z

If you don’t want this path to be black, you need to specify attributes for the path element.

plain path attributes fill="#76ee00"
hill path attributes fill="#b8860b"

And finally, the coordinates are simple text elements.

text font-size="20pt" dy="15px"

If you wanted a black and white map, for example, you could use different strokes…

empty attributes fill="white" stroke="#b3b3ff" stroke-width="3"
mountain attributes fill="white" stroke="#b3b3ff" stroke-width="3"
hill attributes fill="white" stroke="#b3b3ff" stroke-width="3"
forest attributes fill="white" stroke="#b3b3ff" stroke-width="3"

If you want to create new path elements yourself in Inkscape, you should draw them in a rectangle from (-100,-100) to (100,100) and extract the the path info from the SVG. Yeah, adding new icons isn’t easy.

I need to add more icons. I’d also like to add multiple icons for the same terrain such that the code will pick one at random.

I wonder how easy it’s be to add text labels, roads, rivers and borders. :)

The result of the above:

Example map

(Also on GitHub.)



Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.

Show Google +1