metroflow

A javascript library to create interactive metro (subway) map style (flow)charts on an HTML canvas.

WARNING: This is a work in progress in pre-alpha state. It is functional, so feel free to try it but expect changes that break your code in future versions.

Demo

A metro-map editor built with the MetroFlow library:
https://bartromgens.github.io/metroflow/

Features

MetroFlow library

Create metro (subway) style vector maps on an HTML canvas
Create metro maps via code
Create multiple tracks
Create stations and minor stations
Create connections between stations
Style stations, tracks, and text (size, width, color) on track or station level
Auto-positioning of tekst
HTML element overlays on stations and tracks for interaction
Save/load maps to json

Web-editor

Create maps via a web-editor
Create tracks
Create and position stations and minor stations
Connect stations and tracks
Edit station and track styles
Edit station names
Undo/Redo changes
Load/save map

Web-viewer

Empty canvas to draw on
Load maps created in the web-editor
Modify loaded or generated maps via javascript and make them interactive
Use generated HTML element overlays at station positions to create interactions and add information
Zoom and pan

Dependencies

jQuery
paper.js

Usage

Include `metroflow.js` in your project

Because metroflow uses paper.js with paperscript, the scope is limited to a file.

Therefore, to use metroflow.js in your project, you have two options,

Bundle metroflow.js in your project file, and include your project in your HTML with the type="text/paperscript" attribute.
Manually export the library via window.globals. This is easier if you don't use any tool to bundle your modules and files.

Option 1: Bundling (webpack example)

Bundling of metroflow.js into your project can, for example, be done with webpack. An example webpack configuration is found in doc/webpack.config.js. You have to include the library in your main project,

var MetroFlow = require("./<path-to-lib>/metroflow.js");

And run webpack to create your bundle,

$ webpack --progress --colors --watch

Option 2: Export MetroFlow via windows.globals

Manually add the following lines at the end of metroflow.js to export the library via the window,

window.globals = {
    MetroFlow: MetrowFlow
};

And include it in your project,

var MetroFlow = window.globals.MetroFlow;

You can now include metroflow.js in your html, separate from your project file, note the text/paperscript and text/javascript'

<script type="text/paperscript" src="metroflow.js" canvas="paperCanvas"></script>
<script type="text/javascript" src="your_metro_project.js"></script>

Examples

See example_basic.html and examples/basic/basic.js for a basic example of how to use the library.

For more info, please read the code in src/js/, or create a ticket with a question to write a proper guide and documentation.

Development

Webpack bundles

Install webpack and some plugins and loaders,

$ sudo npm install webpack -g
$ npm install --save-dev webpack path webpack-manifest-plugin webpack-cleanup-plugin extract-text-webpack-plugin css-loader style-loader babel-core babel-loader babel-preset-es2015

Webpack config is found in webpack.config.js.

Watch for changes and compile bundle if found,

$ webpack --progress --colors --watch

Generate minified production files,

$ webpack -p

bartromgens/metroflow