Mapping the Tour de France

A reflection on mapping Europe’s biggest cycling competition.

The Tour de France is the world’s most prestigious and most difficult bicycle race that attracts the world’s best riders. The race has been organised annually since 1903 except during the World Wars.

The 109th edition of the Tour de France that started in Denmark on July 1, 2022. As it draws to a close at Paris Champs-Elysees on July 24, I reflect on our learnings from covering the event with my colleague Aditi Bhandari through news graphics since 2019.

As part of our graphics coverage at Reuters, we produce route maps for the races along with elevation profiles for all 21 stages of the race.

This is quite a bit of work, especially when the whole thing needs to be done manually and on a tight deadline because —

• The route data isn’t usually available until shortly before the race.
• Data about the route markers and points of interest need to be manually gathered from the official race website.
• 22 route maps and 43 charts — 130 individual graphic assets — need to be created in English and French.

The process of making these graphics typically involves —

• Plotting the route maps using a mapping tool.
• Style them along with basemap features like roads and terrain.
• Add route markers, points of interest and labels.
• Generate elevation profiles from route data and chart them.
• Compile the assets and translate them for French editions.

Typical layout of a stage graphic. See ’em all here!

Even with the constraints, there are some obvious opportunities for optimising parts of the process—

• Streamline the data collection, even if done manually.
• Create templates and automate some of the mapping and charting.
• Manage workflow better to ease the load on a deadline.

YEAR 1

Coming to the project for the first time, there was hardly any scope to innovate except for small things on an individual level. We had the layout and style guides set with the template, so it was all about getting the individual graphic assets created.

A day into the project, Aditi’s laptop crashed…

To make things fun, she was working remotely and had access to only a PC running Windows Vista and Internet Explorer (no kidding)!

That’s when Google Sheets entered the workflow and I’m glad it did! It made it quite convenient for Aditi to collate all the data for the elevation profiles and use a chart template to make the “grey” and yellow” charts. And I could export, edit and lay them out into the final graphic.

Screenshot of a Google Sheet showing the elevation profile data and charts.

YEAR 2

By now we were familiar with what the project encompassed, so we became co-project managers and started planning ahead. We realised that nearly 30% of the work could be completed before getting the actual route data so we split the work into two stages — pre-op and op.

Pre-op

It involved data-independent tasks —

• Creating all the raw Illustrator files for the maps from the template and editing the metadata using race info from the TDF website.
• Collecting race metadata (markers, points of interest etc.) that could be added later while mapping the actual routes.

We totes loved working in Google Sheets, so we cemented it into the data and project management workflow.

Screenshot of the Google Sheet used to track the progress of the project.

Main op

Not much changed from the previous year except for the fact that now we were better prepared and had a solid workflow, albeit entirely manual. Once the route data came in, it was all hands on deck!

YEAR 3

We were in a good place and had the project well-managed, which meant we could focus on more ambitious goals that would dramatically ease the workflow. We started with the charts and explored how we could reduce the time used in editing and laying out the charts on the final graphic. By the end, we were able to speed up our graphics creation by more than an hour per stage.

There wasn’t much that could be done to speed up data collection, however, there was a lot of scope in rethinking how we made the charts.

Collected data for all the routes in Google Sheets.

Charts generated from the data on Google Sheets — “yellow” elevation profile (left) and “grey” stage marker (right).

If only there was a chart-generator that I could connect to Google Sheets that would produce the charts I could simply drop into the final layout…

I spent about a week in the pre-op phase and built two such chart generators using D3.js. Combined with a simple Google Chrome plugin, it exported 21 grey charts and 21 yellow charts in the exact dimensions and style that we needed.

“Yellow” elevation profile charts, generated using the D3 charter.

“Grey” stage marker charts, generated using the D3 charter.

Except for an occasional fine-tuning on a few labels, it entirely cut down the time spent on copying charts from Google Sheets, resizing, styling and editing them manually!

We also contacted the map data provider and worked with them to create a template for the mapping tool that aligns with our styles to save time on post-processing the generated maps.

YEAR 4

We decided to focus on our second ambitious goal — innovating/optimising our mapping workflow. Changing how the maps were generated would need a complete rethink of the mapping tech stack including the data sources for the basemap, along with a lot of time and effort. Hence we focussed on optimisation instead.

We investigated our mapping workflow and realised that we spent a lot of time processing and editing the exports from the mapping tool —

• Cleaning up unnecessary objects and paths.
• Editing and styling terrain and roads.
• Resizing things to fit into the layout.

Basemap exported from the mapping tool.

Since we decided to stick with the existing mapping tool, we needed to figure out how to simplify the editing process.

If only there was a way to automate things in Illustrator. We could tell it to group some roads, colour some hills and resize some shapes…

The power of scripting and actions in Adobe Illustrator came up during one such brainstorming session. It was not a new concept — we have been using ai2html for quite some now, but none of us had written an Illustrator script from scratch before.

So, Aditi bravely took it upon herself to learn something new!

Bunch of Illustrator actions to do repetitive tasks on files.

Sample Illustrator script to reorder map layers in Illustrator.

A few weeks of JavaScript in Illustrator and Aditi helped save hours of work on the maps per stage!

The Illustrator script in action — cleaning up the raw map export

With the time saved this year, we managed to create responsive (mobile) versions of the graphics and publish a webpage with the maps of the stages.

Available in both English and French on a laptop/mobile near you!

Tour de France 2022

Three years since we made our first Tour de France graphics, we have been able to heavily optimise our workflow using a combination of custom tools, techniques and smart project management. I am curious as to how far we can simplify this process and sprint along with the riders as the race goes on!