# 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'); ?>

## 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/jMQY6R5QFAmZFSz0ACgkQ64/jMQY6
R5QiahAApCc2eB3ewdObOdRjtvNUinzSL4p/dVqCxNvB2tMqNTKjfnTxISGJ/agg
Ys6r5hqQ7dUzkioReK9zsLUaZkcQUqRzZ6zsvECFLqTLVtVOWn/XzGM1wa8ERGcS
snwrLb6uEP64xjJay22vwn6O35CNSkT6VgRNPWSx05z/kozCZIEueSwQGVVm8ZDe
ltHUTUI9Lx4Ex6LMB+KQBp8xNr9VrIz4rmkBPjNaKsNh4RXZvBW2aviCoNBUYf6c
206HmC1q/uiWuFT4AAn7hVft5nszSM9NmAdsoFxTQYXZNeBMg2PO6MxoKo+F9P0Z
QoTklHqVtDbP4GPmICvXNjnoHQ3Pqwyzu8qOrwVLlz512I584lcOGk5hixht/CKf
C/su5vlEbHoLVQOuW3vfxNqWZiVd90HXwwpam9F34vjCzKLlvCDYnsc063UKpdKA
2AhST6ENzCG0QgsJLzcKEtX4knYWWWD/yjUODCdS9lcZgXzwJaOs5GSfqrwWAkPA
mQdnPMoRXSwq0lXe55Y7uHd3+tb1qqJiA9yZHz26D7xaplmX3fibr0qxBsT+kHoZ
XopHkWz+MBn8JeGwQiElQ8V5TNeAfiIqggPmCBXv9a0k4505O7OnpzIHfqa/m4VO
BF95MMtuYzQJ5zTJZDAWs4ymvIlB7u/dra6abpfz/QC45Jno/so=
=HKYb
-----END PGP SIGNATURE-----