Responsive image mapping interface for Angular 2
npm install ng2-img-mapResponsive image mapping interface for Angular 2.
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.
``html`
[markers]="[[25, 25], [50, 50], [75, 75]]"
>
Markers can be created if the mark event has any observers.
> New markers are pushed to the markers array.
`ts`
markers: number[][] = [];
onMark(marker: number[]) {
console.log('Marker', marker);
console.log('Markers', this.makers);
}
`html`
[markers]="markers"
(mark)="onMark($event)"
>
Markers can be selected if the change event has any observers.
`ts`
markers: number[][] = [[25, 25], [50, 50], [75, 75]];
onChange(marker: number[]) {
console.log('Marker', marker);
}
`html`
[markers]="markers"
(change)="onChange($event)"
>
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.
`ts`
@ViewChild('imgMap')
imgMap: ImgMapComponent;
markers: number[][] = [];
ngOnInit() {
window.setTimeout(() => {
this.markers.push([25, 25], [50, 50], [75, 75]);
console.log('Markers', this.markers);
window.setTimeout(() => this.imgMap.draw(), 1000);
}, 1000);
}
`html``
src="http://placekitten.com/g/500/300"
[markers]="markers"
>