Camera and view control
Quick answer
This tutorial explains how MapLibre GL JS moves the camera with four methods: jumpTo for instant changes, easeTo for eased transitions, flyTo for parabolic long-distance flights, and fitBounds for framing an extent. It covers the duration, curve, essential, padding, maxZoom and offset options, plus how animations end, get cancelled, and drive per-frame rotation. After reading it you can script reliable view changes and keep overlays unobstructed.
Key points
- Use jumpTo to restore a saved view instantly and easeTo for short pans or pitch adjustments.
- Set essential: true on flyTo so users with reduced-motion settings still see the location change.
- Pass padding.left equal to the sidebar width in fitBounds instead of panning afterwards.
Example
map.jumpTo({ center: [116.391263, 39.907359], zoom: 11 });
map.easeTo({
center: [116.407000, 39.899000],
duration: 800,
easing: function (t) { return t * (2 - t); }
});
map.flyTo({
center: [121.473701, 31.230416],
zoom: 12,
bearing: 0,
pitch: 35,
duration: 3600,
curve: 1.4, // 路径弯曲程度，越大越「高飞」
essential: true // 用户开启减少动效时仍然执行
});var bounds = [
[116.20, 39.80], // 西南
[116.55, 40.05] // 东北
];
map.fitBounds(bounds, {
padding: { top: 40, bottom: 120, left: 320, right: 40 },
maxZoom: 15,
duration: 1200
});Notes
- fitBounds on bounds crossing the antimeridian, such as 170E to 170W, flies the camera across the whole globe unless split into pieces.
- setStyle during a camera animation rebuilds the render pipeline and interleaves moveend with styledata, so call map.stop() first.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Camera and view control. https://www.jingweizhi.com/en/maplibre/tutorials/camera-animation.html (accessed 2026-11-03).