[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. 

Read More