How to use Azure Maps in Angular

Question

I cannot find any support, module or documentation for using Azure Maps in Angular. Is Azure Maps still too new and have no support for Angular yet?

I have tried the following module without success: https://www.npmjs.com/package/angular-azure-maps

I have tried following Microsofts instructions in their documentations for Azure Maps (non-Angular), but without success.

I am using Angular version 5.2.9.

Answer 1

Azure Maps is fairly new and we haven't had a chance to look into Angular ourselves yet (I'm the program manager for map controls on Azure Maps). There is an open source project that has been started by the community here: https://github.com/Acaisoft/angular-azure-maps I believe this is the source code to the library you are trying on npm.

We do plan to investigate how we can make using Azure Maps easier to use in Angular in the new year, but will likely start by integrating it into one of the many existing Angular map libraries that exist.

I recommend make a feature request so we can track this and others can upvote it here: https://feedback.azure.com/forums/909172-azure-maps

Answer 2

It's easy to use Azure Maps with Angular.

Firstly, you need to install npm package: npm i azure-maps-control --save.

Then, modify your angular.json file. Include files to the styles and scripts:

"styles": [
    "node_modules/azure-maps-control/dist/atlas.min.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/azure-maps-control/dist/atlas.min.js"
]

After that in your component, create ViewChild for you map container and initialize map. Don't forget to include some Azure Maps Subscription Key from the environment variable.

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Map, AuthenticationType } from 'azure-maps-control';
import { environment } from '@environments/environment';

@Component({
    selector: 'app-map-component',
    templateUrl: './map.component.html',
    styleUrls: [ './map.component.scss' ]
})
export class MapComponent implemens AfterViewInit {

    @ViewChild('map', { static: true })
    public mapContainer: ElementRef;

    public ngAfterViewInit(): void {
        const map = new Map(this.mapContainer.nativeElement, {
            center: [50.016, 36.13],
            zoom: 8,
            authOptions: {
                authType: AuthenticationType.subscriptionKey,
                subscriptionKey: environment.azureMapsSubscriptionKey
            }
        });
    }
}

And here's your map.component.html

<div #map></div>