Javascript, HTML, and CSS were used to generate this random world map showing continents and elevation.

Coding a Fantasy World Map, Part I

This article is part of a series on creating fantasy world maps using javascript and other tools. Part I describes some of the features you may be looking for when map-making.

Bob Killion
6 min readAug 26, 2021

--

Introduction

Maps help tell stories. If you’ve ever read Lord of the Rings or Game of Thrones, you probably found yourself turning to the map page frequently to see where the action you are reading about is happening in relation to the world of the novel.

I’ve been writing fantasy and science fiction since I was a kid. It brings me so much joy. In college, my friends introduced me to a great outlet for that in Dungeons and Dragons, an interactive storytelling game where one player, the storyteller (a.k.a Dungeon Master or DM) presents a story to the other players. The players take on the roles of characters and use dice to determine the outcomes of their actions in the story.

Map of Middle Earth from J.R.R. Tolkein’s Lord of the Rings
A map of Middle Earth from J.R.R. Tolkien’s Lord of the Rings

In writing a novel or designing a game, creating a map can really make it come alive. Sometimes it’s very practical (your players need a map of their immediate surroundings to know where they can move and what they can interact with) and sometimes it just adds flavor (you are curious about what else is in this world). Either way, I often find that a map not only gives more life to my story but it plants seeds for new ideas. (What’s on this island over here…? What’s in the middle of this forest…?)

Those seeds of new ideas are what led me on a journey of map-making as adventurous as the game itself. In this series, I’d like to share that journey with you. It is a journey that spans several platforms from web tools, to Google Sheets, to Javascript. And the journey continues as I learn new tools for creating maps and web applications. Are you ready?

Once upon a time, there was a world that needed a map…

Part I: Features

My first map was hand-drawn on a blank sheet of white printer paper. It was a map of Greenshore, a peninsula in a world called Sunland. I had originally started making the world of Sunland for a Dungeons and Dragons game, but as I was drawing it out, short story ideas began to emerge from the landscape. Greenshore had a road that went all along the coast. I made towns about every 20 miles (a typical day’s walking distance) along that road. The very last town was called Vespazzi. I imagined a town created around a vacation villa built by a wealthy family called the Vespazzis. Most of the family had died off over the years, but the town remained. Salty air, the sound of gulls, a lighthouse, the “last stop” on the wagonway, a rocky shoreline… all of these details emerged in my writing simply from plotting the location on a map.

This hastily drawn map of a tiny hamlet in the forest leaves much to be desired.

Unfortunately, I’m not a great artist. Also, the freedom of pen and paper is enchanting, but it presents many drawbacks when compared to digital alternatives. Drawing my map was great, but I couldn’t change it easily, it wasn’t interactive in any way, and I would have a lot more drawing on my hands if I wanted to expand the world.

As my map-making evolved, I found myself wanting several features:

Editing: Is anything ever really finished in the creative process? Certainly not for me! I want to be able to add to, delete from, and change my map. Using layers in draw tools such as Adobe Photoshop or Sketchbook can be great for this.

Data: In my example above, the town of Vespazzi is not simply a point on a map. It has history, people, customs, points of interest, and more. Being able to link points on our map with information about them is key to interactivity.

World Anvil has several tools for plotting points and overlays with information on your map.

Overlay: What happens if we want to view different features of our map such as political boundaries vs. geography? Do we try to cram all that information into one map? Do we create several maps? It helps to have the basis of a map and be able to toggle or view information on top of it for reference. WorldAnvil makes great use of this feature.

Randomization: We may not want to create every single bit of our map by hand. If we can generate all or part of our maps automatically, it not only makes the process faster, it can spark new ideas and give depth to our world. On donjon, you can randomly generate everything from treasure to space jobs. Oh, and did I mention that you can generate AN ENTIRE WORLD MAP?? This was a big inspiration for me in my map-making process.

A random world map with hex grid generated from donjon.

Realism: When creating a map, I often found myself wondering just how realistic it was. Would there really be a lake here? Does it make sense that I put that desert right next to the lush forest…? Reddit abounds with world-makers asking for and sharing advice on how to make their maps more realistic.

Style: Having a map that is beautiful to look at makes the creative process all the more rewarding, and using an application specifically designed for map-making means that we have pre-styled elements at our disposal. Inkarnate can help you make beautifully styled maps.

Creating a stylized map with Inkarnate.

Zoom In / Zoom Out: A world map is great if you want to look at the whole world, but what happens when you want to go deeper? A map that is too closely zoomed-in will be pixelated and missing information we might want at only that specific scale. Is it possible to create detailed sub-maps without having to start from scratch? Can our interactivity extend to zoom-ins/zoom-outs in the way that Google Maps does?

Conclusion and Going Forward

Map-making not only provides a useful tool for understanding a world, but it plants seeds for new ideas in storytelling and world-building. Creating a map by hand gives the creator complete control, but creating a map digitally can add functionality and depth to a greater degree.

So where does this leave me when it comes to creating my maps? In Part II, I will show how I used formulas and conditional rendering in Google Sheets to create and view maps that I could edit easily, integrate with game data, stylize (minimally), and more easily break into sub-maps.

--

--