{"id":14520380,"url":"https://github.com/arnaudleclerc/ng-azure-maps","last_synced_at":"2025-08-31T22:30:58.378Z","repository":{"id":38370484,"uuid":"246513039","full_name":"arnaudleclerc/ng-azure-maps","owner":"arnaudleclerc","description":"Angular wrapper around azure maps","archived":false,"fork":false,"pushed_at":"2024-06-14T16:07:44.000Z","size":34147,"stargazers_count":16,"open_issues_count":17,"forks_count":14,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2024-12-13T05:39:26.635Z","etag":null,"topics":["angular","azure-maps","azure-maps-control"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnaudleclerc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-11T08:18:20.000Z","updated_at":"2024-09-03T23:31:22.000Z","dependencies_parsed_at":"2024-06-21T17:38:47.999Z","dependency_job_id":"2975aa4e-e933-42e4-bed3-0a622e161f2d","html_url":"https://github.com/arnaudleclerc/ng-azure-maps","commit_stats":{"total_commits":179,"total_committers":5,"mean_commits":35.8,"dds":0.2178770949720671,"last_synced_commit":"ba1786944c6b9680c2b2aa20684c824db473e917"},"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaudleclerc%2Fng-azure-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaudleclerc%2Fng-azure-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaudleclerc%2Fng-azure-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnaudleclerc%2Fng-azure-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnaudleclerc","download_url":"https://codeload.github.com/arnaudleclerc/ng-azure-maps/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231631667,"owners_count":18403227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","azure-maps","azure-maps-control"],"created_at":"2024-09-04T04:01:40.751Z","updated_at":"2024-12-28T13:30:44.080Z","avatar_url":"https://github.com/arnaudleclerc.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Sep 04, 2024](/content/2024/09/04/README.md)","Maps"],"readme":"![release](https://github.com/arnaudleclerc/ng-azure-maps/workflows/release/badge.svg?branch=main) [![NPM Version](https://img.shields.io/npm/v/ng-azure-maps.svg?style=flat)](https://www.npmjs.com/package/ng-azure-maps) [![NPM Downloads](https://img.shields.io/npm/dm/ng-azure-maps.svg?style=flat)](https://www.npmjs.com/package/ng-azure-maps) [![license](https://img.shields.io/npm/l/ng-azure-maps.svg?style=flat)](https://github.com/arnaudleclerc/ng-azure-maps/blob/develop/LICENSE)\n\n# ng-azure-maps \n\n`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.\n\n![4 Maps sample](./assets/4mapssample.png)\n\n## Install the package\n\nThe package is available on npm. You need to install the dependencies to the azure-maps-* packages by yourself.\n\n```\nnpm i --save azure-maps-control azure-maps-drawing-tools azure-maps-rest ng-azure-maps\n```\n\n## Register the module\n\nAn `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.\n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { AzureMapsModule } from 'ng-azure-maps';\nimport { environment } from '../environments/environment';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AzureMapsModule.forRoot({\n      authOptions: environment.authOptions\n    })\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nThe module can also be lazy loaded using the `forChild` method. \n\n```\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MapComponent } from './map/map.component';\nimport { AzureMapsModule } from 'ng-azure-maps';\nimport { environment } from '../../environments/environment';\nimport { RouterModule, Routes } from '@angular/router';\n\nconst routes: Routes = [{ path: \"\", component: MapComponent }];\n\n@NgModule({\n  declarations: [MapComponent],\n  imports: [\n    CommonModule,\n    RouterModule.forChild(routes),\n    AzureMapsModule.forChild({\n      authOptions: environment.authOptions\n    })\n  ]\n})\nexport class MapModule { }\n```\n\nIf you need to dynamically set the azure maps configuration, you can override the `AZUREMAPS_CONFIGURATION` injection token as follows : \n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { AzureMapsModule, AZUREMAPS_CONFIG } from 'ng-azure-maps';\nimport { environment } from '../environments/environment';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AzureMapsModule.forRoot()\n  ],\n  providers: [\n    {\n      provide: AZUREMAPS_CONFIG,\n      useValue: {\n        authOptions: environment.authOptions\n      }\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nYou can also use an APP_INITIALIZER to set the configuration if you need to retrieve the configuration asynchronously : \n\n```\nimport { BrowserModule } from '@angular/platform-browser';\nimport { APP_INITIALIZER, NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\nimport { AzureMapsModule, setAzureMapsConfiguration } from 'ng-azure-maps';\nimport { HttpClient } from '@angular/common/http';\nimport { AuthenticationType } from 'azure-maps-control';\n\nfunction setAuthentication(httpClient: HttpClient): () =\u003e Promise\u003cvoid\u003e {\n  return (): Promise\u003cvoid\u003e =\u003e {\n    return new Promise\u003cvoid\u003e((resolve, reject) =\u003e {\n      httpClient.get\u003c{ subscriptionKey: string }\u003e('\u003cyour-api-endpoint\u003e').subscribe(auth =\u003e {\n        setAzureMapsConfiguration({\n          authOptions: {\n            authType: AuthenticationType.subscriptionKey,\n            subscriptionKey: auth.subscriptionKey\n          }\n        });\n        resolve();\n      }, error =\u003e {\n        reject(error);\n      });\n    });\n  };\n}\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AzureMapsModule.forRoot(),\n  ],\n  providers: [\n    {\n      provide: APP_INITIALIZER,\n      useFactory: setAuthentication,\n      deps: [HttpClient],\n      multi: true\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## How To\n\nPlease refer to the [Wiki](https://github.com/arnaudleclerc/ng-azure-maps/wiki) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaudleclerc%2Fng-azure-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnaudleclerc%2Fng-azure-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnaudleclerc%2Fng-azure-maps/lists"}