Interactive fantasy maps

After laying the foundations of an online encyclopaedia, I experiment with creating an interactive map for my fantasy world using HTML, JavaScript and a little PHP.

| Articles | 2 min read

I noted in a recent post that I've been experimenting with creating an online encyclopaedia for my fantasy setting. This has long been an obsession of mine, but I put the idea on hold while I completed my first series.

I've returned to the idea, because the more I write, the more world-building I have to do. The codex1 I’m building is in part to keep track of all this stuff in a central location — I also figured it might be something my readers would find interesting.

Building a system to manage articles and convert them into a website is a fairly trivial exercise, particularly when you leverage many an open-source framework.

Location template
Location template

However, sharing articles is only part of the puzzle. What I hope will make the experience come alive is including interactive maps — like Google Maps, only for my fictitious world.

So, for the last week or so, I've been experimenting with creating an interactive map component. Like Google Maps, I wanted to be able to pan and zoom across the world. I can add markers (see the orange circles below), which have a hover-triggered tooltip, and when pressed they reveal an article about the location.

Interactive map with location markers
Interactive map with location markers

To make it easy to add new locations, I've written a basic form that writes the location's details to a database. This database is then used to populate the locations layer on the map. When I publish the map, I won't include the editor. Instead, I will generate a static version of the site by dumping the database content into GeoJSON. This is to make it more secure, and so I can host it for free using Netlify like I do with this site.

Adding new locations
Adding new locations

I thought it would be a lot harder to get this far, but it fortunately it wasn’t. In three days, I've created the basic UI, a bunch of map tiles and the backend code needed to capture and serve the data. At this stage, it's still mostly a proof of concept running on my local computer. I intend to recreate a much larger world map than what I show below in my prototype.

If you want to play around with the prototype, you can do so below!


  1. I’m borrowing the word from Deck Matthews. 

Read Cadoc's Contract