@dvhb/metro - is a library for displaying metro maps. It allows selecting stations on the map and showing information about them.
npm i @dvhb/metro --save
- jquery
- angular >= 1.3
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script><scripttype="text/javascript" src="dvhb_metro.min.js"></script><divmetrostations="stations" on-select="showInfo"><divmetro-infooffset="{top: 20}"><b>{{station.name}}</b><i>{{station.info}}</i></div></div>angular.module('App',['dvhbMetro']).controller('MainCtrl',function($scope){$scope.stations={"Курская (Кольцевая)": "SM. - Atrium, 3th fl., from 9:00 to 21:00","Фили": "SM. - Filevsky, 1st fl., from 10:00 to 21:00","Войковская": "SM. Voykovsky, 2nd fl., from 8:00 to 22:00","Спартак": "SM. Kolizey, 1st fl., from 8:00 to 22:00"};$scope.station={};$scope.showInfo=function(names,position){$scope.station={name: names[0],info: $scope.stations[names[0]]};}})| Attribute | Type | Description |
|---|---|---|
| stations | Array<String> | Object | list of active (available for selection) stations. It can be in an array with station names or an object, where every key is a station name |
| on-select | Function(names, coords) | function that will be called when a station is selected |
| map-url | String | link to svg with map |
Pop-up window with information about the selected station
| Attribute | Type | Description |
|---|---|---|
| offset | {top: Number, left: Number} | offset from station position |
Readme for @dvhb/metro is also available in other languages:
Design of metro map © Art. Lebedev Studio