feat(form): Initial work on new location field, including geocoding

Author: David Emory

lib/components/form/location-field.js

@@ -1,23 +1,41 @@
 import lonlat from '@conveyal/lonlat'
 import React, { Component, PropTypes } from 'react'
-import { FormGroup } from 'react-bootstrap'
+import { FormGroup, FormControl, InputGroup, DropdownButton, MenuItem } from 'react-bootstrap'
 import { connect } from 'react-redux'
-import Geocoder from 'react-select-geocoder'
+import { autocomplete } from 'isomorphic-mapzen-search'
 
 import { setLocation, clearLocation } from '../../actions/map'
 
 class LocationField extends Component {
   static propTypes = {
+    config: PropTypes.object,
     location: PropTypes.object,
     label: PropTypes.string,
-    setLocation: PropTypes.func,
-    type: PropTypes.string // replace with locationType?
+    type: PropTypes.string, // replace with locationType?
+
+    // dispatch
+    clearLocation: PropTypes.func,
+    setLocation: PropTypes.func
   }
+
   constructor (props) {
     super(props)
-    this.state = {}
+    this.state = {
+      dropdownOpen: false,
+      geocodedFeatures: []
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.props.location !== nextProps.location) {
+      this.setState({
+        value: nextProps.location !== null ? nextProps.location.name : '',
+        geocodedFeatures: []
+      })
+    }
   }
-  _onChange = (value, option) => {
+
+  /* _onChange = (value, option) => {
     console.log(value, option)
     if (value && value.geometry) {
       const location = lonlat.fromCoordinates(value.geometry.coordinates)
@@ -32,34 +50,147 @@ class LocationField extends Component {
       this.props.clearLocation(this.props.type)
     }
   }
+
   _toValue = (location) => {
     return location && {
       value: `${location.lon},${location.lat}`,
       label: location.name
     }
+  } */
+
+  _geocode (text) {
+    const { config } = this.props
+    autocomplete({
+      apiKey: config.geocoder.MAPZEN_KEY,
+      boundary: config.geocoder.boundary,
+      // TODO: use current location as focus point
+      text
+    }).then((result) => {
+      console.log(result)
+      this.setState({ geocodedFeatures: result.features })
+    }).catch((err) => {
+      console.error(err)
+    })
   }
+
   render () {
-    const { config, location } = this.props
-    // TODO: add geolocation (in react-select-geocoder?)
+    const currentLocationOption = createOption('location-arrow', 'Use Current Location', 'test1')
+
+    let geocodedFeatures = this.state.geocodedFeatures
+    if (geocodedFeatures.length > 5) geocodedFeatures = geocodedFeatures.splice(0, 5)
+
+    let nearbyStops = [] /*{
+      name: 'Stop X',
+      routes: ['10','11']
+    }]*/
+
+    const formControlClassname = this.props.type + '-form-control'
     return (
       <form>
-        <FormGroup>
-          <Geocoder
-            apiKey={config.geocoder.MAPZEN_KEY}
-            boundary={config.geocoder.boundary}
-            placeholder={this.props.label || this.props.type}
-            focusPoint={[config.map.initLon, config.map.initLat]}
-            value={this._toValue(location)}
-            onChange={this._onChange}
-            geolocate
-            // optionRenderer={location === null ? (option) => <span><Icon type={option.icon} /> {option.label}</span> : undefined}
+        <FormGroup className='location-field'>
+
+          <InputGroup>
+            {/* location field icon -- also serves as dropdown anchor */}
+            <DropdownButton
+              componentClass={InputGroup.Button}
+              open={this.state.dropdownOpen}
+              onToggle={(v, e) => {
+                // if clicked on input form control, keep dropdown open; otherwise, toggle
+                const targetIsInput = e.target.className.indexOf(formControlClassname) !== -1
+                this.setState({ dropdownOpen: targetIsInput ? true : !this.state.dropdownOpen })
+              }}
+              id='location-dropdown'
+              title={<i className='fa fa-star' />}
+              noCaret
+            >
+              {/* current location option */}
+              {createOption('location-arrow', 'Use Current Location')}
+
+              {/* geocode search result option(s) */}
+              {geocodedFeatures.length > 0 && <MenuItem header>Search Results</MenuItem>}
+              {geocodedFeatures.length > 0 &&
+                geocodedFeatures.map(feature => {
+                  return createOption('map-pin', feature.properties.label, () => {
+                    const location = lonlat.fromCoordinates(feature.geometry.coordinates)
+                    location.name = feature.properties.label
+                    this.props.setLocation(this.props.type, location)
+                  })
+                })
+              }
+
+              {/* nearby transit stop options */}
+              {nearbyStops.length > 0 && <MenuItem header>Nearby Stops</MenuItem>}
+              {nearbyStops.length > 0 &&
+                nearbyStops.map(stop => {
+                  return createTransitStopOption(stop.name, stop.routes, () => {
+                    // set location from stop
+                  })
+                })
+              }
+              {/* recent search history options */}
+
+            </DropdownButton>
+            <FormControl ref='formControl'
+              className={formControlClassname}
+              type='text'
+              value={this.state.value}
+              placeholder={this.props.label || this.props.type}
+              onChange={(e) => {
+                this.setState({ value: e.target.value })
+                this._geocode(e.target.value)
+              }}
+              onClick={() => {
+                this.setState({ dropdownOpen: true })
+              }}
             />
+            <InputGroup.Addon onClick={() => {
+              this.props.clearLocation(this.props.type)
+              this.setState({
+                value: '',
+                geocodedFeatures: []
+              })
+            }}>
+              <i className='fa fa-times' />
+            </InputGroup.Addon>
+          </InputGroup>
         </FormGroup>
       </form>
     )
   }
 }
 
+// helper functions for dropdown options
+
+function createOption (icon, title, onSelect) {
+  return <MenuItem onSelect={onSelect}>
+    <div>
+      <div style={{ float: 'left' }}><i className={`fa fa-${icon}`} /></div>
+      <div style={{ marginLeft: '30px' }}>{title}</div>
+    </div>
+  </MenuItem>
+}
+
+function createTransitStopOption (name, routes, onSelect) {
+  return <MenuItem onSelect={onSelect}>
+    <div>
+      <div style={{ float: 'left', paddingTop: '3px' }}>
+        <i className='fa fa-bus' style={{ fontSize: '20px' }} />
+        <div style={{ fontSize: '8px' }}>0.2 mi</div>
+      </div>
+      <div style={{ marginLeft: '30px' }}>
+        <div>{name}</div>
+        <div style={{ fontSize: '9px' }}>
+          {routes.map(route => {
+            return <span style={{ backgroundColor: 'gray', color: 'white', lineHeight: '9px', padding: '0px 3px', marginRight: '5px' }}>{route}</span>
+          })}
+        </div>
+      </div>
+    </div>
+  </MenuItem>
+}
+
+// connect to redux store
+
 const mapStateToProps = (state, ownProps) => {
   return {
     config: state.otp.config,

package.json

@@ -35,6 +35,7 @@
     "font-awesome": "^4.7.0",
     "immutability-helper": "^2.1.1",
     "isomorphic-fetch": "^2.2.1",
+    "isomorphic-mapzen-search": "^1.2.0",
     "leaflet": "^1.0.3",
     "lodash.debounce": "^4.0.8",
     "moment": "^2.17.1",