Responsive image mapping interface for Angular 2

<!DOCTYPE html>
<html>
  <head>
    <base href="." />
    <title>Responsive image mapping interface for Angular 2</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.6/dist/css/bootstrap.min.css">
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('app').catch(console.error.bind(console));
    </script>
  </head>
  <body>
    <my-app>
      loading...
    </my-app>
  </body>
</html>

System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    'app': './src',
    '@angular/common': 'npm:@angular/common@2.0.0-rc.4/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@2.0.0-rc.4/bundles/compiler.umd.js',
    '@angular/core': 'npm:@angular/core@2.0.0-rc.4/bundles/core.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@2.0.0-rc.4/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.0.0-rc.4/bundles/platform-browser-dynamic.umd.js',
    'ng2-img-map': 'npm:ng2-img-map@0.1.1/ng2-img-map.js',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
  },
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

bootstrap(AppComponent);

import { Component, ViewChild } from '@angular/core'
import { ImgMapComponent } from 'ng2-img-map';

@Component({
  selector: 'my-app',
  directives: [ ImgMapComponent ],
  template: `
    <div class="container-fluid">
      <div class="col-sm-8">
        <img-map
          #imgMap
          src="http://placekitten.com/g/800/600"
          markerRadius="30"
          [markers]="markers"
          (mark)="onMark($event)"
          (change)="onChange($event)"
        ></img-map>
      </div>
      <div class="col-sm-4">
        <h2>Markers</h2>
        <ul class="list-unstyled">
          <li *ngFor="let marker of markers; let i = index">
            <span
              [ngClass]="{'text-primary': imgMap.markerActive === i}"
              (click)="selectMarker(i)"
            >
              {{ marker[0] }} x {{ marker[1] }}
            </span>
            <button
              class="btn btn-danger btn-xs"
              (click)="removeMarker(i)"
            >
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </li>
        </ul>
      </div>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('imgMap')
  imgMap: ImgMapComponent;
  markers: number[][] = [[25, 25], [50, 50], [75, 75]];
  onMark(marker: number[]) {
    console.log('Markers', this.markers);
  }
  onChange(marker: number[]) {
    console.log('Marker', marker);
  }
  selectMarker(index: number) {
    this.imgMap.markerActive = index;
    this.imgMap.draw();
  }
  removeMarker(index: number) {
    this.markers.splice(index, 1);
    if (index === this.imgMap.markerActive) {
      this.imgMap.markerActive = null;
    } else if (index < this.imgMap.markerActive) {
      this.imgMap.markerActive--;
    }
    this.imgMap.draw();
  }
};