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/