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
<script src="./assets/azure-maps-animations.min.js"></script>declare const animate: any;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
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.