An interactive Game of Thrones map
As someone who grew up with fantasy stories, I am undeniably a huge fan of the Game of Thrones series and A Song of Ice And Fire books.
Therefore, I decided back in August of 2017 to develop an interactive Game of Thrones map based on SVG, which stands for Scalable Vector Graphics.
The idea was to have an simple way of exploring the Game of Thrones world and be able to read up on different towns, regions and houses. There is also a timeline feature that will lead the user through a characters progress in the series, I will talk more about this later.
With simplicity in mind the result is a playful map.
I will go through most of the features below and also talk shortly about the future plans for the project.
Action Bar
The action bar currently has 5 actions, starting from the left:
- Toggles dropdown to select between towns, houses and regions.
- Toggles coordinates at the mouse location.
- Resets the view to default.
- Toggles the search field.
- Toggles the settings view.
Keys
One important feature was to have the map respond to user key events and that is why there exists a couple of keys to make the interaction a bit easier. To see available keys on the map, there is a Show keys setting in the settings view. Following keys are available:
ESC: Resets the view, including selected entities
F: Opens the search field
T: Opens the settings view
Q: Zooms in
E: Zooms out
W: Pans up
A: Pans left
S: Pans down
D: Pans right
Towns, Houses and Regions
Towns
Towns are represented by red circles on the map. Each region in Westeros has one large red circle and a lot of smaller ones, the large circle is the ruler of that region whilst the smaller ones are towns sworn to the ruler. In Essos, there are only large circles because there exists no ruling town in those regions.
As seen in the image above, the information box to the bottom right gives brief information about the selected town, this also applies to selected regions and houses as well as the timeline feature.
Regions
Regions are separated by a border. Some regions such as the North has islands around it, i.e Bear Island and Skagos, those are part of the North but still their own entity on the map.
Houses
Houses are not represented by any entity on the map but can be found in the list to the top right.
As seen above, each house is divided by the house name containing one or more members in it. Some of the members have a clock icon and this is what I briefly mentioned at the top, the timeline feature.
Timeline
Something I saw as an essential feature from the very beginning was the possibility to follow a characters journey throughout the series to get an understanding of how the character progress on the map in relation to all other towns and regions. This would also help the user understand how immense the world is.
The timeline feature is selected for Daenerys Targaryen. It shows her journey from the very first episode till the fourth episode in the second season which ends in Qarth.
As of now, there is no information available about what the character did in each episode which will be added in the future. Something I also realized when working with each waypoint (circle on the map) is that sometimes a character moves to more than one location during a single episode, especially in the later seasons, for this reason there are plans to add smaller steps in between each episode in order to project the character journey more accurately.
Spotify
Last but not least I also wanted in some way to include the Game of Thrones music to the map which turned out to be a hassle due to copyright laws however, for that I decided to implement a customized Spotify player to the map that plays different songs depending on which region or town is selected.
All the songs are from the tv-series composer Ramin Djawadi.
To use the feature, the user has to:
- Own a Spotify premium account.
- Connect to Spotify in the settings view
A music player can be seen in the top left corner which can be used to pause, play, stop, fast forward and rewind the current playing song.
Plans
A lot is still to be done on the map, including adding new terrain entities, implementing new houses, timeline feature for more characters, etc.
The Game of Thrones series is primarily about Westeros and Essos in terms of regions however, there exists other continents such as Sothoryos and depending on the existing content I might expand on that as well.
I also have plans to make it possible to save markers of favorite places and make the map even more personal, what this ultimately leads to is still not clear, but I have a few ideas that could potentially make it more interesting.
There has also been a few requests of a full-fledged app and that is something I intend to have a closer look at, to see what is possible and whatnot.
This was a post explaining the features and a little bit of the background to the project. I have plans in the future to write a technical post, should that be of interest.
