npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-world-map-svg

v1.0.10

Published

Create a google map with overlay the svg image of the countries indicated and the various places to display or a svg image of a country with the relative places to display.

Downloads

4

Readme

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)

modalWidth

This value sets the width of the modal. It is used only if openModal is set to true. Note that this value is in percentage.

PointVM Attributes Map Details

type

This value indicates the type of pin to be used for places. Allowed values are:

  • marker
  • info
  • parking
  • restaurant

city

This value indicates the city.

address

This value indicates the address of place.