On this page
Constructors
Properties
Methods

Class AnimatedRouteLayerMaptiler

Creates an animated route layer for MapTiler maps.

The AnimatedRouteLayer allows you to animate paths on a map with visual effects and optional camera following. You can define animations either through explicit keyframes or by referencing GeoJSON data with animation metadata.

Features:

  • Animate route paths with color transitions (active/inactive segments)
  • Optional camera following along the route
  • Control animation playback (play, pause)
  • Configure animation properties (duration, iterations, delay, easing)
  • Support for manual or automatic animation updates
  • Event system for animation state changes
// Create an animated route from GeoJSON source
const animatedRoute = new AnimatedRouteLayer({
  source: {
    id: 'route-source',
    layerID: 'route-layer',
  },
  duration: 5000,
  iterations: 1,
  autoplay: true,
  cameraAnimation: {
    follow: true,
    pathSmoothing: { resolution: 20, epsilon: 5 }
  },
  pathStrokeAnimation: {
    activeColor: [255, 0, 0, 1],
    inactiveColor: [0, 0, 255, 1]
  }
});

// Add the layer to the map
map.addLayer(animatedRoute);

// Control playback
animatedRoute.pause();
animatedRoute.play();

// Listen for animation events
animatedRoute.addEventListener("animationend", () => {
  console.log('Animation completed');
});

Implements

Index

Constructors

constructor

Properties

animationInstance id type

Methods

addEventListener frameAdvance getMaptilerAnimationOptions onAdd onRemove pause play removeEventListener render updateManual

Constructors

Properties

animationInstance: MaptilerAnimation | null = null

The MaptilerAnimation instance that handles the animation

id: string = ...

Unique ID for the layer

type: "custom"

The layer's type. Must be "custom".

Methods

  • Gets the source GeoJSON data from the map instance, parses it, and returns the animation options.

    Returns Promise<MaptilerAnimationOptions & { autoplay: boolean }>

    • The MaptilerAnimation constructor options

  • This method is called when the layer is added to the map. It initializes the animation instance and sets up event listeners.

    Parameters

    • map: Map

      The map instance (maplibre Map, but will be MapSDK at runtime)

    Returns Promise<void>

  • This method is called when the layer is removed from the map. It destroys the animation instance.

    Returns void

  • This method is called to render the layer. It is a no-op for this layer.

    Returns void

  • Returns void

Was this helpful?
SDK JS
Reference
AnimatedRouteLayer