Merge pull request #111 from conveyal/dev

v0.8.0

Author: trevorgerhardt

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
 
-    <title>IndyConnect</title>
+    <title>Conveyal Analysis</title>
 
     <link href="assets/index.css" rel="stylesheet">
   </head>

src/actions/browsochrones.js

@@ -17,7 +17,8 @@ import {
   setEnd,
   setEndLabel,
   setStart,
-  setStartLabel
+  setStartLabel,
+  updateMap
 } from '../actions'
 
 import type {Store} from '../types'
@@ -42,8 +43,14 @@ export default function initialize ({
     ),
     geocodeQs({geocoder, qs}).then(([start, end]) => {
       const actions = []
-      if (start) actions.push(setStart(start))
+      if (start) {
+        actions.push(setStart(start))
+        actions.push(
+          updateMap({centerCoordinates: lonlat.toLeaflet(start.latlng)})
+        )
+      }
       if (end) actions.push(setEnd(end))
+      if (qs.zoom) actions.push(updateMap({zoom: parseInt(qs.zoom, 10)}))
       actions.push(
         fetchGrids(browsochrones)
           .then(grids =>

src/components/application.js

@@ -114,13 +114,7 @@ export default class Application extends Component<void, Props, State> {
     return markers
   }
 
-  _setStart = ({
-    label,
-    latlng
-  }: {
-    label?: string,
-    latlng: Coordinate
-  }) => {
+  _setStart = ({label, latlng}: {label?: string, latlng: Coordinate}) => {
     const {browsochrones, map, mapMarkers, timeCutoff, updateStart} = this.props
     const endLatlng = mapMarkers.end && mapMarkers.end.latlng
       ? mapMarkers.end.latlng
@@ -153,13 +147,7 @@ export default class Application extends Component<void, Props, State> {
     }
   }
 
-  _setEnd = ({
-    label,
-    latlng
-  }: {
-    label?: string,
-    latlng: Coordinate
-  }) => {
+  _setEnd = ({label, latlng}: {label?: string, latlng: Coordinate}) => {
     const {browsochrones, map, mapMarkers, updateEnd} = this.props
     updateEnd({
       browsochronesInstances: browsochrones.instances,
@@ -221,10 +209,10 @@ export default class Application extends Component<void, Props, State> {
       <div>
         <div className='Fullscreen'>
           <Map
+            active={browsochrones.active}
             centerCoordinates={map.centerCoordinates}
             clearStartAndEnd={this._clearStartAndEnd}
-            geojson={map.geojson}
-            geojsonColor={browsochrones.active === 0 ? '#4269a4' : 'darkorange'}
+            isochrones={map.isochrones}
             markers={markers}
             pointsOfInterest={pointsOfInterest}
             setEnd={this._setEnd}
@@ -275,7 +263,9 @@ export default class Application extends Component<void, Props, State> {
               actionLog &&
               actionLog.length > 0 &&
               <div className='Card'>
-                <div className='CardTitle'>{messages.Log.Title}</div>
+                <div className='CardTitle'>
+                  {messages.Log.Title}
+                </div>
                 <Log items={actionLog} />
               </div>}
           </div>

src/components/form.js

@@ -50,7 +50,9 @@ export default ({
   start
 }: Props) => (
   <div>
-    <div className='heading'>{messages.Geocoding.StartTitle}</div>
+    <div className='heading'>
+      {messages.Geocoding.StartTitle}
+    </div>
     <div className='Geocoder'>
       <Geocoder
         apiKey={process.env.MAPZEN_SEARCH_KEY}
@@ -69,7 +71,9 @@ export default ({
     </div>
     {start &&
       <div>
-        <div className='heading'>{messages.Geocoding.EndTitle}</div>
+        <div className='heading'>
+          {messages.Geocoding.EndTitle}
+        </div>
         <div className='Geocoder'>
           <Geocoder
             apiKey={process.env.MAPZEN_SEARCH_KEY}

src/components/log-item/index.js

@@ -11,6 +11,8 @@ export default (props: LogItem) => (
     <small className='LogItem-createdAt'>
       {formatDate(props.createdAt, FORMAT)}
     </small>
-    <span className='LogItem-text'>{props.text}</span>
+    <span className='LogItem-text'>
+      {props.text}
+    </span>
   </div>
 )

src/components/map.js

@@ -11,6 +11,7 @@ import {
 } from 'react-leaflet'
 
 import Icon from './icon'
+import {setKeyTo} from '../utils/hash'
 import leafletIcon from '../utils/leaflet-icons'
 import messages from '../utils/messages'
 import TransitiveLayer from './transitive-map-layer'
@@ -33,10 +34,10 @@ const endIcon = leafletIcon({
 })
 
 type Props = {
+  active: number,
   centerCoordinates: Coordinate,
   clearStartAndEnd(): void,
-  geojson: Feature[],
-  geojsonColor: string,
+  isochrones: any[],
   markers: any[],
   pointsOfInterest: PointsOfInterest,
   setEnd(any): void,
@@ -107,11 +108,15 @@ export default class Map extends PureComponent<void, Props, State> {
     })
   }
 
+  _setZoom = (e: MapEvent) => {
+    setKeyTo('zoom', e.target._zoom)
+  }
+
   render (): React$Element<LeafletMap> {
     const {
+      active,
       centerCoordinates,
-      geojson,
-      geojsonColor,
+      isochrones,
       markers,
       pointsOfInterest,
       transitive,
@@ -129,11 +134,15 @@ export default class Map extends PureComponent<void, Props, State> {
       tileLayerProps.zoomOffset = -1
     }
 
+    const baseIsochrone = isochrones[0]
+    const comparisonIsochrone = active !== 0 ? isochrones[active] : null
+
     return (
       <LeafletMap
         center={centerCoordinates}
         className='Taui-Map'
         ref='map'
+        onZoomend={this._setZoom}
         zoom={zoom}
         onClick={this._onMapClick}
         preferCanvas
@@ -159,47 +168,43 @@ export default class Map extends PureComponent<void, Props, State> {
             onDragEnd={m.onDragEnd}
             position={m.position}
           >
-            {m.label && <Popup><span>{m.label}</span></Popup>}
+            {m.label &&
+              <Popup>
+                <span>
+                  {m.label}
+                </span>
+              </Popup>}
           </Marker>
         ))}
 
-        {geojson.map(g => {
-          return (
-            <GeoJson
-              key={`${g.key}`}
-              data={g}
-              style={{
-                fillColor: geojsonColor,
-                pointerEvents: 'none',
-                stroke: geojsonColor,
-                weight: 1
-              }}
-            />
-          )
-        })}
+        {baseIsochrone &&
+          <Isochrone isochrone={baseIsochrone} color='#4269a4' />}
+
+        {comparisonIsochrone &&
+          <Isochrone isochrone={comparisonIsochrone} color='darkorange' />}
 
         {transitive &&
           <TransitiveLayer data={transitive} styles={transitiveStyle} />}
 
         {showSelectStartOrEnd &&
           <Popup closeButton={false} position={lastClickedLatlng}>
             <div className='Popup'>
-              {lastClickedLabel && <h3>{lastClickedLabel}</h3>}
+              {lastClickedLabel &&
+                <h3>
+                  {lastClickedLabel}
+                </h3>}
               <button onClick={this._setStart}>
-                <Icon type='map-marker' />
-                {' '}
+                <Icon type='map-marker' />{' '}
                 {messages.Map.SetLocationPopup.SetStart}
               </button>
               {markers.length > 0 &&
                 <button onClick={this._setEnd}>
-                  <Icon type='map-marker' />
-                  {' '}
+                  <Icon type='map-marker' />{' '}
                   {messages.Map.SetLocationPopup.SetEnd}
                 </button>}
               {markers.length > 0 &&
                 <button onClick={this._clearStartAndEnd}>
-                  <Icon type='times' />
-                  {' '}
+                  <Icon type='times' />{' '}
                   {messages.Map.SetLocationPopup.ClearMarkers}
                 </button>}
             </div>
@@ -209,6 +214,21 @@ export default class Map extends PureComponent<void, Props, State> {
   }
 }
 
+function Isochrone ({isochrone, color}) {
+  return (
+    <GeoJson
+      key={`${isochrone.key}`}
+      data={isochrone}
+      style={{
+        fillColor: color,
+        pointerEvents: 'none',
+        stroke: color,
+        weight: 1
+      }}
+    />
+  )
+}
+
 class MapboxGeoJson extends GeoJson {
   componentWillMount () {
     const {mapbox} = require('mapbox.js')