Ng-world-map-svg NPM

Installing

$ npm i ng-world-map-svg

Adding angular material

Great now that we are sure the application loaded, you can stop it pressing “Ctrl + c” in the console you are running it, so we can add Angular Material to our application through the schematics.

$ ng add @angular/material

For more details click here.

Setup

...
import { SvgMapModule, ICustomConfig} from "ng-world-map-svg";
...

@NgModule({
  imports: [
    ...
    SvgMapModule.forRoot(<ICustomConfig>{
      country : ["IT"],
      googleAPIKey : "YOUR-API-KEY"
    })
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

Click here to get API Key.

Basic Usage

my.component.html

<map-svg></map-svg>

Advanced Usage - Without google map and with custom settings

app.module.ts

...
import { SvgMapModule, ICustomConfig} from "ng-world-map-svg";
...

@NgModule({
  imports: [
    ...
    SvgMapModule.forRoot(<ICustomConfig>{
      country : ["IT"],
      countryColors:["lightgray"],
      googleAPIKey : "YOUR-API-KEY"
    })
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

my.component.html

<map-svg [settings]="settings"></map-svg>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM } from 'ng-world-map-svg';

export class AppComponent {
  settings: SettingsVM = new SettingsVM();
  
  constructor() { }

  ngOnInit() {
  
   //Google Map settings
    this.settings.googleMap = false;
    //Stroke settings
    this.settings.strokeCountryColor = "azure";
    this.settings.strokeCountryWidth = "1px";
    //Marker color setting
    this.settings.markerColor = "orange";

    this.settings.listPoints = [
      { city: 'Torino', address: 'Via dell\'Arsenale 35', type: 'marker' },
      { city: 'Bari', address: 'Via Giovanni Amendola 162/A', type: 'info' }
    ];
  }
  
}

Advanced Usage - With custom settings

app.module.ts

...
import { SvgMapModule, ICustomConfig} from "ng-world-map-svg";
...

@NgModule({
  imports: [
    ...
    SvgMapModule.forRoot(<ICustomConfig>{
      //Multiple countries array
      country : ["IT","UK"],
      countryColors: ["green","red"],
      googleAPIKey : "YOUR-API-KEY"
    })
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

my.component.html

<map-svg [settings]="settings"></map-svg>

my.component.ts

import { Component } from '@angular/core';
import { SettingsVM } from 'ng-world-map-svg';

export class AppComponent {
  settings: SettingsVM = new SettingsVM();
  
  constructor() { }

  ngOnInit() {
  
   //Google Map settings
    this.settings.googleMap = true;
    this.settings.zoomMap = 6;
    this.settings.styleGoogleMap = "silver";
    //Stroke settings
    this.settings.strokeCountryColor = "black";
    this.settings.strokeCountryWidth = "1px";
    //Marker color setting
    this.settings.markerColor = "black";

    this.settings.listPoints = [
      { city: 'Torino', address: 'Via dell\'Arsenale 35', type: 'marker' },
      { city: 'Bari', address: 'Via Giovanni Amendola 162/A', type: 'info' },
      { city: 'London', address: 'NCP Car Park London Bridgedge', type: 'parking' }
    ];
  }
  
}

Advanced Usage - With custom settings and modal

my.component.html

<map-svg [settings]="settings" [templatePoint]="pointTemplate" [templateArea]="areaTemplate"></map-svg>
<ng-template #pointTemplate let-point="data">
    Custom template for {{point?.city}}.
    <br>
    Address: {{point.address}}
  </ng-template>

  <ng-template #areaTemplate let-area="dataArea">
    Custom template for {{area}}.
  </ng-template>

my.component.ts

import { Component} from '@angular/core';
import { SettingsVM } from 'ng-world-map-svg';

export class AppComponent {
  settings: SettingsVM = new SettingsVM();
  
  constructor() { }

  ngOnInit() {
    //Google Map settings
    this.settings.googleMap = true;
    this.settings.zoomMap = 6;
    this.settings.styleGoogleMap = "silver";
    //Stroke settings
    this.settings.strokeCountryColor = "black";
    this.settings.strokeCountryWidth = "1px";
    //Marker color setting
    this.settings.markerColor = "orange";
    //Modal settings
    this.settings.openModal = true;
    this.settings.modalWidth = 50;
    

    this.settings.listPoints = [
      { city: 'Torino', address: 'Via dell\'Arsenale 35', type: 'marker' },
      { city: 'Bari', address: 'Via Giovanni Amendola 162/A', type: 'info' },
      { city: 'London', address: 'NCP Car Park London Bridgedge', type: 'parking' }
    ];
  }
  
}

ICustomConfig Attributes Map

SettingsVM Attributes Map

PointVM Attributes Map

ICustomConfig Attributes Map Details

`country`

This value indicates the code of the country to be displayed.

SettingsVM Attributes Map Details

`googleMap`

If the value is true the google map is displayed along with the customized map of the various countries. If the value is false, only the first nation image of the country array is displayed.

`zoomMap`

This value sets the zoom level of the google map.

`styleGoogleMap`

This value sets the style of the google map. Allowed values are:

silver
retro
dark
night
aubergine

`strokeCountryColor`

This value sets the color of the line that separates the various areas of the displayed countries. It is used only if googleMap is set to false.

`strokeCountryWidth`

This value sets the width of the line that separates the various areas of the displayed countries. It is used only if googleMap is set to false.

`markerColor`

This value sets the color of the map marker. Allowed values are:

orange
white
black

`listPoints`

This array contains the list of the various points to display on the map. it's an array of PointVM type.

`openModal`

If the value is true when a marker or area is clicked, a modal is opened that uses the template that is passed to it. If it is false, the value in output is received through (clickPoint) and (clickArea)