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

Question

Hi,

I'm looking at transitioning my Angular application which currently uses Bing Maps to an Angular application using Azure Maps. One of the features in my current application uses the Bing Maps Data Binning Module. I was happy to find that there is a solution to do data binning in Azure Maps using the Azure Maps Gridded Data Source module (https://github.com/Azure-Samples/azure-maps-gridded-data-source), but there doesn't appear to be an NPM package that supports it.

I'm wondering how to incorporate this feature into my Angular solution or if anyone has successfully done so in an Angular application.

Thanks in advance for help or information,

Ken

Answer 1

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/

Answer 2

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

Answer 3

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