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.
1. 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.
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.
polygon in the SVG specification
1. 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](https://alexschroeder.ch/text-mapper?map=#+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
https://alexschroeder.ch/text-mapper?map=#+map+definition
#+attributes empty+attributes+fill="#ffffff"+stroke="black"+stroke-width="3" plain+attributes+fill="#7cfc00"+stroke="black"+stroke-width="3" plain+path+attributes+fill="#76ee00" forest+attributes+fill="#228b22"+stroke="black"+stroke-width="3" hill+attributes+fill="#daa520"+stroke="black"+stroke-width="3" hill+path+attributes+fill="#b8860b" 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"
#+add+shapes 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
text+font-size="20pt"+dy="15px" "Example map")](https://campaignwiki.org/text-mapper?map=#+map+definition%0D%0A0101+mountain%0D%0A0102+mountain%0D%0A0103+hill%0D%0A0104+forest%0D%0A0201+mountain%0D%0A0202+hill%0D%0A0203+coast%0D%0A0204+empty%0D%0A0301+mountain%0D%0A0302+mountain%0D%0A0303+plain%0D%0A0304+sea%0D%0A0401+hill%0D%0A0402+sand%0D%0A0403+forest%0D%0A%0D%0A#+attributes%0D%0Aempty+attributes+fill=%22#ffffff%22+stroke=%22black%22+stroke-width=%223%22%0D%0Aplain+attributes+fill=%22#7cfc00%22+stroke=%22black%22+stroke-width=%223%22%0D%0Aplain+path+attributes+fill=%22#76ee00%22%0D%0Aforest+attributes+fill=%22#228b22%22+stroke=%22black%22+stroke-width=%223%22%0D%0Ahill+attributes+fill=%22#daa520%22+stroke=%22black%22+stroke-width=%223%22%0D%0Ahill+path+attributes+fill=%22#b8860b%22%0D%0Amountain+attributes+fill=%22#708090%22+stroke=%22black%22+stroke-width=%223%22%0D%0Asand+attributes+fill=%22#eedd82%22+stroke=%22black%22+stroke-width=%223%22%0D%0Acoast+attributes+fill=%22#7fffd4%22+stroke=%22black%22+stroke-width=%223%22%0D%0Asea+attributes+fill=%22#4169e1%22+stroke=%22black%22+stroke-width=%223%22%0D%0A%0D%0A#+add+shapes%0D%0Ahill+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%0D%0A%0D%0Aplain+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%0D%0A%0D%0Atext+font-size=%2220pt%22+dy=%2215px%22)
(Also on GitHub.)
#RPG #Hex #Maps #Software #Text Mapper