ng-poland-map
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

NgPolandMap

ng-poland-map is Angular standalone component that displays svg map of Poland with highlightable voivodeship outlines.

Usage

Install ng-poland-map in your project with: npm i ng-poland-map.

Use it inside your Angular app with <ng-poland-map> selector.

Import component

import { NgPolandMapComponent } from 'ng-poland-map';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ NgPolandMapComponent ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.sass',
})

Input data

import { NgPolandMapPoint, NgPolandMapRegion, cityList, regionList } from "ng-poland-map";

const selectedRegions: NgPolandMapRegion[] = [...regionList]; // provide your own list based on regionList
const selectedCities: NgPolandMapCity[] = [...cityList]; // provide your own list based on cityList

Config

Config object can be created using NgPolandMapConfig type.

import { NgPolandMapConfig } from "ng-poland-map";

const config: NgPolandMapConfig = {
  // your config goes here
};

Then use it inside template.

<ng-poland-map 
  [highlightedRegions]="selectedRegions" 
  [highlightedCities]="selectedCites" 
  [bgColor]="config.bgColor" 
  [strokeColor]="config.strokeColor" 
  [strokeWidth]="config.strokeWidth" 
  [regionColor]="config.regionColor" 
  [highlightColor]="config.highlightColor" 
  [pointColor]="config.pointColor" 
  [pointSize]="config.pointSize" 
  [regionsClickable]="config.regionsClickable" 
  (regionClicked)="onRegionClicked($event)" 
  [pointersClickable]="config.pointersClickable" 
  (pointClicked)="onPointerClicked($event)" 
></ng-poland-map>

Click events

Define event handling functions inside your component

import { NgPolandMapPoint, NgPolandMapRegion } from "ng-poland-map";

...

onPointerClicked(point: NgPolandMapPoint) {
  // implement your own logic here
}

onRegionClicked(region: NgPolandMapRegion["voivodeship"]) {
  // implement your own logic here
}

Demo

Live demo is available at https://ng-poland-map.web.app.

You can view demo source here at github

Changelog

v0.0.7

  • click events added to regions and pointers

v0.0.8

  • fixed peer dependencies versions

v0.0.9

  • readme updated with click events

Readme

Keywords

Package Sidebar

Install

npm i ng-poland-map

Weekly Downloads

3

Version

0.1.0

License

none

Unpacked Size

310 kB

Total Files

16

Last publish

Collaborators

  • wnuczek