Skip to content

README.md

Latest commit

 

History

History
89 lines (73 loc) · 1.92 KB

README.md

File metadata and controls

89 lines (73 loc) · 1.92 KB

Angular 2 Image Map

Responsive image mapping interface for Angular 2.

Markers

Markers can be placed on the image by inputting an array of x and y co-ordinates. The x and y values of a marker are percentages of the width and height of the image respectively.

<img-map
  [src]="http://placekitten.com/500/300"
  [markers]="[{x: 25, y: 25}, {x: 50, y: 50}]"
></img-map>

A marker can be created on click if the mark event has any observers.

Only a single marker can be created. To preserve the marker handle the mark event to push the marker to the markers array.

markers: Position[] = [];
onMark(marker: Position) {
  this.markers.push(marker);
}
<img-map
  [src]="http://placekitten.com/500/300"
  [markers]="markers"
  (mark)="onMark($event)"
></img-map>

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

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

Re-drawing

The image map will re-draw itself automatically upon window resize or property changes. If the image map requires a re-draw upon an event outside of this scope then use the drawOnChange property.

For example: when the user creates a marker a form is shown to the side of the image map, changing the structure of the template.

marker: Position;
name: string;
onMark(marker: Position) {
  this.marker = marker;
}
<div
  class="col-md-4"
  *ngIf="marker"
>
  <div class="form-group">
    <input
      placeholder="Name"
      [(ngModel)]="name"
    >
  </div>
</div>
<div [ngClass]="{'col-md-8': marker, 'col-md-12': !marker}">
  <img-map
    [src]="http://placekitten.com/500/300"
    [drawOnChange]="marker"
    (mark)="onMark($event)"
  ></img-map>
</div>