[Tutorial] Building an Interactive Fantasy Map in HTML

by Michael Kuroda

TL;DR

If you’re like me and want to get to the point, here are the basic steps:

1. Azgaar World Generator
   1. Build your world with Height, Biomes(optional), Markers(optional)
   2. Export GeoJson Cells and GeoJson Markers(if used)
2. Mapbox
   1. Create an account
   2. Make a new Style
   3. Import GeoJson file
   4. Edit map
   5. Grab your accessToken and Style link
3. HTML
   1. Use the Tutorial of your choosing, but with your own Style
   2. Play around with features such as onClick and flyto.

An Introduction

A few days ago, I noticed a very interesting Reddit Post around a website (https://history-maps.com/) that uses JavaScript and HTML to display history in relation to the geographic location of each event. Being a history nerd, I found the page to be extremely interesting. But being a worldbuilder, I wondered whether it would be possible to go a little further and build a history map around a fictional world.
​
The first thing I did was explore the Reddit comment section. One commenter mentioned the Mapbox API, and u/vaznok mentioned using GeoJson data generated in Azgaar world generator. A great start to this journey. 

Azgaar World Generator

I couldn’t recommend this application enough in terms of worldbuilding potential. Azgaar World Generator made it easy to upload a picture from one of my latest worldbuilding posts (slightly modified for the import), and edit the landmasses to look a little better. The fractal land patterns aren’t ideal, but building a proper GeoJson dataset is practically impossible to make otherwise. And I did enjoy creating biomes and changing population sizes throughout the map.

Some things to note when building and exporting a world from Azgaar World Generator include:

1. Don’t expect an easy transition to Mapbox. Most data is exported as just data. You will have to edit a map extensively afterwards.
2. Not everything is important in the end. I edited populations, rivers, etc. I couldn’t import rivers at all and had to completely lose my work in that area. Meanwhile, cities and population does not seem to be easily transferable to Mapbox, either.
3. Remember to click the OK button after painting anything. I had to repaint the biomes countless times because of my negligence.
4. Keep it simple. In the end, the only things I really used were Biomes, Height, and Markers

Once you finish building your world, export the data as GeoJson files. One should be a cell file and the other should be a set of your markers. You can ignore everything else. With those files ready you can begin the next step,

Working in Mapbox

Azgaar is easy to understand. Starting in Mapbox is also easy to understand. Moving the data from one program to another is a little more challenging. Firstly, you must make an account in Mapbox and note the predatory payment scheme. Next, you need to create a new style. We will just be working in the Style editor for most of our time here.

Firstly, I go to the Layers tab. Here we can add and delete Layers for our project. I started by deleting the preset layers (mostly of the real world), to make room for my own layers. This can be accomplished in Add New Layer/Upload Data. Upload your GeoJson Cell File first.

Once your data uploads, select the GeoJson Cell File as your dataset for the new layer. Under Type, select Fill-Extrusion. This way we can include some topography. Then, on one of the top tabs, switch from “Select Data,” to “Style.”

Here is where some “coding” begins. Edit the Height first. By selecting Style across data range, you can select the Height data from your GeoJson file. Do this, and make sure that your minimum value is 0, and your maximum value is around 10,000-20,000 or so. You will have to repeat this in the Color menu.

​To color your cells, all you have to do is color by the data range of height. I like to start with 0 as ocean blue, 1 as beach, and then immediately ramp up from there. 200-500 would be a good middle value, 1000-2000 is great for forests or hills, even the base of a mountain. At 10,000 you can use brown(mountains), and at 20,000 white (snow caps). If you really want to get into it, you can color it by Biome, as well!

You may notice something that says, “Style with data conditions.” If you want to style by Biome, you can make your world more immersive. Just go through the various biomes and adjust the colors accordingly. I tried to keep colors mostly like the fallback colors that each biome starts with, until getting to more exciting biomes like glacier and desert. If you have even more exciting biomes, just go crazy. 

For example, with a volcanic biome, I was able to change 0 to a bright orange color. The main color was brown, and the mountains were a dark grey. I also included a new England style deciduous forest, with some random spots of orange and red to give the map more life.

But once you’re done with this, add a new layer with your GeoJson Marker file in order to include some titles throughout your map. If you are going to edit this further in HTML, avoid using icons or circles. Instead, select Type Symbol, and disable the symbol immediately. Symbols don’t allow these markers to render properly in HTML and adding them back in HTML is more doable. If you are just exporting the map, you’re done here.

If you are instead interested in coding the map with clickable icons, you will be going to the HTML step. ​

HTML

Unfortunately, I am not an HTML coder by schooling, so you may have to use your own tutorials for this step. However, I found that Mapbox includes some neat documentation for the inclusion of custom markers, as well as for clickable markers. I used those two resources to create custom and clickable markers for my map. Meanwhile, if you swap in your own Style and access token, you should be good to follow any tutorial you wish. It’s straightforward from this point on. I recommend checking out flyto, and onclick. You can even change text color using the Paint effect. 
​
Furthermore, we had a lot of resources to pull from with our recent Reddit posts. By adding some image CSS to our code, I enhanced the map with some of these posts.  ​

In Summary

In the end, the map seems functional on both desktop and mobile. In fact, even though I have already developed my world using various in-universe drawings and a few maps, the maneuverable 3d world makes it much more immersive. The whole project took me around 14 hours of trial and error, but even then it was completely worth it. You can see the final result here. ​