Tracking Tintin’s Whereabouts with Mapbox and React
The Adventures of Tintin remains a classic series which brings joy to readers who pick up the book for their first or umpteenth time. To celebrate this series, we decided to create a map which provides both a time and location-based illustration of Tintin’s global escapades.
The map features a time slider so that you can follow Tintin’s chronological journey across the world. Amazing to see almost every populated continent covered — Tintin technically even makes it to the Australian continent, though this is is not explicitly shown in the book (Flight 714 to Sydney). While there were many Tintin adventures which took place in Brussels, we gave a special shoutout to Marlinspike Hall (Moulinsart) in its first appearance (The Secret of the Unicorn).
Creating the App:
The process of creating the map involved two main components: the React components and the styling.
React Components:
We built the map with React and Visgl’s react-map-gl package, before adding the slider, side bar, and popup features. Data points were compiled in a csv file, before being converted to JSON format. For this, we used Mapbox’s csv2geojson package, allowing for an easy conversion. We imported the data directly from the JSON file, before being loaded as a component with the ComponentDidMount() method:
The data is filtered based on the value of the slider. A change in this value alters the state variable selectedYear, which in gturn invokes the filterYear function. For example, if the slider value is changed to 1949, the selectedYear variable will be set to 1949, and the filterYear function will filter the data from 1930 to 1949 (inclusive).
Our data points are displayed using the react-map-gl Marker component and a generic Font Awesome icon. We loop over our data and return a marker for each lat/long value.
When the user clicks on a specific marker, the selectedLocation state variable is set to the new location, allowing the popup to appear — this displays the book’s French cover, along with its release year and the marker location. The react-map-gl package contains a Popup component, which simplifies this process. When our state variable selectedLocation is not null, it will show the popup; clicking anywhere aside from the popup and markers will change the state of selectedLocation back to null.
Style:
The first step was to create a palette representative of Tintin. We made sure to shout out Hergé’s classic Tintin shirt by giving all bodies of water a characteristically light blue color. Meanwhile, the distinctive orange hue that represents the low lying regions of the world is a shoutout to Tintin’s hair — you’ll also notice that color as a background to Hergé’s name on the title of Le Temple Du Soleil. The markers show the color of Captain Haddock’s characteristic dark blue sweater.
The popups are styled with some simple CSS formatting. We decided to give the .side-bar and .popup an opacity of .95 so that the basemap can always be showing to a degree. We also decided to keep the Tintin covers at a fixed 20% of the screen, so that they remain prominent whether you’re at Zoom 1 or Zoom 20.
This was a fun map to build, and opened the door to a world of possibilities and use cases for using a time slider to illustrate an amazing journey over the years. We hope Tintin enthusiasts find this map to be a visual, refreshing reminder of the joy Tintin and Snowy (Milou) have brought us all.
Github Link: https://github.com/stefangouyet/tintin_map
Map Link: http://tintin-map.uc.r.appspot.com/
This post was republished on my personal blog on September 10, 2020.
