Adding a Dolly Zoom to Your Map
This week, Andrew Sepic of Mapbox published a fascinating article on Unlocking Mapbox GL JS's Hidden Field of View Control - a technique that can dramatically change how a map feels without moving the camera at all.
By manipulating the camera’s internal FOV parameter, developers can:
- Create a telephoto effect (narrow FOV) for architectural visualization
- Produce a dramatic wide-angle perspective for immersive scenes
- Dynamically alter visual perception in response to user interaction
The article features an impressive demo that uses FOV to generate a dolly-zoom effect - a cinematic technique where the subject remains stable while the background appears to stretch or compress (shown in the animation at the top of this post).
I immediately wondered whether you could create the same effect in Maplibre. You can - and in fact, MapLibre GL JS exposes field-of-view control as a public API, providing a stable way to adjust perspective without relying on internal properties.
So it only took a few minutes to recreate Andrew’s dolly-zoom effect in MapLibre - Maplibre Dolly Zoom Demo.
How the MapLibre dolly-zoom works:
The demo synchronizes camera zoom and field of view, animating them in opposite directions. As the map zooms in, the FOV narrows to keep the focal point roughly the same size, while the surrounding environment shifts in perspective. The result echoes the famous effect popularized in Hitchcock's Vertigo - a subtle but powerful sense of spatial distortion that adds cinematic depth to an otherwise familiar map view.
Comments