What Problem Does This Solve?
The current viewport doesn’t show the appropriate level of detail and the user needs to see a larger or smaller region of the map
When to Use This Pattern
Any interactive map needs to provide a means to change (increase or decrease) the scale of the map through zooming in or out. The zoom control, sometimes called zoom buttons or map navigation, is the most common interaction of an interactive map.
What’s the Solution?
Add two stacked buttons to the map, one to zoom in and one to zoom out. The zoom in button is typically on top or to the left of the zoom out button and uses a plus icon to indicate its function. Similarly, the zoom out button typically displays a minus icon. The zoom control is most often found in the top left corner of the map but any other corner works just as well with the deciding factor being a well-balanced layout and hierarchy of importance, e.g. if the top left corner is occupied with a search that is the focus of the application then the top or bottom right corner is a good counter weight.
Clicking a zoom button will zoom in or out one scale level, ideally paired with a cinematographic motion indicating the change. Sometimes the new image is a blurry version of the previous image until the new imagery have loaded, though this is less of an issue when using vector data.
Zooming should center the map at the same mid-point.
Why Use This Pattern?
Zooming in and out are the most important actions on an interactive map. Even though modern map applications provide alternative means of zooming through mouse events and gestures, many people – especially on touch devices – still prefer the more precise navigation technique of clicking buttons over pinch/zoom or use of a mouse-wheel.
Since dynamic maps have become a widely used interface control and users – especially on touch devices – are intrinsically familiar with pinch or mouse-wheel zoom the need for actual zoom controls became secondary. In the cases when zoom controls are still used, consider
- Removing lengthy button labels and use plus (+) and minus (-) symbols instead.
- Avoid the usage of zoom sliders or otherwise large controls unless they are necessary for the type of application, e.g. in games.