ng-azure-maps is an Angular library, mostly HTML driven wrapper of the azure-maps-controls package allowing to easilly integrate its functionalities into an Angular application.
The package is available on npm. You need to install the dependencies to the azure-maps-* packages by yourself.
npm i --save azure-maps-control azure-maps-drawing-tools azure-maps-rest ng-azure-maps
An AzureMapsModule can be imported from the ng-azure-maps namespace. This class exposes a forRoot method which can be called by your angular module and where the configuration of the library can be given.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AzureMapsModule } from 'ng-azure-maps';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AzureMapsModule.forRoot({
authOptions: environment.authOptions
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
The module can also be lazy loaded using the forChild method.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MapComponent } from './map/map.component';
import { AzureMapsModule } from 'ng-azure-maps';
import { environment } from '../../environments/environment';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [{ path: "", component: MapComponent }];
@NgModule({
declarations: [MapComponent],
imports: [
CommonModule,
RouterModule.forChild(routes),
AzureMapsModule.forChild({
authOptions: environment.authOptions
})
]
})
export class MapModule { }
If you need to dynamically set the azure maps configuration, you can override the AZUREMAPS_CONFIGURATION injection token as follows :
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AzureMapsModule, AZUREMAPS_CONFIG } from 'ng-azure-maps';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AzureMapsModule.forRoot()
],
providers: [
{
provide: AZUREMAPS_CONFIG,
useValue: {
authOptions: environment.authOptions
}
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
You can also use an APP_INITIALIZER to set the configuration if you need to retrieve the configuration asynchronously :
import { BrowserModule } from '@angular/platform-browser';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AzureMapsModule, setAzureMapsConfiguration } from 'ng-azure-maps';
import { HttpClient } from '@angular/common/http';
import { AuthenticationType } from 'azure-maps-control';
function setAuthentication(httpClient: HttpClient): () => Promise<void> {
return (): Promise<void> => {
return new Promise<void>((resolve, reject) => {
httpClient.get<{ subscriptionKey: string }>('<your-api-endpoint>').subscribe(auth => {
setAzureMapsConfiguration({
authOptions: {
authType: AuthenticationType.subscriptionKey,
subscriptionKey: auth.subscriptionKey
}
});
resolve();
}, error => {
reject(error);
});
});
};
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AzureMapsModule.forRoot(),
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: setAuthentication,
deps: [HttpClient],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Please refer to the Wiki for more details.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent