Error: 'timestampProperty' does not exist in type 'RoutePathAnimationOptions'

[ClaudeVernier]

Hello, I hope this is the correct place to ask for help.

I am trying to implement the sample found here: AzureMapsCodeSamples/Samples/Animations/Animate along a route path/Animate along a route path.html

I setup an object : animation = atlas.animations.moveAlongRoute(routePoints, pin, { //Specify the property that contains the timestamp. timestampProperty: 'timestamp',

                //Capture metadata so that data driven styling can be done.
                captureMetadata: true,

                loop: false,
                reverse: false,
                rotationOffset: 0,

                //Animate such that 1 second of animation time = 1 minute of data time.
                speedMultiplier: 60,

                //If following enabled, add a map to the animation.
                map: that.map,

                //Camera options to use when following.
                zoom: 15,
                pitch: 45,
                rotate: true
            });

I get the error: Object literal may only specify known properties, and 'timestampProperty' does not exist in type 'RoutePathAnimationOptions'.ts(2353)

I am guessing that the error is in my typescript definition but don't know what to do.

I use a local copy of this file for animations: https://github.com/Azure-Samples/azure-maps-animations/blob/main/dist/azure-maps-animations.js

I use a local copy of this file for type definitions: https://github.com/Azure-Samples/azure-maps-animations/blob/main/typings/index.d.ts

I would have another question also. I noticed that the object "atlas.data.Feature" is used. In my code, data.Feature is in the azmaps namespace, I import them as: import as azmaps from 'azure-maps-control' import as atlas from 'azure-maps-animations'

It is also imported as azmaps in the type definitions.

Should I try to have both control and animations under atlas ?

Thanks a lot for any help !

[rbrundritt]

You are correct, the RoutePathAnimationOptions interface does not have a timestampProperty. It being in the sample looks like a bug there and not in the animation library. By default moveAlongRoute function looks for a _timestamp property. If your timestamp data is in another property you have to pass your points through the extractRoutePoints function first. Note that the documentation for the moveAlongRoute function says "Each feature must have a _timestamp property."

For example:

//Extract timestamp information from a custom property of the point features. 
//By default the moveAlongRoute looks for a `_timestamp` property on the point features that is a Date.getTime() value. 
//If your points already have a `_timestamp` property with the correct value type, you can skip this extraction step.
routePoints = atlas.animations.extractRoutePoints(route, 'timestamp');

//Create the animation.
animation = atlas.animations.moveAlongRoute(routePoints, pin, { 

    //Capture metadata so that data driven styling can be done.
    captureMetadata: true,

    loop: document.getElementById('loopAnimation').checked,
    reverse: document.getElementById('reverseAnimation').checked,
    rotationOffset: (document.getElementById('reverseAnimation').checked)? 90: 0,

    //Animate such that 1 second of animation time = 1 minute of data time.
    speedMultiplier: 60,

    //If following enabled, add a map to the animation.
    map: (document.getElementById('followSymbol').checked)? map: null,

    //Camera options to use when following.
    zoom: 15,
    pitch: 45,
    rotate: true
});