feat(overlay): Implement first pass at stops overlay

Author: David Emory

lib/actions/api.js

@@ -158,6 +158,8 @@ export function bikeRentalQuery () {
   }
 }
 
+// Nearby Stops Query
+
 export const receivedNearbyStopsResponse = createAction('NEARBY_STOPS_RESPONSE')
 export const receivedNearbyStopsError = createAction('NEARBY_STOPS_ERROR')
 
@@ -192,6 +194,8 @@ export function findNearbyStops (params) {
   }
 }
 
+// Routes at Stop query
+
 export const receivedRoutesAtStopResponse = createAction('ROUTES_AT_STOP_RESPONSE')
 export const receivedRoutesAtStopError = createAction('ROUTES_AT_STOP_ERROR')
 
@@ -216,3 +220,33 @@ export function findRoutesAtStop (stopId) {
     dispatch(receivedRoutesAtStopResponse({ stopId, routes }))
   }
 }
+
+// Stops within Bounding Box Query
+
+export const receivedStopsWithinBBoxResponse = createAction('STOPS_WITHIN_BBOX_RESPONSE')
+export const receivedStopsWithinBBoxError = createAction('STOPS_WITHIN_BBOX_ERROR')
+
+export function findStopsWithinBBox (params) {
+  return async function (dispatch, getState) {
+    const otpState = getState().otp
+    const api = otpState.config.api
+    const paramStr = Object.keys(params).map(k => `${k}=${encodeURIComponent(params[k])}`).join('&')
+    const url = `${api.host}:${api.port ? ':' + api.port : ''}${api.path}/index/stops?${paramStr}`
+    let stops
+    try {
+      const response = await fetch(url)
+      if (response.status >= 400) {
+        const error = new Error('Received error from server')
+        error.response = response
+        throw error
+      }
+      stops = await response.json()
+    } catch (err) {
+      return dispatch(receivedStopsWithinBBoxError(err))
+    }
+
+    dispatch(receivedStopsWithinBBoxResponse({ stops }))
+  }
+}
+
+export const clearStops = createAction('CLEAR_STOPS_OVERLAY')

lib/components/map/stops-overlay.js

@@ -0,0 +1,106 @@
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { MapLayer, Marker, Popup } from 'react-leaflet'
+import { divIcon } from 'leaflet'
+
+import { hasTransit } from '../../util/itinerary'
+import { findStopsWithinBBox, clearStops } from '../../actions/api'
+
+class StopsOverlay extends MapLayer {
+  static propTypes = {
+    minZoom: PropTypes.number,
+    queryMode: PropTypes.string,
+    stops: PropTypes.array,
+    refreshStops: PropTypes.func
+  }
+
+  static defaultProps = {
+    minZoom: 15
+  }
+
+  componentDidMount () {
+    // set up pan/zoom listeners
+    this.context.map.on('zoomend', () => { this._refreshStops() })
+    this.context.map.on('dragend', () => { this._refreshStops() })
+  }
+
+  _refreshStops () {
+    if (this.context.map.getZoom() < this.props.minZoom) {
+      this.props.clearStops()
+      return
+    }
+
+    const bounds = this.context.map.getBounds()
+    const params = {
+      minLat: bounds.getSouth(),
+      maxLat: bounds.getNorth(),
+      minLon: bounds.getWest(),
+      maxLon: bounds.getEast()
+    }
+    this.props.refreshStops(params)
+  }
+
+  createLeafletElement () {
+  }
+
+  updateLeafletElement () {
+  }
+
+  render () {
+    const { minZoom, queryMode, stops } = this.props
+
+    // don't render if below zoom threshold or transit not currently selected
+    if (this.context.map.getZoom() < minZoom || !hasTransit(queryMode)) return null
+
+    return (
+      <div>
+        {stops.map((stop) => {
+          const icon = divIcon({
+            iconSize: [20, 20],
+            iconAnchor: [12, 15],
+            popupAnchor: [1, -6],
+            html: `<span class="fa-stack" style="opacity: 1.0" style={{ background: #00f }}>
+                    <i class="fa fa-circle fa-stack-1x" style="color: #ffffff"></i>
+                    <i class="fa fa-circle-o fa-stack-1x" style="color: #000000"></i>
+                  </span>`,
+            className: ''
+          })
+
+          const idArr = stop.id.split(':')
+
+          return (
+            <Marker
+              icon={icon}
+              key={stop.id}
+              position={[stop.lat, stop.lon]}
+            >
+              <Popup>
+                <div>
+                  <div style={{ fontWeight: 'bold', fontSize: 18 }}>{stop.name}</div>
+                  <div><b>Agency:</b> {idArr[0]}</div>
+                  <div><b>Stop ID:</b> {idArr[1]}</div>
+                </div>
+              </Popup>
+            </Marker>
+          )
+        })}
+      </div>
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    stops: state.otp.overlay.transit.stops,
+    queryMode: state.otp.currentQuery.mode
+  }
+}
+
+const mapDispatchToProps = {
+  refreshStops: findStopsWithinBBox,
+  clearStops: clearStops
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(StopsOverlay)

lib/index.js

@@ -17,6 +17,7 @@ import BikeRentalOverlay from './components/map/bike-rental-overlay'
 import EndpointsOverlay from './components/map/endpoints-overlay'
 import ItineraryOverlay from './components/map/itinerary-overlay'
 import OsmBaseLayer from './components/map/osm-base-layer'
+import StopsOverlay from './components/map/stops-overlay'
 
 import ItineraryCarousel from './components/narrative/itinerary-carousel'
 import NarrativeItineraries from './components/narrative/narrative-itineraries'
@@ -65,6 +66,7 @@ export {
   ItineraryCarousel,
   ItineraryOverlay,
   OsmBaseLayer,
+  StopsOverlay,
 
   // narrative components
   NarrativeItineraries,

lib/reducers/create-otp-reducer.js

@@ -38,6 +38,9 @@ function createOtpReducer (config, initialQuery) {
     overlay: {
       bikeRental: {
         stations: []
+      },
+      transit: {
+        stops: []
       }
     }
   }
@@ -174,6 +177,24 @@ function createOtpReducer (config, initialQuery) {
           location: { nearbyStops: { $set: action.payload.stops.map(s => s.id) } },
           transitIndex: { stops: { $merge: stopLookup } }
         })
+      case 'STOPS_WITHIN_BBOX_RESPONSE':
+        return update(state, {
+          overlay: {
+            transit: {
+              stops: {$set: action.payload.stops},
+              pending: {$set: false}
+            }
+          }
+        })
+      case 'CLEAR_STOPS_OVERLAY':
+        return update(state, {
+          overlay: {
+            transit: {
+              stops: {$set: []},
+              pending: {$set: false}
+            }
+          }
+        })
       case 'ROUTES_AT_STOP_RESPONSE':
         return update(state, { transitIndex: { stops: { [action.payload.stopId]: { routes: { $set: action.payload.routes } } } } })
 

lib/util/itinerary.js

@@ -11,6 +11,18 @@ export function isTransit (mode) {
   return transitModes.indexOf(mode) !== -1
 }
 
+/**
+ * @param  {string}  modesStr a comma-separated list of OTP modes
+ * @return {boolean} whether any of the modes are transit modes
+ */
+export function hasTransit (modesStr) {
+  let result = false
+  modesStr.split(',').forEach(mode => {
+    if (isTransit(mode)) result = true
+  })
+  return result
+}
+
 export function isWalk (mode) {
   mode = mode || this.get('mode')
   return mode === 'WALK'