Angular Metro Maps (AMM) Core - Angular 2+ Metro Maps components

@angular-metro-maps/core contains solutions for the SVG Metro Maps.

###DEMO (plunkr)

Getting Started

Import AmmModule from angular-metro-maps/core

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

import { AmmModule } from '@angular-metro-maps/core';

@NgModule({
  imports: [
    BrowserModule,
    AmmModule
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Use amm-metro-map component

@Component({
  selector: 'app-root',
  template: `
  <amm-metro-map 
         (mapClick)="metroClick($event)" 
        [(stations)]="metro"></amm-metro-map>
  `
})
export class AppComponent {
  
  public metro: string[] = [];
  
  public metroClick(mapEvent) {

      // sync data with metroMap click
      this.metro.forEach(item => {
  
        if (this.metro.indexOf(item.stationName) !== -1) {
          this.metro.push(item.stationName);
        } else {
          this.metro.splice(this.metro.indexOf(item.stationName), 1)  
        }
  
      });
      
  }
}			

Documentation

amm-metro-map is currently supported with the following features. Options on how to use them in your own application are linked below.

| Option | Type | Default | Params| Description | | ------ | ------ | --------- | --------- | --------- | | (mapClick) | function | null | | callback on map click | [(stations)] | string[] | [] | | array of strings that sync map and your set of data | [mapUrl] | string | null | 'spb' - (Sankt petersburg map)| url to svg map (Default - Moscow map)

The sources for this package are in the angular-metro-maps repository. Please file issues and pull requests against that repo.

License

License: See LICENSE file in this folder © falendary.

Metro map design © Art. Lebedev Studio