There’s always a ‘story’ in history —or in the case of HistoryMaps, hundreds of stories! An immersive, educational site that invites readers to explore history through time and geography, HistoryMaps is a beautiful example of using interactive maps as a storytelling medium. I connected with the creator of HistoryMaps, Nono Umasy, to learn more about the building of HistoryMaps.

When I first saw HistoryMaps, I assumed it was the product of a large team of creators - but it is just you! What inspired you to create it?

HistoryMaps is a passion project of mine. I have loved history since I was a child, and recently I was searching for a way to explore and study history in a way that would help me relate pieces of history to each other, spatially and temporally - and in a fun and intuitive way. When I didn’t find any other apps out there that had the features I wanted, I created one.

Almost all of the data comes from Wikipedia and a few other sources, video content comes from Youtube, and the images are mostly from Wikipedia or Pinterest. Tons of great content is out there, but it is a bit of a mess. HistoryMaps provides structure on top of all the noise, organizing the events in the right time and place. There are three main components of HistoryMaps: the Story Map, the Timeline, and the homepage’s global map. Each presents historical events in a different mode - either as immersive guided narratives, across time, or across geography.

What are some favorite aspects of what you’ve built in HistoryMaps?

‍My favorite features are the timeline and the map because they make the “where” and “when” of a historical event more intuitive. If you are talking about Napoleon, why describe what he looks like when you can show a picture. It’s the same with time and place: Show a map and show a timeline. Your brain doesn’t have to think so much. You know where things belong and where they fit in relation to other events and places; it simplifies history.

The Mapbox terrain feature also reveals another aspect of history that is sometimes glazed over or skipped altogether: The impact of geography. Geography is a powerful variable in how historical events played out - from politics to economics, religions, migrations, etc. With the nice 3D Mapbox terrain, you get the ‘aha’ moment a lot. Was geography a factor in the late dissemination of Buddhism in Tibet? Why did Napoleon go on an Egyptian expedition? A lot of these events make more sense when you look at them on a map.

The design of HistoryMaps feels very thoughtful. Where do you draw your design ideas from?

Most of my inspiration is based on everything that I ever liked growing up. Picture books, libraries, old maps, games, stories, films, illustrations, museums, paintings, storytellers, etc. In fact, each one of these influences can be seen and felt in the design and implementation of the site. 

For example, take the map styling. I have a fog layer that appears when the map is zoomed in. It creates a “fable story” look, like from an illustrated book of stories. And it also hides a lot of noise around the map to keep the focus on the most relevant locations, and it is a visual trick to make the UI elements around the map stand out. I continue that old book feel with little design touches, like using drop cap styling on the first letter of stories, or designing the menu to look more like a book’s table of contents.

Or for certain events, I end up thinking like a director with the camera controls. For most events, the map flyTo() gets randomized pitch, bearing, zoom properties. But for certain types of events, such a battle or siege, then I want to zoom in further because these are “deeper” stories with a lot of detail and you need to see them in a closer, more intimate view. Sometimes the camera should be a wide-angle, sometimes it needs to be a telephoto, so I’ve built HistoryMaps with the flexibility to allow for that.

How do you like building with Mapbox?

I’ve been using Mapbox for a few years now. I’ve encountered it first in other people’s projects. I used Leaflet before and I’ve used Google Maps in the last couple of years. Each platform does things a little differently and I like some features in one over the other, but at the moment I really like Mapbox! 

In software development, usually the best platforms are the ones that can adapt. Mapbox is coming out with a lot of mature and well executed features at a good rate. Not all APIs are created equal, Mapbox GL JS is simple to use and comprehensive. It has most of the things I want to implement. My absolute favorite part is that I can create an interactive map in minutes (literally). It’s so delightful when a library just works and doesn’t get in the way of your ideas.

As a designer, I appreciate the many features of Mapbox Studio. If you are a control freak like me, and the details matter, you want to control every pixel and I think Mapbox is the winner there. 

I would like to see more spatial analysis tools built into Mapbox, that are available in some other libraries like Pysal, Gdal, Geopandas, etc. I’m currently working on a library to create splines, using quadratic bezier curves, because I want to be able to draw smooth route lines and arcs that work well with globe and there’s no easy way to do that. Or making and editing custom geojsons for historical polygons. Putting together a suite of tools like Turf.js and geojson.io would make it much easier to create spatial data - and give clunky GIS software a run for its money!

What are some challenges that you’ve worked through in this project, and what advice would you share with other creators?

‍Most of the initial challenge was just implementing all the ideas I had. I’ve been working as a product designer in the tech industry for over 30 years and it's natural for me to create evolving products. I never run out of ideas. It’s my curse.

Some of the ideas are in the ‘I don’t know how to implement this but it would be cool if this can be done’ category, which need some experimentation and prototyping. An example of that is the ‘Storyteller mode’, which is inspired by traditional storytellers. The User can click on the “Play” button and then let the events on the timeline auto-scroll and the map will flyTo() the event marker respectively. There are a lot of moving pieces to this feature both in design and implementation, so getting it right took time. And it can still be improved. I’m currently experimenting with background music and working on a text-to-speech prototype where each event is read aloud as the map moves. It’s like a mini-movie.

If you’re getting started on a project, I’d suggest that you start with some Mapbox tutorials or watch a Youtube video to get familiar with the features of the Mapbox GL JS API. At some point, ideas will creep into your head and the muscle memory from these tutorials will make it easier to figure out solutions later on. If you’re from a design background like me, I recommend taking the time to learn how to code, if you want the freedom to implement and iterate on your own ideas. I taught myself to code during the pandemic, and now with every bit of inspiration or curiosity, I can have the immediate gratification of trying it out and exploring a rabbit hole of ideas.

What’s next for HistoryMaps?

I’ve been waiting for Globe view and I’m not disappointed. I will be having fun with this one for the next few months. Globe view just makes sense for some of the HistoryMaps content, like the Voyages of Magellan, where you want to show the whole global journey fluidly from start to finish.

The World History Timeline is one idea that I’ve wanted to implement from the start that I’m still working on. Essentially, all the events from all the stories are combined into one gigantic global timeline which can be filtered by tags or by time period. This is perfect for comparative history studies. What was going on in Central America when the Ottomans were conquering the Balkans? What was happening in Japan when the Crusades were going on? Are there any patterns? Imagine if you can find causal relationships between events or better yet, what if the platform surfaced these hidden signals for you. I’m planning on using Graph Theory on HistoryMaps to surface hidden causal relationships and/or correlation between events. I’m also a Data Scientist so it’s nice to stretch out these muscles. While HistoryMaps is my own creative project, which means I can do whatever I want, I do also want it to mature and become something enjoyed by others, which means experimenting with features that set it apart.

Thank you for sharing your inspiration and experiences with us, Nono! Explore the every-growing content on HistoryMaps and follow @nonoumasy on Twitter for his latest experiments and new features.