ANMOL SHARMA
ANMOL SHARMA

Reputation: 51

Azure Maps Libraries are not Importing (Services and Animation APIs)

I am trying to make an Angular app which will show the optimised route along with direction of a set of destinations. I installed Azure Maps SDK in my app and started using the APIs. All things are working fine but not the animation API. I am importing maps like this

import * as atlas from 'azure-maps-control';

and then using the animation api as per the documentation:

this.animation = atlas.animation.moveAlongRoute(this.routePoints, this.pin, { 
              

  //Specify the property that contains the timestamp.
              timestampProperty: 'timestamp',

  //Capture metadata so that data driven styling can be done.

  captureMetadata: true,
  
  loop: document.getElementById('loopAnimation'),
  reverse: document.getElementById('reverseAnimation'),
  rotationOffset: (document.getElementById('reverseAnimation'))? 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'))? this.map: null,

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

          });
      });
  });
} 

But it is giving the error like

Property 'animation' does not exist on type 'typeof atlas'

I also needed the service module, so I import it from

import * as  atlases from 'azure-maps-rest';

This time by using this import, I was able to use atlases.services module, but now some interface error is coming stating that

Type 'undefined' does not satisfy the constraint 'IBaseGeojson'.

2153 G extends IBaseGeojson = undefined> = D & (G extends undefined ? {

Upvotes: 3

Views: 517

Answers (1)

RKM
RKM

Reputation: 1389

You can try adding azure-maps-animations JavaScript file from the dist folder into your project from this link to use with azure maps web sdk.

And for Azure Maps Service Module, atlas-services-ui JavaScript and CSS files and the localization folder from the dist folder into your project from this link.

Upvotes: 0

Related Questions