---
title: "AnimatedRouteLayer | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Class AnimatedRouteLayer`Maptiler`

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

#### Example[](#example)

```typescript
// 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[](#implements)

#### Implements

-   [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/)

##### Index

### Constructors[](#constructors)

[constructor](#constructor)

### Properties[](#properties)

[animationInstance](#animationinstance) [id](#id) [type](#type)

### Methods[](#methods)

[addEventListener](#addeventlistener) [frameAdvance](#frameadvance) [getMaptilerAnimationOptions](#getmaptileranimationoptions) [onAdd](#onadd) [onRemove](#onremove) [pause](#pause) [play](#play) [removeEventListener](#removeeventlistener) [render](#render) [updateManual](#updatemanual)

## Constructors[](#constructors-1)

### `Maptiler`constructor[](#constructor)

-   new AnimatedRouteLayer(  
        \_\_namedParameters: [AnimatedRouteLayerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimatedRouteLayerOptions/),  
    ): AnimatedRouteLayer[](#constructoranimatedroutelayer)
    
    #### Parameters
    
    -   \_\_namedParameters: [AnimatedRouteLayerOptions](https://docs.maptiler.com/sdk-js/api-reference/types/AnimatedRouteLayerOptions/)
    
    #### Returns AnimatedRouteLayer
    

## Properties[](#properties-1)

### `Maptiler`animationInstance[](#animationinstance)

animationInstance: [MaptilerAnimation](https://docs.maptiler.com/sdk-js/api-reference/classes/MaptilerAnimation/) | null = null

The MaptilerAnimation instance that handles the animation

### `Readonly` `Maptiler`id[](#id)

id: string = ...

Unique ID for the layer

Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[id](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#id)

### `Readonly` `Maptiler`type[](#type)

type: "custom"

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

Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[type](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#type)

## Methods[](#methods-1)

### `Maptiler`addEventListener[](#addeventlistener)

-   addEventListener(  
        type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/),  
        callback: [FrameCallback](https://docs.maptiler.com/sdk-js/api-reference/types/FrameCallback/),  
    ): AnimatedRouteLayer[](#addeventlistener-1)
    
    Adds an event listener to the animation instance.
    
    #### Parameters
    
    -   type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/)
        
        The type of event to listen for
        
    -   callback: [FrameCallback](https://docs.maptiler.com/sdk-js/api-reference/types/FrameCallback/)
        
        The callback function to execute when the event occurs
        
    
    #### Returns AnimatedRouteLayer
    

### `Maptiler`frameAdvance[](#frameadvance)

-   frameAdvance(): AnimatedRouteLayer[](#frameadvance-1)
    
    This method is used to manually advance the animation
    
    #### Returns AnimatedRouteLayer
    
    -   The current instance of AnimatedRouteLayer
    

### `Maptiler`getMaptilerAnimationOptions[](#getmaptileranimationoptions)

-   getMaptilerAnimationOptions(): Promise<  
        [MaptilerAnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/MaptilerAnimationOptions/) & { autoplay: boolean },  
    \>[](#getmaptileranimationoptions-1)
    
    Gets the source GeoJSON data from the map instance, parses it, and returns the animation options.
    
    #### Returns Promise<[MaptilerAnimationOptions](https://docs.maptiler.com/sdk-js/api-reference/interfaces/MaptilerAnimationOptions/) & { autoplay: boolean }\>
    
    -   The MaptilerAnimation constructor options
    

### `Maptiler`onAdd[](#onadd)

-   onAdd(map: [Map](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)): Promise<void\>[](#onadd-1)
    
    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](https://docs.maptiler.com/sdk-js/api-reference/classes/Map/)
        
        The map instance (maplibre Map, but will be MapSDK at runtime)
        
    
    #### Returns Promise<void\>
    
    Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[onAdd](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#onadd)
    

### `Maptiler`onRemove[](#onremove)

-   onRemove(): void[](#onremove-1)
    
    This method is called when the layer is removed from the map. It destroys the animation instance.
    
    #### Returns void
    
    Implementation of [CustomLayerInterface](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/).[onRemove](https://docs.maptiler.com/sdk-js/api-reference/interfaces/CustomLayerInterface/#onremove)
    

### `Maptiler`pause[](#pause)

-   pause(): AnimatedRouteLayer[](#pause-1)
    
    Stops the animation.
    
    #### Returns AnimatedRouteLayer
    
    -   The current instance of AnimatedRouteLayer
    

### `Maptiler`play[](#play)

-   play(): AnimatedRouteLayer[](#play-1)
    
    Plays the animation.
    
    #### Returns AnimatedRouteLayer
    
    -   The current instance of AnimatedRouteLayer
    

### `Maptiler`removeEventListener[](#removeeventlistener)

-   removeEventListener(  
        type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/),  
        callback: [FrameCallback](https://docs.maptiler.com/sdk-js/api-reference/types/FrameCallback/),  
    ): AnimatedRouteLayer[](#removeeventlistener-1)
    
    Removes an event listener from the animation instance.
    
    #### Parameters
    
    -   type: [AnimationEventTypes](https://docs.maptiler.com/sdk-js/api-reference/types/AnimationEventTypes/)
        
        The type of event to remove
        
    -   callback: [FrameCallback](https://docs.maptiler.com/sdk-js/api-reference/types/FrameCallback/)
        
        The callback function to remove
        
    
    #### Returns AnimatedRouteLayer
    

### `Maptiler`render[](#render)

-   render(): void[](#render-1)
    
    This method is called to render the layer. It is a no-op for this layer.
    
    #### Returns void
    
    Implementation of CustomLayerInterface.render
    

### `Maptiler`updateManual[](#updatemanual)

-   updateManual(): void[](#updatemanual-1)
    
    #### Returns void