Azure Maps Animation Not Working in Angular

Question

I am using Angular UI to display Azure map.

I have a requirement of displaying real-time moving points on the azure map like Sample animation. For this I was planning to use 'azure-maps-control' module to animate the points, but unfortunately animation is not working with it.

I found a way that, using azure-maps-animation we can import the .js file and use the animation functionality.

Here is what I am trying

1. Copied azure-maps-animation.min to assets folder
2. Added the path of the js file to index.html

<script src="./assets/azure-maps-animations.min.js"></script>

3. Declaring a variable "animate" as any in a component

declare const animate: any;

4. using the variable to access the animation functions

playAnimations = (type: any) => {
    
    if (this.currentGroupAnimation) {
      this.currentGroupAnimation.dispose();
      this.currentGroupAnimation = null;
    }

    var animation: any = [];

    //Animate each point to a new random coordinate over a random duration between 100ms and 2000ms
    for (var i = 0; i < 10; i++) {
      animation.push(
        animate.animations.setCoordinates(
          this.points[i],
          this.getRandomPosition(),
          { duration: Math.random() * 1900 + 100 }
        )
      );
    }

    var groupOptions = {
      playType: type,
    };

    this.currentGroupAnimation = animate.animations.GroupAnimation(
      animation,
      groupOptions
    );
    this.currentGroupAnimation.play();
  };

But still the animation is not working.

Please Help!!

Thanks

Answer 1

In #3 you are declaring "aninate" but in #4 you are using a namespace of "animate". So a possible spelling error issue.

That said, if you are using the outputed JavaScript files from that animation repo, the root namespace will be "atlas.animations". So declaring "animate" is likely not to give you access to the functionality in this module.