Volica Islands part 1 - What am I up to?
One of my humble resolutions for 2026 was to finally start working on my first zoomable and interactive fictional map, converting my 14 years old sketches of unnamed islands into something much more alive and fun. And while my head is filled with cool ideas, features and most importantly maps, I barely can find some time and peace to systematically work on this site.
Link to the early version of the interactive map: Volica Islands
My super mobile workstation
It's mobile because I don't have a desk and free chair so the laptop lands on any place that have available surface.
First sketches
The base island maps comes from my hand-drawn maps from about 15 years ago, I use them because I stil really like those coastlines and the basic land usage.
First sketches
Context
Vectorization
I drew almost every single vector line by hand. I tried using interpolation in inkscape to draw intermediate contour height lines between those that I made by hand, but those needed many adjustments and fixing weird artifacts so I made them on my own. Each line shows a step of 50m, the highest point so far is 511m, which is conveniently the 2 to the power of 9 minus 1 - so it fits perfectly in the regular 8-bit grayscale of 256 possible shades of grey.
Added vectorized height contour lines and "the extended universe"
At first I wanted to create just one major island - the H shaped one that is small enough to be able to fill it with details on reasonable time, then I thought it would be a waste to not add at least a couple other already designed small islands.
Elementary leaflet.js script
Slapping a single image into a basic leaflet viewer with simple non geographic cooridation system is relatively easy. The tricky part is to use all the other cool features that will make it a proper map service.
Elementary leaflet.js script
I usually test it on Firefox.
The heightmap
That was the trickiest part, for a very long time I had no idea how to make those colorful heightmaps with the staple northwest shades.
The heightmap
I honestly can't tell how I did it, it supposed to be called 'Bump Map' in gimp, but I don't know how to use it and I forgot where it was in the menu.
Attempts to tiling with Python
Leaflet.js natively supports large Easter images sliced into tiles and put them together into the viewer, so when the detailed map is very large, it renders it faster. At the maximum zoom level from 0 (single tile) to 7 that I planned to create there would be .. tiles...
Tiny bat script to tile up the image by gdal library.
Apparently it's very common that gdal library is installing on some other directory and you got to carefully specify the path.
It all drives me nuts sometimes
Simultaneously to this silly project that I do
You can't really vibe code it
Not gonna lie, I tried to use some LLMs, including the one in VSCode to give me a hand and write some basic stuff that I don't have time to learn properly.
Generated slop map
Out of curiosity I asked Gemini to generated shaded mountains into the map based on the two circled green areas that I designated to be hilly. It faiiled spectacularly. It would take much more time to chat with AI models to finetune the map than to do it by hand. Even more so - it's whack, I want to have control over every pixel and vector using good old graphic software and my own imagination!
Even more planned features
One of the key feature that I'm dying to introduce are additional vector layers in json format.
subtitle
Context
Don't give up
This first chaotic attempts to launch at least the basic features of my dream map make me convinced even more that this process shouldn't be that convoluted. I bet that there are a good chunk of people that would love to create some kind of interactive fictional map, but were quickly discouraged by the lack of a single straightforward way to paste your image into a viewer, add some layers and focus of fun creative stuff. That's acrually why my site have 'Project' in the address - And for my fellow roleplayers on NationStates.net that could be a literal game changer!