I can make maps
While working at Black Diamond, I was often referred to as The Map Man. Countless times I’d be tasked with creating interactive maps for clients. One of these times was while building a trade-facing portal for South African Airways.
As well as having a lead role in the UX, wireframing, design and build of the portal, arguably the most interesting part of the website was the map to show the routes that the airline offers. They wanted something interactive and visual, while still being able to edit it in the CMS.
- Download map data for the whole world from Natural Earth. This data includes a crazy amount of detail with locations for cities, landmarks and airports.
- Run a few commands to filter out all the countries you don’t want
- Run a few more commands to keep only the map features you want (airports, in this case)
- Load this data to the page and draw a map, using the power of D3
What’s neat about using real world data is that it’s completely accurate, you’re dealing with coordinates, not pixels. All the airports are in exactly the right place without any guesswork.
Another advantage to having the data originally in text form is that it’s readily available to use when the visual element isn’t suitable. For instance, the mobile version of this page is simply an expandable table of the data.
The map renders as a vector, so it also has the bonus of looking super sharp on any screen at any size, with some fun animations to boot.
Giving power to the client
Using this generative approach allowed the client to have control over their new shiny map, without having to use any specialist graphical software. The client simply uploads a spreadsheet of airport codes and the map is generated, with the airports and connections automatically in place.
Let’s make a map!
I’ve made a bunch of interactive maps, for all sorts of clients. I’d love to have a chat with you about that map you need making.