0

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>
  1. Declaring a variable "animate" as any in a component

declare const animate: any;
  1. 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

Satyam Chauhan
  • 19
  • 4

1 Answers1

0

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.

rbrundritt
  • 16,570
  • 2
  • 21
  • 46
  • Thanks for answering, In #3 there was a typo in the spelling of animate, I have corrected it. Can you give a little detailed explanation of using "atlas.animations". If you want, I can give more details of what I have tried. – Satyam Chauhan Mar 17 '22 at 04:21
  • Because there is no NPM package currently, you would have to pull this library in by loading one of the JS files in the dist folder. The JS code puts all the animation functionality on the atlas.animations namespace. – rbrundritt Mar 17 '22 at 23:37