Skip to content

bartromgens/metroflow

Repository files navigation

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

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

About

Interactive metro maps on an HTML canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published