feat(map): use right click (long press on mobile) to set location

fixes #21

Author: landonreed

lib/components/map/base-map.js

@@ -3,7 +3,7 @@ import polyline from '@mapbox/polyline'
 import objectPath from 'object-path'
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { Map } from 'react-leaflet'
+import { Map, Popup } from 'react-leaflet'
 
 import { setLocation } from '../../actions/map'
 import { constructLocation } from '../../util/map'
@@ -15,11 +15,21 @@ class BaseMap extends Component {
     mapClick: PropTypes.func,
     setLocation: PropTypes.func // TODO: rename from action name to avoid namespace conflict?
   }
-  _onClick = (e) => {
-    const location = constructLocation(e.latlng)
-    const reverseGeocode = true
-    if (!this.props.isFromSet) this.props.setLocation({type: 'from', location, reverseGeocode})
-    else if (!this.props.isToSet) this.props.setLocation({type: 'to', location, reverseGeocode})
+  state = {}
+  _onClickTo = () => {
+    const {setLocation} = this.props
+    const location = constructLocation(this.state.popupPosition)
+    setLocation({type: 'to', location, reverseGeocode: true})
+  }
+
+  _onClickFrom = () => {
+    const {setLocation} = this.props
+    const location = constructLocation(this.state.popupPosition)
+    setLocation({type: 'from', location, reverseGeocode: true})
+  }
+
+  _onRightClick = (e) => {
+    this.setState({popupPosition: e.latlng})
   }
   // TODO: make map controlled component
   _mapBoundsChanged = (e) => {
@@ -72,18 +82,21 @@ class BaseMap extends Component {
       children
     } = this.props
     const position = [config.map.initLat, config.map.initLon]
+    const {popupPosition} = this.state
     // const position = [+mapState.lat, +mapState.lon]
     // const zoom = +mapState.zoom
     const zoom = config.map.initZoom || 13
     const bounds = null // mapState.bounds
+    // TODO: currently mapProps is unused, but may later be used for controlling
+    // map location state
     const mapProps = {
       ref: 'map',
       className: 'map',
       // center: position,
       // bounds: mapState.bounds || null,
       // zoom: config.initZoom,
       // zoom: +mapState.zoom,
-      onClick: this._onClick
+      onContextMenu: this._onRightClick
       // onMoveEnd: this._mapBoundsChanged,
       // onZoomEnd: this._mapBoundsChanged,
     }
@@ -101,9 +114,30 @@ class BaseMap extends Component {
         className='map'
         center={position}
         zoom={config.map.initZoom || 13}
-        onClick={this._onClick}
+        onContextMenu={this._onRightClick}
       >
         {children}
+        {popupPosition
+          ? <Popup ref='clickPopup'
+            key={popupPosition.toString()} // hack to ensure the popup opens only on right click
+            position={popupPosition} // FIXME: onOpen and onClose don't seem to work?
+            // onOpen={() => this.setState({popupPosition: null})}
+            // onClose={() => this.setState({popupPosition: null})}
+          >
+            <span>
+              Plan a trip:{' '}
+              <a role='button'
+                onClick={this._onClickFrom}>
+                From here
+              </a>{' '}|{' '}
+              <a role='button'
+                onClick={this._onClickTo}>
+                To here
+              </a>
+            </span>
+          </Popup>
+          : null
+        }
       </Map>
     )
   }