Attempting to reimplement the Azure Maps Animations example with TypeScript has been a challenging task for me. Here's the link to the sample:
I'm encountering several issues and could really use some assistance. I'll describe my problems and share my code below.
Upon running in Chrome, I encounter two errors in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'EventEmitter')
at azure-maps-animations.js:1101:23
at azure-maps-animations.js:3424:2
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'moveAlongRoute')
at main.ts:96:41
In an attempt to utilize VSCode and RequireJs, I specified the following options in tsconfig.json:
"compilerOptions": {
"module": "AMD",
"target": "ES6",
"moduleResolution": "node",
"esModuleInterop": true,
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"declaration": false,
"lib": ["ES6", "DOM"],
"resolveJsonModule": true,
"downlevelIteration": true,
"outDir": "./js",
"rootDir": "./ts",
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"typeRoots": [
"./node_modules/@types",
"./types"
],
"baseUrl": "./",
"paths": {
"azure-maps-control": ["node_modules/azure-maps-control/dist/atlas.min"]
},
}
The configuration file config.js was utilized to set up RequireJS:
require.config({
baseUrl: './js',
paths: {
'azure-maps-control': 'https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas'
,'azure-maps-animations': '../lib/azure-maps/azure-maps-animations'
}
});
require(['main'], function(main) {
});
The HTML page only contains:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script src="./node_modules/requirejs/require.js" defer></script>
<script src="./config.js" defer></script>
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
</head>
<body>
<div id="myMap"></div>
</body>
This is the content of the main.ts file:
[...]
If I uncomment //anim.play(); I get: Property 'play' does not exist on type 'RoutePathAnimation'.
If I uncomment //timestampProperty: 'timestamp', I get: 'timestampProperty' does not exist in type 'RoutePathAnimationOptions'
I noticed that the sample uses atlas namespace for both control and animations imports, I don't know how to do this, could it be the issue ?
The file ../lib/azure-maps/azure-maps-animations.js comes from https://github.com/Azure-Samples/azure-maps-animations/blob/main/dist/azure-maps-animations.js
The file /types/azure-maps-animations.d.ts comes from https://github.com/Azure-Samples/azure-maps-animations/blob/main/typings/index.d.ts
The concept of "timestampProperty" intrigues me and I would like to implement it. Could you please assist me in understanding these issues?
Thank you.