fix(map): fix scaling issues in transitive overlay

Author: David Emory

lib/components/map/transitive-overlay.js

@@ -1,9 +1,12 @@
 import { PropTypes } from 'react'
 import { MapLayer } from 'react-leaflet'
 import L from 'leaflet'
+import { connect } from 'react-redux'
 
 import * as d3 from 'd3'
 
+import { getActiveSearch } from '../../util/state'
+
 import Transitive from 'transitive-js'
 
 class TransitiveOverlay extends MapLayer {
@@ -55,15 +58,20 @@ class TransitiveOverlay extends MapLayer {
       this._redraw()
     })
 
+    const leafletContainer = document.getElementsByClassName('leaflet-container')[0]
+
     // set up the transitive instance
     const mapBounds = map.getBounds()
     this._transitive = new Transitive({
       data: this.props.transitiveData,
-      svgContainer: document.getElementsByClassName('leaflet-container')[0],
+      svgContainer: leafletContainer,
       svg: this._svgMain,
       initialBounds: [[mapBounds.getWest(), mapBounds.getSouth()], [mapBounds.getEast(), mapBounds.getNorth()]],
       zoomEnabled: false,
-      autoResize: false
+      autoResize: false,
+      styles: require('./transitive-styles'),
+      drawGrid: false,
+      gridCellSize: 300
     })
 
     // the initial map draw
@@ -73,6 +81,7 @@ class TransitiveOverlay extends MapLayer {
   componentWillReceiveProps (nextProps) {
     if (nextProps.transitiveData !== this.props.transitiveData) {
       this._transitive.updateData(nextProps.transitiveData)
+      this._transitive.render()
       this._redraw()
     }
   }
@@ -95,4 +104,16 @@ class TransitiveOverlay extends MapLayer {
   }
 }
 
-export default TransitiveOverlay
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  const activeSearch = getActiveSearch(state.otp)
+  return {
+    transitiveData: activeSearch && activeSearch.profileResponse && activeSearch.profileResponse.otp
+  }
+}
+
+const mapDispatchToProps = {
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(TransitiveOverlay)

lib/components/map/transitive-styles.js

@@ -0,0 +1,82 @@
+var STYLES = {}
+
+STYLES.segments = {
+
+  // override the default stroke color
+  stroke: (display, segment) => {
+    if (!segment.focused) return
+
+    switch (segment.type) {
+      case 'CAR':
+        return '#888'
+      case 'WALK':
+        return '#00f'
+      case 'BICYCLE':
+        return '#f00'
+    }
+  },
+
+  // override the default stroke width
+  'stroke-width': (display, segment, index, utils) => {
+    switch (segment.type) {
+      case 'CAR':
+        return utils.pixels(display.zoom.scale(), 2, 4, 6) + 'px'
+      case 'WALK':
+      case 'BICYCLE':
+        return '4px'
+      case 'TRANSIT':
+        // bus segments:
+        if (segment.mode === 3) {
+          return utils.pixels(display.zoom.scale(), 2, 4, 8) + 'px'
+        }
+        // all others:
+        return utils.pixels(display.zoom.scale(), 4, 8, 12) + 'px'
+    }
+  },
+
+  // specify the dash-array
+  'stroke-dasharray': (display, segment) => {
+    switch (segment.type) {
+      case 'CAR':
+        return '3,2'
+      case 'WALK':
+      case 'BICYCLE':
+        return '0.01,6'
+    }
+  },
+
+  // specify the line cap type
+  'stroke-linecap': (display, segment) => {
+    switch (segment.type) {
+      case 'CAR':
+        return 'butt'
+      case 'WALK':
+      case 'BICYCLE':
+        return 'round'
+    }
+  }
+}
+
+/** style overrides for places (i.e. the start and end icons) **/
+
+STYLES.places_icon = {
+  x: [-16],
+  y: [-16],
+  width: [
+    32
+  ],
+  height: [
+    32
+  ],
+  'xlink:href': [
+    (display, data) => {
+      // if (data.owner.getId() === 'from') return 'assets/img/star60.svg'
+      // if (data.owner.getId() === 'to') return 'assets/img/map25.svg'
+    }
+  ],
+  visibility: [
+    'visible'
+  ]
+}
+
+export default STYLES