Join us to discuss the challenges, solutions and best practices for in-house JavaScript code sharing. Tuesday, 12/17 at 10am PT/1pm ET.Sign up here »

ng2-img-map

0.1.2 • Public • Published

Angular 2 Image Map

Responsive image mapping interface for Angular 2.

Demo

Markers

Markers can be placed on the image by inputting an array of co-ordinates. The co-ordinate values of a marker represent percentages of the dimensions of the image.

<img-map
  src="http://placekitten.com/g/500/300"
  [markers]="[[25, 25], [50, 50], [75, 75]]"
></img-map>

Markers can be created if the mark event has any observers.

New markers are pushed to the markers array.

markersnumber[][] = [];
onMark(markernumber[]) {
  console.log('Marker', marker);
  console.log('Markers', this.makers);
}
<img-map
  src="http://placekitten.com/g/500/300"
  [markers]="markers"
  (mark)="onMark($event)"
></img-map>

Markers can be selected if the change event has any observers.

markersnumber[][] = [[25, 25], [50, 50], [75, 75]];
onChange(markernumber[]) {
  console.log('Marker', marker);
}
<img-map
  src="http://placekitten.com/g/500/300"
  [markers]="markers"
  (change)="onChange($event)"
></img-map>

Drawing

The image map will draw automatically upon window resize or property changes. If the image map requires a draw upon an event outside of this scope then call the draw function of the image map component.

@ViewChild('imgMap')
imgMapImgMapComponent;
markersnumber[][] = [];
ngOnInit() {
  window.setTimeout(() => {
    this.markers.push([25, 25], [50, 50], [75, 75]);
    console.log('Markers', this.markers);
    window.setTimeout(() => this.imgMap.draw(), 1000);
  }, 1000);
}
<img-map
  #imgMap
  src="http://placekitten.com/g/500/300"
  [markers]="markers"
></img-map>

Install

npm i ng2-img-map

DownloadsWeekly Downloads

34

Version

0.1.2

License

MIT

Last publish

Collaborators

  • avatar