Responsive Map Cheat Sheet

This cheat sheet guides you in successfully making your thematic map design responsive to different screen sizes and devices. It provides an overview of the most common challenges, and design solutions to address them. Use the challenges as a checklist to identify potential issues, then choose design solutions to address the challenges you identified. The recommendations in this cheat sheet are based on guidance from experienced map designers and developers.

Challenges

Which of these are present in your map?

C1The map becomes unreadable when scaled down.

C1.1Small areas on the map are too small to be visible.

Excerpt of a choropleth map of the UK. Two orange circles highlight areas with very small spatial units that are difficult to see.

C1.2Symbols on the map are too small to be visible.

Proportional circle map showing the Americas. Two orange circles highlight some very small circles that are difficult to see.

C1.3Symbols overlaid on the map overlap excessively.

Proportional circle map showing the Americas. An orange circle highlights an area where circles are overlapping heavily.

C2The aspect ratio of the available space does not fit the map.

C2.1The map is very small and surrounded by lots of wasted space.

Map of the UK, which is portrait format, scaled to fit a landscape format rectangle. The empty space left and right of the map is highlighted in orange.

C2.2The map is partly off-screen.

Map of the world. A small part of it is visible in a portrait format rectangle representing e.g. a phone screen, the rest of the map is off-screen and this is highlighted by an orange outline.

C3The legend or other UI elements do not fit.

C3.1Legend (text) is too small to read.

Choropleth map of the UK. A legend is shown in the top right, but the labels are too small to read.

C3.2The legend covers part of the map.

Choropleth map of the UK. A legend with large readable labels is shown in the top right, but it overlaps the map and hides parts of it.

Design Solutions

Which of these strategies could be useful for your map?
Start with S1, then move on to S2–S4.

S1Start with subtle design changes that will help the map scale down better.

S1.1Maximize the size of the map by repositioning other UI elements.

Two wireframes side-by-side. On the left, a sidebar on the top with a small map below it. On the right, the sidebar is on the left and the map is slightly larger to its right.

S1.2Re-design the legend to be more compact.

Two legend designs side by side. On the left, four colors are listed top to bottom with labels spelling out Category A, through Category D. On the right, four colors are listed side by side and simply labeled A to D, a much more compact design.

S1.3Replace the legend with annotations or labels on mouseover/tap.

An excerpt of a choropleth map with an oversized, symbolic mouse pointer shown on top. The pointer is labelled Category C.

S1.4Decrease line width or remove outlines where possible.

Two choropleth map excerpts side-by-side. The left has white outlines for each spatial unit. On the right, the outlines have been removed, making smaller regions more easily readable.

S1.5Adjust the scale of symbols on the map.

Two proportional circle maps side-by-side. The left one has relatively small circles where some of them are hard to see. On the right, all circles have been scaled up and are easier to see.

S1.6Change the map projection.

Two world maps side-by-side. The right one is a little narrower because it uses a different map projection.

S1.7Displace symbols or spatial units on the edges of the map slightly to make it more compact or to reduce overlap.

Two maps of the UK side-by-side. On the right, Shetland, which is far in the North East of Scotland, i.e. top right corner of the map, has been moved into an inset box beside Scotland. This allows the map to be larger than the map with Shetland in its true position.

S2Make use of scrolling, zooming, and panning.

S2.1Scroll the map vertically.

A map with some of it off-screen to its top and bottom. A large up and down arrow symbolizes vertical scrolling.

S2.2Scroll the map horizontally.

A map with some of it off-screen to its left and right. A large up and down arrow symbolizes horizontal scrolling.

S2.3Pan and zoom the entire map.

A map with some of it off-screen in all directions. A large cross of arrows pointing left, right, up and down symbolizes vertical and horizontal panning of the map.

S2.4Create cutouts that zoom into dense areas.

A small map of the UK. To its right, a cutout that is zoomed into London is shown.

S3Separate the map into segments.

S3.1Separate the map into equally sized segments.

A UK map. To its right, the same map is shown separated into two rectangular sections, created by slicing the map into a top and bottom half.

S3.2Separate the map into geographic sub-units.

A world map. To its right, six continents are shown arranged into a two by three grid.

S4Use alternative visualization types that allow for more flexible use of space.

C4.1Cartograms & grid maps

Left: a Dorling cartogram, in which circles are arranged geographically and scaled to represent data points about individual countries. Right: An excerpt of a hexagonal grid map.

C4.2Geographically ordered visualizations

A treemap with sections labeled Northern Ireland, Scotland, Wales, England. Rectangles in the treemap are arranged approximately according to their geographic locations.

C4.3Non-geographic visualizations

Simple bar chart with three bars labeled A, B, and C.

C4.4Remove visualizations

Left: lookup search box labeled "Search a country"; the selected country is United Kingdom and the value "Population: 67.0 million" is displayed. Right: A table (schematic, no content).