Skip to content

Commit

Permalink
add point to point version. Yeah
Browse files Browse the repository at this point in the history
  • Loading branch information
Xin-Zheng committed Apr 23, 2017
1 parent f55dee8 commit 827c184
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 33 deletions.
11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
27 changes: 23 additions & 4 deletions src/components/Map/ScenarioMap/ScenarioMap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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'
Expand All @@ -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}
Expand Down
96 changes: 72 additions & 24 deletions src/components/Map/ScenarioMap/transitive-map-layer/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand All @@ -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
// }
// }

0 comments on commit 827c184

Please sign in to comment.