Monday, 11 February, 2019 UTC

Extensible React Component for Taipei Metro Map

Extensible React Component for Taipei Metro Map

Summary

react-taipei-metro
Extensible React Component for SVG Taipei Metro Map. The design is mostly referenced from 曼努 manzoo and the post with some minor modifications.
View demo Download Source
Install 
npm install react-taipei-metro

Example

import React from 'react';
import ReactDOM from 'react-dom';
import MetroMap from 'react-taipei-metro';

class Window extends React.Component {

  // Customized your mouse events.
  onMouseEnterStation(station, scale) {
    console.log('Enter station ' + station.name.en);
  }
  
  onMouseLeaveStation(station, scale) {
    console.log('Leave station ' + station.name.en);
  }
  
  onClickStation(station, scale, e) {
    console.log('Station ' + station.name.en + ' clicked.');
  }
  
  // You can also render customized svg elements for each station.
  renderUserData(station, scale) {
    return (<text key={station.id} x={station.center.x} y={station.center.y}
        fontSize={10 * scale} fill={this.textColor}
        dominantBaseline='middle' textAnchor='middle'>{station.name.en.length}</text>);
  }

  // See Props for more details.
  render() {
    return (<MetroMap
      width={800} height={900} // The compoent maintains fixed aspect ratio of 8 / 9.
      showStationName={true} 
      onMouseEnterStation={(station, scale) => this.onMouseEnterStation(station, scale)}
      onMouseLeaveStation={(station, scale) => this.onMouseLeaveStation(station, scale)}
      onClickStation={(station, scale, e) => this.onClickStation(station, scale, e)}
      renderUserData={(station, scale) => this.renderUserData(station, scale)} />);
  }
}

ReactDOM.render(
  <Window />,
  document.getElementById('root')
);
Props
Name Description Type Default
width Width of component(px) number 800
height Height of component(px) number 900
style Style of component object { }
bgColor Background color of component string white
textStyle Style of station name text object { fill: 'black' }
showStationName Whether to show station name bool true
showUserData Whether to show user data bool true
onMouseEnterStation Event listener when mouse enters a station func: (station, scale) => { } -
onMouseLeaveStation Event listener when mouse leaves a station func: (station, scale) => { } -
onClickStation Event listener when mouse clicks on a station func: (station, scale, e) => { } -
renderUseData Function(s) for rendering user content for each station func: (station, scale) => JSX or array<func: (station, scale) => JSX> -

Function arguments

  • station
{
  id: 5,
  name: { en: 'Yuanshan', zh: '圓山' },
  center: { x: 365, y: 373 },
  lines: ['R']
}
  • scale: min(props.width / 800, props.height / 900)
Build 
npm run build
GitHub

Full Article

reactjsexample.com