Responsive 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.
<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.
markers: number[][] = [];
onMark(marker: number[]) {
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.
markers: number[][] = [[25, 25], [50, 50], [75, 75]];
onChange(marker: number[]) {
console.log('Marker', marker);
}<img-map
src="http://placekitten.com/g/500/300"
[markers]="markers"
(change)="onChange($event)"
></img-map>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')
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);
}<img-map
#imgMap
src="http://placekitten.com/g/500/300"
[markers]="markers"
></img-map>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent