For AI agents: a documentation index is available at /llms.txt. Markdown versions of all pages are available by appending .md to any URL.
MaptilerAnimation
The MaptilerAnimation class provides utilities for animating between keyframes with custom easing and playback controls. It supports event-based hooks for frame updates and works with rendering loops or UI transitions.
Example
// Linearly animated between values
const animation = new MaptilerAnimation({
keyframes: [
// props are interpolated across the duration
{ delta: 0, props: { lon: -7.445 } },
// userData can hold any type of custom data to pass with the keyframe
{ delta: 0.5, userData: { mydata: "whoa!" } },
{ delta: 1, props: { lon: -7.473 } },
],
duration: 1000, // 1 second
iterations: Infinity, // loop forever
});
const marker = new Marker().setLngLat(
new LngLat(
-7.449346225791231,
39.399728941536836,
)
).addTo(map);
// TimeUpdate is fired every frame
animation.addEventListener(AnimationEventTypes.TimeUpdate, (e) => {
marker.setLngLat(
new LngLat(
e.props.lon,
39.399728941536836,
)
);
});
// Fired when the keyframe changes
animation.addEventListener(AnimationEventTypes.Keyframe, ({ userData }) => {
console.log(userData.mydata); // "whoa!"
});
animation.play();
// Eased between values
const animation = new maptilersdk.MaptilerAnimation({
keyframes: [
// props are interpolated across the duration
{ delta: 0, easing: EasingFunctionName.ElasticInOut, props: { lon: -7.445 } },
{ delta: 1, props: { lon: -7.455 } },
],
duration: 1000, // 1 second
iterations: Infinity, // loop forever
});
