From 827c18489fd474b1914d4be9c6457696769b1ac1 Mon Sep 17 00:00:00 2001
From: Xin Zheng <zhengxin@mit.edu>
Date: Sun, 23 Apr 2017 01:25:18 -0400
Subject: [PATCH] add point to point version. Yeah

---
 package.json                                  | 11 ++-
 src/components/Map/ScenarioMap/ScenarioMap.js | 27 +++++-
 .../ScenarioMap/transitive-map-layer/index.js | 96 ++++++++++++++-----
 3 files changed, 101 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index c6d70a9..b31da2d 100644
--- a/package.json
+++ b/package.json
@@ -38,18 +38,18 @@
   "author": "Xin Zheng",
   "license": "MIT",
   "dependencies": {
-    "web-worker-promise-interface": "^0.3.0",
     "@conveyal/lonlat": "^1.3.0",
-    "jsolines": "^0.2.3",
-    "d3-color": "^1.0.3",
-    "debug": "^2.6.4",
     "classnames": "^2.2.5",
+    "d3-color": "^1.0.3",
     "debounce": "^1.0.0",
+    "debug": "^2.6.4",
     "elemental": "^0.6.1",
     "express": "^4.15.2",
+    "jsolines": "^0.2.3",
     "leaflet": "^0.7.7",
     "leaflet-transitivelayer": "^0.2.0",
     "lodash": "^4.17.4",
+    "lodash.isequal": "^4.5.0",
     "lonlng": "0.1.0",
     "neal-react": "^0.2.5",
     "path": "^0.12.7",
@@ -73,7 +73,8 @@
     "redux-form": "^6.4.3",
     "redux-saga": "^0.14.3",
     "transitive-js": "0.9.2",
-    "uuid": "^2.0.3"
+    "uuid": "^2.0.3",
+    "web-worker-promise-interface": "^0.3.0"
   },
   "devDependencies": {
     "babel-core": "^6.21.0",
diff --git a/src/components/Map/ScenarioMap/ScenarioMap.js b/src/components/Map/ScenarioMap/ScenarioMap.js
index 68fda5a..abb0105 100644
--- a/src/components/Map/ScenarioMap/ScenarioMap.js
+++ b/src/components/Map/ScenarioMap/ScenarioMap.js
@@ -17,10 +17,18 @@ import GeojsonE5B from '../../../Data/busline/E5B.geojson'
 
 
 
+
+// TAUI
+import TransitiveMapLayer from './transitive-map-layer'
+import transitiveStyle from './transitive-style'
+
+
+
+
 import Transitive from 'transitive-js'
-import 'leaflet-transitivelayer'
+// import 'leaflet-transitivelayer'
 
-// old
+// old browsochrone example
 //import TransitiveLayer from './transitive-layer'
 //import transitiveStyle from './transitive-style'
 // import 'leaflet-transitivelayer'
@@ -850,9 +858,18 @@ class ScenarioMap extends React.Component {
     const position = [MapLat, MapLng];
     return (
       <div className={s.map}>
-        <Map center={position} zoom={12} detectRetina zoomControl={false} >
+        <Map center={position} zoom={12} detectRetina zoomControl={false} ref='map'>
           <ZoomControl position="bottomright" />
 
+          {transitive &&
+          <TransitiveMapLayer
+            data={transitive}
+            styles={transitiveStyle}
+            key={`transitive-${key}`}
+          />
+          }
+
+
           <TileLayer
             url={Tile}
             attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
@@ -873,9 +890,11 @@ class ScenarioMap extends React.Component {
             key={`iso-${key2}`}
           />}
 
-          { transitive && {transitiveLayer}  }
+          {/*{ transitive && {transitiveLayer}  }*/}
           {/*{ transitive && <TransitiveLayer data={transitive} key={`transitive-${key}`}/> }*/}
 
+
+
           <Marker
             position={origin}
             draggable={true}
diff --git a/src/components/Map/ScenarioMap/transitive-map-layer/index.js b/src/components/Map/ScenarioMap/transitive-map-layer/index.js
index 56a4af8..df8eefb 100755
--- a/src/components/Map/ScenarioMap/transitive-map-layer/index.js
+++ b/src/components/Map/ScenarioMap/transitive-map-layer/index.js
@@ -4,40 +4,25 @@ import {PropTypes} from 'react'
 import {MapLayer} from 'react-leaflet'
 import Transitive from 'transitive-js'
 import LeafletTransitiveLayer from 'leaflet-transitivelayer'
+import "./style.css"
 
 export default class TransitiveMapLayer extends MapLayer {
-  // static propTypes = {
-  //   data: PropTypes.object.isRequired,
-  //   map: PropTypes.instanceOf(Map),
-  //   styles: PropTypes.object
-  // };
+  static propTypes = {
+    data: PropTypes.object.isRequired,
+    map: PropTypes.instanceOf(Map),
+    styles: PropTypes.object
+  };
 
   shouldComponentUpdate (newProps, newState) {
+    console.log(!isEqual(newProps, this.props) || !isEqual(newState, this.state));
     return !isEqual(newProps, this.props) || !isEqual(newState, this.state)
   }
 
   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,
-        internalVertexFactor: 0,
-        angleConstraint: 5,
-        mergeVertexThreshold: 0
-      }]
-    });
+      data: this.props.data
+     });
     this.leafletElement = new LeafletTransitiveLayer(this.transitive)
   }
 
@@ -59,3 +44,66 @@ export default class TransitiveMapLayer extends MapLayer {
     return null
   }
 }
+
+
+// import {Map} from 'leaflet'
+// import isEqual from 'lodash.isequal'
+// import {PropTypes} from 'react'
+// import {MapLayer} from 'react-leaflet'
+// import Transitive from 'transitive-js'
+// import LeafletTransitiveLayer from 'leaflet-transitivelayer'
+//
+// export default class TransitiveMapLayer extends MapLayer {
+//   // static propTypes = {
+//   //   data: PropTypes.object.isRequired,
+//   //   map: PropTypes.instanceOf(Map),
+//   //   styles: PropTypes.object
+//   // };
+//
+//   shouldComponentUpdate (newProps, newState) {
+//     return !isEqual(newProps, this.props) || !isEqual(newState, this.state)
+//   }
+//
+//   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,
+//         internalVertexFactor: 0,
+//         angleConstraint: 5,
+//         mergeVertexThreshold: 0
+//       }]
+//     });
+//     this.leafletElement = new LeafletTransitiveLayer(this.transitive)
+//   }
+//
+//   componentDidMount () {
+//     super.componentDidMount();
+//     this.leafletElement._refresh()
+//   }
+//
+//   componentWillReceiveProps (props) {
+//     super.componentWillReceiveProps(props);
+//     this.transitive.updateData(props.data)
+//   }
+//
+//   componentDidUpdate (prevProps, prevState) {
+//     this.leafletElement._refresh()
+//   }
+//
+//   render () {
+//     return null
+//   }
+// }