Quick Tip: Creating a Simple Map Infographic


With the introduction of our new Tuts+ Workshop: Freestyle Map Challenge, I thought I'd show you how I created this Simple Map Infographic. With the help of Google Maps, Symbols and Excel, I've been able to put together this quick map infographic on my ten favourite places in Great Britain. So let's get stuck in...

Step 1

There are plenty of free map resources out there. Some have high resolution JPG/PNGs and the odd handful you'll be able to down EPS files. I've gotten mine from the Ordnance Survey website. As always, find out the copyright for the map and if there are any limitations. With the map I've used here, the only limitation is that I must keep the Ordnance Survey copyright acknowledgement on the image.

With infographics, you need to link your sources of data and a map is data. Keeping the acknowledgement on brings integrity to my image. If someone wanted to investigate the data I've presented, they will know where to chase this up.

I've opened up the EPS download in Adobe Illustrator and resized the map into my Artboard. If there is a scale, keep this. Scale it with the map, not separately. I've then repositioned the Ordnance Survey copyright and added a tag line that the Map EPS resource was from them.

Step 2

I'll be using map pins from a previous infographic case study by Ian Yates, the Editor of Webdesigntuts+.

I have my ten locations in mind for the infographic. They are places I've visited during family vacations or places I've previously lived. The aim is to show: where I currently live, my ten favourite places and then the distance from my home. My postal town is Morpeth in Northumberland in the north of England. So I'm going to plot this point first with a blue pin. This is to stand out from the other pins so you can clearly this this location. The "favourite places" are then plotted with the yellow pins.

Even though I've got a vague idea of where the locations are, I've double checked using Google Maps and lined up the locations with the contours of the map.

Step 3

I've made the outline of Great Britain into in Compound Path (Ctrl + 8) and then used a green fill with the Live Paint Bucket (K). I've placed a light blue Rectangle (M) behind the map as a background.

I then Object > Expand the Live Paint group and apply the below Appearance panel settings to the outline. I've not modified the copyright acknowledgement or scale - other than setting it to Blending Mode Multiply.

Step 4

As always, it's important to keep your Layers organized. This makes it easy to access the information you may need to modify later. I've added labels to the map pins at this stage.

I'll be using Google Maps to get the distance values. Therefore I've added source information at the bottom reading "Distance values calculated from shortest distance covered by car/road via". This is informing the reader where I got the data and what specifically any values will be in relation to. Distance covered directly would be a lot shorter for instance but then you'd be cutting through hills and mountains to get to some locations!

Step 5

After collating the data from Google Maps, I've put the values in Excel from shortest to longest distance. Since my scale on the map is in kilometers, I've ensured Google Maps gives me the values in kilometers. Whenever you put a numeric value into a table or even along a graph, make sure you label the units you're using. Distance from Morpeth might be seen as miles... using (km) avoids this confusion. Present your table in a visually appealing way, but not so it distracts from what you're trying to say.

I love the fact you can highlight a table in Excel and then Copy (Ctrl + C) and Paste (Ctrl + V) it into Adobe Illustrator. This is a quick and easy way to present your written data in table form, without having to draw one manually. I've modified the tables colors to reflect a similar style to my map.

Step 6

Now to bring all the data together with a title, so when you look at the graphic you know what the purpose is. My first title was "Sharon Milne's 10 Favourite Places in Great Britain & Distances from her Home in Morpeth". This later changed to "... & Distances from her Home". Viewers don't really need to know the specific name of my location unless it's one of my ten favourite places. So I don't want to give unnecessary information, especially with it being so close to my home city, Newcastle Upon Tyne.

Step 7

With the change in pointing out my location in mind, I decided to remove the text for "Morpeth" and replace the icon with a "Web Icon" symbol of a home.

I've double clicked on it and went into Isolation Mode to alter the color. I used the Symbol Scale Tool to reduce the size.

Step 8

To make the data easier on the eyes, I then create a new map pin for each location by drag and dropping a symbol to my artboard then Object > Expanding it. I then recolor the fill of the pin and add it back to the Symbols panel.

I've then replaced all the icons on the map going from red to the closest to my home through to yellow, green, blue, purple and pink for the furthest.

Step 9

I've dragged each one of the symbols to my artboard and Object > Expanded them. I've then removed the black stroke from around them. This way I can highlight the place relating to the color in text in my table and then use the Eyedropper Tool (I) to sample the exact color of the pin. I later modified the colors even further so the yellow and light blues aren't as pale and are much easier to read.


My finishing touches to the graphic included adding a grey scale look to the actual map. The colors I previously used perhaps distracted from the map pins. I also added borders and the names of the countries of Great Britain for those who weren't sure of the location of the specific places.

Remember when creating an infographic, clarity in data and being able to read the data is your primary task. Style is your after thought. As long as the reader can gather the information you're trying to communicate in your graphic then you've done your job well.

If you'd like to know more about Infographics, I highlight recommend you check out the Tuts+ Course created by Cheryl Graham titled Information Graphics. It's a video course over 2 hours long and is really informative. I can't stop recommending it to people as it is a great course.

Related Posts