# Owner: glow
# KeyID: E65A8520F36AEE13CFE4F56BEB8FE331063A4794
# Key: https://glow.li/pgp
# Verify: curl "https://glow.li/posts/fantasymap/index.html.asc" | gpg
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512

+++
{
    "css": ["map.css", "../dist/assets/leaflet/dist/leaflet.css"],
    "date": "2018-12-28 15:11",
    "layout": "post",
    "oldurls": ["technology/2018/12/28/fantasymap/"],
    "pinned": 3,
    "sharingimage": "dist/fantasymap/yuba.webp",
    "tags": [
        "Technology",
        "Worldbuilding",
        "Showcase",
        "Vim",
        "Terminal",
        "Web_Development",
        "Map",
        "Project",
        "Interactive"
    ],
    "title": "Drawing maps using a text editor"
}
+++
[<?= $site['fullscreen_icon']; ?>View fullscreen](fantasymap/)

<div class="fantasymap map"></div>
To calm myself I like to "draw" maps. This is one of them. Try exploring it.

View it in the terminal

```
curl -s <?= $URL; ?>/map | less -RS
```

<!--more-->

16-color fallback

```
curl -s <?= $URL; ?>/map16 | less -RS
```

## History of the map {#history}

<?= video('history.webm', 'dist/fantasymap/history'); ?>

## Interesting Places {#places}

To make working with the map a lot easier, I created recipes that generate only small sections of the map. Because I don't always have to regenerate the whole map, and don't have to find the place every time it gets much faster. This also means that there are recipes for almost all interesting (hand drawn) places on the map.

<?php
$formats = ['.webp', '-monochrome.webp', '.svg', '.html', '.ansi', '-16color.ansi', '-monochrome.svg', '-monochrome.html', '-monochrome.ansi'];
$recpath = '_fantasymap/dist/recipes';
$files = scandir($recpath);
$files = array_slice($files, 2);

foreach ($files as $file) {
    $name = substr($file, 0, -4);
    $rec = parse_ini_file($recpath . '/' . $file);
    if (array_key_exists('name', $rec)) {
        $title = $rec['name'];
    } else {
        $title = $name;
    }
    $imgfile = "{$URL}/dist/fantasymap/{$name}.webp";

    $link = '[' . $title . '](' . $imgfile . ')';
    if ($name == 'whole') {
        $link = "[{$name}]({$URL}/fantasymap/)";
    }
    echo '- ' . $link . "\n";
    //echo("![](".$imgfile."){.right }\n");
    $output = "\n";
    foreach ($formats as $format) {
        $formatfilename = str_replace(['.', '-'], ' ', ltrim($format, '-.'));
        if (is_file('dist/fantasymap/' . $name . $format)) {
            $output .= "    - [{$formatfilename}]({$URL}/dist/fantasymap/{$name}{$format})\n";
        }
    }
    echo "{$output}\n";
}
?>

## Drawing the map {#drawing}

While I did draw maps using GIMP before, I wanted something more portable, as in I could do it in the terminal and my phone using <?= tag('Termux'); ?>. That's why this map is "written". The source file will look like weird text, and then a converter will convert it into colors and Unicode symbols.

<div class="block maptext-container">
<pre class="maptext">
<?= $inc('../_fantasymap/dist/kalau.txt'); ?>
</pre>
</div>

![Extract from the Map](dist/fantasymap/kalau.webp){.block}

At first the source will look like gibberish, but it's actually always just one letter per tile.

### Map key {#key}

<div class="block maptext-container">
<pre class="maptext">
<?= $inc('../_fantasymap/dist/help-monochrome.ansi'); ?>
</pre>
</div>

## Difficulties with certain formats

The generator can generate many different formats, but piping the ANSI-colored output to `less -RS` is the best way.

### PNG

It can technically do PNG, and it's doing that for generating the tiles for the interactive map, but displaying the whole map as a single PNG would use about 6 Gb of video RAM and a really beefy computer to render. I tried; eventually my computer will run out of RAM before completing. That's why I even bothered with the tiled map.

## Repository {#repo}

You can view the generator and the map source in this repository. If you want to make your own town in my map, shoot me a pull request.

https://github.com/Neo-Oli/fantasymap

## How I got the initial map {#initial}

The original template for the map was generated with this [fantasy map generator](https://donjon.bin.sh/world/). This huge PNG I indexed to a few colors.
[![Indexed Map](media/images/map-archive)](media/images/big/map-archive)

This file I then converted into the X [PixMap file format](https://en.wikipedia.org/wiki/X_PixMap)

```
/* XPM */
static char * /home/glow/fantasymap/map_xpm[] = {
"1000 500 6 1",
" 	c #130903",
".	c #1A0707",
"X	c #09E1F4",
"o	c #5C3D06",
"O	c #245950",
"+	c #DCCECE",
/* pixels */
"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii[...]",
"iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii[...]",
[...]
```

After this I just copy-and-replaced a few things and ended up with the blank map, to which I added towns streets and did large scale landscaping.
-----BEGIN PGP SIGNATURE-----

iQIzBAEBCgAdFiEE5lqFIPNq7hPP5PVr64/jMQY6R5QFAmRuqFIACgkQ64/jMQY6
R5QV4Q//XUnRrM0IM00PzboawizN727oX1RRk2gtB837mHHAn4mxsn07mKMmTZw2
rUFMjRWBriN688n2ylyorvCjvKeal7TLeSgUdSuq0RUVEXqzugXJym7LL47hxJgr
zNui7UVywopz4VLJNe7LYB4/RrX0YZv25MCu0CI7m6J2W4jMGUOP+Y6lLuJ9qD3r
XkvICdsrICs9z2eFlMK5gQh+eV2KICoXQQ8qlJBBJ65DEvR2wPhuf9wWI6BG7hjQ
cd9k7E5xYqHN7GxOkBqp7FawW73+iJ39xyMJ7PuTCO8Rh/mD/S3FnznJAv3CdAgL
+13X3kEdiyIbvNA6GA4Z48BU98yKZFgtqqX/s5zp1EX26S3fgOFAIdfEqggV/a4E
ICCf6Vz9G72d6BmwqHFjL0uIYtRonL6XANOEasPmQxRVcuWpfPCEKtL9/Nr/HhXz
YONISprkM9v9JYZaF9kolo+KqWkvggRwBPF1ySbo9yC4y8oa0EDToHNoptuqTyfa
AC51HTzvYSAoiurgW2DrwIQGthG49Hk1DSrsOfpT9mUhdy2hZ/Drh2vvB8SmLGL7
2HQjOonMCXkaZiLrOsFBtT35qb6olEtUd3Ry6YAruww6/AYvcWFAZwck4hYOGm3K
iYs90ub0xCBWDajQ+N4Xqe6WFNyWjhRkQBCdcKHEOTL3douWpO0=
=pBTq
-----END PGP SIGNATURE-----