Home

World countries datamaps component for Angular, based on Google GeoCharts

countries-map is an Angular component you can place in your template and show a World Map chart with a color indicator attached to a value you define per-country.

Install

npm install --save countries-map

Usage

Import CountriesMapModule in your app.module.ts:

import { CountriesMapModule } from 'countries-map';

@NgModule({
  ...
  imports: [
    ...
    CountriesMapModule,
  ],
})
export class AppModule { }

In your templates, use the <countries-map> component like this:

<countries-map [data]="mapData" [apiKey]="abcdef"></countries-map>

and in the corresponding .ts file:

import { CountriesData } from 'countries-map';
...
public mapData: CountriesData = {
  'ES': { 'value': 416 },
  'GB': { 'value': 94 },
  'FR': { 'value': 255 }
};