Using the Azure Maps Gridded Data Source Module in an Angular Application

At present you would need to download the JavaScript file here: https://github.com/Azure-Samples/azure-maps-gridded-data-source/blob/main/dist/azure-maps-gridded-data-source.min.js and host that in your app. In angular you can load in JavaScript files (how you do this varies by angular version). You can also download the type definitions from here: https://github.com/Azure-Samples/azure-maps-gridded-data-source/blob/main/typings/index.d.ts and similarly reference them in your app.

Here are some related resources:

• https://stackoverflow.com/questions/44817349/how-do-i-include-a-javascript-script-file-in-angular-and-call-a-function-from-th#:~:text=-%20Add%20below%20code%20snippet%20in%20typings.d.ts.%20If,script%2Fjs%20file%20directly%20in%20your%20component%20or.ts%20file.
• https://drag13.io/posts/custom-typings/index.html
• https://blog.angular-university.io/typescript-2-type-system-how-do-type-definitions-work-in-npm-when-to-use-types-and-why-what-are-compiler-opt-in-types/

I've tried half a dozen ways of loading the azure-maps-gridded-data-source JavaScript with no success. Half of the ways loads the script too early (for example when referencing it in angular.json) and the other ways (such as when loading the script dynamically) appear to not find "atlas" and fail with "TypeError: Cannot read properties of undefined (reading 'DataSource')" at line 2004: (azmaps.source.DataSource));

I'm sure there's something I'm missing, but I'd appreciate any push in the right direction for loading this particular script in Angular.

Thanks,

Ken

Just following up on this. I ended up changing the file extension to .ts, removing the IIFE and treating it as a normal function that I pass a new object to along with the atlas object. Not ideal, but it works.

Please comment if anyone has been successful with a better way of working with this inside Angular.

This functionality (i.e., gridded data source/data binning) should really be built into Azure Maps as it provides a great alternative to clustering and heat maps.

Ken