WHAT
The zoom control, sometimes called zoom buttons or map navigation, is the most important control of an interactive map. Zoom control is used when the current viewport doesn’t show the appropriate level of detail, and the user needs to see a larger or smaller map scale.
WHY
Although modern map apps provide alternative means of zooming in and out through gestures and mouse events, many people, especially on touch devices, still prefer the more precise navigation technique of clicking buttons over pinch-zoom or the use of a mouse wheel.
The main actions on the zoom control, zoom in and zoom out, are represented by the plus and minus signs, respectively. The origins of this association stem from the increase and decrease in scale factor: zooming in will make the map scale larger, and zooming out, the map scale smaller. Even though most people don’t know about the origins of this usage, and some may argue that plus and minus don’t visually resemble their functions enough, users have grown accustomed to this representation. Apps should leverage this familiarity and thus follow this convention.
WHEN
Any interactive map requires a means to increase or decrease the scale, sometimes referred to as zoom level. Zooming in and out is the foundation for navigating between levels of detail shown in the map. It allows users to focus and change their center of interest. Apps may start with an aggregated view of the data, such as insurance claims, available grants, or broadband availability at small scales. As users zoom in to medium scales, the aggregation turns off and starts to show the available data points. At very large scales, the extent shows only one or a few features.
HOW
Most mapping platforms provide the zoom control out of the box. It consists of two vertically stacked buttons to zoom in and zoom out depicted by the plus and minus signs, respectively. Sometimes the buttons surround a slider component to speed up navigation between scales. Adding ToolTips to describe the button’s function is a best practice.
The zoom control is usually located in the upper-left corner of the map, but any other corner works as well. The decision about corner placement should be driven by its hierarchy of importance and support a well-balanced layout. For instance, if the upper-left corner is occupied with a search that is the focus of the app, placing the zoom control in the upper-right or lower-right corner provides a good counterweight. Removing the zoom control altogether isn’t recommended although not wrong, especially for apps with a narrow and well-known user base or on mobile devices with limited space.
The transition between zoom levels should be smooth with a cinematographic motion indicating the change. Sometimes the new image is a blurry version of the previous image until the new imagery has loaded, although this is less of an issue when using vector data. Zooming should center the map at the same midpoint.
In case your app has more than one map, each dynamic map that isn’t synchronized with the extent of another map requires its own zoom control.
EXAMPLE
The ArcGIS Vector Tile Style Editor is an online tool for styling vector tile layers such as basemap layers. The editor interface shows four interactive maps to preview styling changes at different zoom levels simultaneously. Because all four maps are independent of each other, they each need their own zoom control to indicate that they are indeed interactive maps and not just preview images. Somewhat unique to this app is that the map scale is important for styling the layers that make up a basemap layer at each of the 23 scales. For that reason, each map shows a number beneath the zoom control that indicates the current zoom level.
