Interactive fantasy maps

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 codex¹ 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.

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.

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.

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!