How to use transitive-js - 4 common examples
To help you get started, we’ve selected a few transitive-js examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
opentripplanner / otp-react-redux / lib / components / map / transitive-overlay.js View on Github 
_initTransitive (canvas) {
const map = this.context.map
// set up the transitive instance
const mapBounds = map.getBounds()
this._transitive = new Transitive({
data: this.props.transitiveData,
initialBounds: [[mapBounds.getWest(), mapBounds.getSouth()], [mapBounds.getEast(), mapBounds.getNorth()]],
zoomEnabled: false,
autoResize: false,
styles: require('./transitive-styles'),
zoomFactors,
display: 'canvas',
canvas
})
checkHiPPI(canvas)
// the initial map draw
this._updateBoundsAndRender()
}_initTransitive (canvas) {
const map = this.context.map
// set up the transitive instance
const mapBounds = map.getBounds()
this._transitive = new Transitive({
data: this.props.transitiveData,
initialBounds: [[mapBounds.getWest(), mapBounds.getSouth()], [mapBounds.getEast(), mapBounds.getNorth()]],
zoomEnabled: false,
autoResize: false,
styles: require('./transitive-styles'),
zoomFactors,
display: 'canvas',
canvas
})
checkHiPPI(canvas)
// the initial map draw
this._updateBoundsAndRender()
}componentWillMount () {
super.componentWillMount()
this.transitive = new Transitive({
data: this.props.data,
gridCellSize: 200,
useDynamicRendering: true,
styles: this.props.styles,
// see https://github.com/conveyal/transitive.js/wiki/Zoom-Factors
zoomFactors: [
{
minScale: 0,
gridCellSize: 25,
internalVertexFactor: 1000000,
angleConstraint: 45,
mergeVertexThreshold: 200
},
{
minScale: 0.5,
gridCellSize: 0,componentDidMount () {
const el = document.getElementById('trn-canvas')
this._transitive = new Transitive({
el,
display: 'svg',
styles: STYLES,
gridCellSize: 200,
zoomFactors: [
{
minScale: 0,
gridCellSize: 300,
internalVertexFactor: 1000000,
angleConstraint: 45,
mergeVertexThreshold: 200
}
]
})
this._transitive.render()transitive-js
A tool for generating dynamic stylized transit maps that are easy to understand.
