DemoHut

Logarithmic scaling

In map applications, scale is represented more preferably in logarithmic form, denoted "zoom" here:

zoom=log2scalescale0

Where scale0 is the scale when zoom is 0. For example, if scale0=1:4000, then zoom 3 corresponds to scale 1:500.

Scale (linear)

Zoom (logarithmic)

As is showed in the above comparison, the animation in logarithmic form is more consistent.

If the two concepts are confused, unexpected behaviors might be observed. Following are some I've found in real-world mobile apps.

1. Camera Translation

Modern map apps support the gesture "zooming at position" in general. This is the composition of panning and zooming, or "translation" of the camera in 3D world, in both horizontal- and vertical- directions. We expect the trace of the translation to be straight. If zooming is applied logarithmically with the panning linearly, the curve is not straight, and it feels somewhat odd. To correct this, we can either

  1. use linear zooming (like here), or
  2. use log panning

Wrong

Correct

2. Screen space animation

Likewise, if screen space animation and world space one are combined, we need to pay special attention to ensure consistent zooming effect. In this example, the route overlay is represented in screen space, and the map is drawn in world space. If we simply apply linear interpolation to the screen coordinates of the route while zooming the map, the two would not matched during the animation. I'll try the second solution to fix this.

Wrong

Correct

All demos have been tested on Microsoft Edge/macOS.