StopForm with mapcenter feature

src/actions/index.js

@@ -91,6 +91,14 @@ export const polygonReset = () => {
   }
 }
 
+export const lastCenterUpdate = (lat, lon) => {
+  // this only update current map center from map movement alone
+  return {
+    type: types.GEO_LASTCENTER_UPDATE,
+    payload: [lat, lon],
+  }
+}
+
 export const mapCenterUpdate = (lat, lon) => {
   return {
     type: types.GEO_MAPCENTER_UPDATE,

src/components/StopForm.js

@@ -133,9 +133,14 @@ class StopForm extends Component {
     store.dispatch(draggableMarkerEnable(coords.latitude, coords.longitude))
   }
 
+  setToMapCenter() {
+    const { lastCenter } = this.props
+    store.dispatch(draggableMarkerEnable(lastCenter[0], lastCenter[1]))
+  }
+
   renderForm() {
     const one = this.state
-    const { coords } = this.props
+    const { coords, lastCenter } = this.props
     const { results, fetching } = this.props.stop
     const { latlon } = one
     return (
@@ -156,8 +161,11 @@ class StopForm extends Component {
             value={one.name || ''}
             handleChange={this.handleChange} />
 
-          <p><b>Lat, Lon</b>
+          <p><b>Lat, Lon</b>&nbsp;
-            {coords && <a onClick={this.setToCurrentLocation.bind(this)}> -> current location</a>}
+            {coords && <a onClick={this.setToCurrentLocation.bind(this)}>[current location]</a>}
+            &nbsp;
+            {lastCenter.length > 0 && <a onClick={this.setToMapCenter.bind(this)}>[center]</a>}
+            &nbsp;
             <br />
             {latlon[0] && latlon[0].toFixed(4)}, {latlon[1] && latlon[1].toFixed(4)}
           </p>
@@ -264,6 +272,7 @@ const mapStateToProps = state => ({
   stop: state.stop,
   draggableMarkerLatlon: state.geo.draggableMarkerLatlon,
   coords: state.geo.coords,
+  lastCenter: state.geo.lastCenter,
 })
 
 const connectStopForm = connect(

src/constants/ActionTypes.js

@@ -13,7 +13,7 @@ export const GEO_MAPCENTER_UPDATE = 'GEO_MAPCENTER_UPDATE'
 export const GEO_DRAGMARKER_ENABLE = 'GEO_DRAGMARKER_ENABLE'
 export const GEO_DRAGMARKER_DISABLE = 'GEO_DRAGMARKER_DISABLE'
 export const GEO_DRAGMARKER_CHANGE = 'GEO_DRAGMARKER_CHANGE'
-
+export const GEO_LASTCENTER_UPDATE = 'GEO_LASTCENTER_UPDATE'
 
 export const REQUEST_LOGIN = 'REQUEST_LOGIN'
 export const SUCCESS_LOGIN = 'SUCCESS_LOGIN'

src/constants/Api.js

@@ -1,4 +1,5 @@
 
+// export const URL = process.env.API_URL || '//localhost:8000'
 export const URL = process.env.API_URL || 'https://api.goth.app'
 export const API_PREFIX = process.env.API_PREFIX || '/v1'
 export const API_URL = `${URL}${API_PREFIX}`

src/container/Geo.js

@@ -11,7 +11,7 @@ import L from 'leaflet'
 import { loggedIn } from '../reducers/auth'
 import {
   geoLocationFailed, geoLocationUpdate, getAgency,
-  draggableMarkerUpdate
+  draggableMarkerUpdate, lastCenterUpdate
 } from '../actions'
 import FloatPane from '../components/FloatPane'
 import store from '../store'
@@ -224,6 +224,10 @@ class Geo extends Component {
           zoomControl={false}
           animate
           style={{flex: 1}}
+          onMoveend={(e) => {
+            const lc = e.target.getCenter()
+            store.dispatch(lastCenterUpdate(lc.lat, lc.lng))
+          }}
           ref='map'>
           <TileLayer
             attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

src/reducers/geo.js

@@ -2,7 +2,7 @@ import {
   GEO_LOCATION_SUCCESS, GEO_LOCATION_FAILURE,
   GEO_MARKER_ADD, GEO_MARKER_RESET, GEO_MARKER_UPDATE,
   GEO_POLYGON_ADD, GEO_POLYGON_RESET, GEO_POLYGON_UPDATE,
-  GEO_MAPCENTER_UPDATE,
+  GEO_MAPCENTER_UPDATE, GEO_LASTCENTER_UPDATE,
   GEO_DRAGMARKER_CHANGE, GEO_DRAGMARKER_DISABLE, GEO_DRAGMARKER_ENABLE,
 } from '../constants/ActionTypes'
 
@@ -12,6 +12,7 @@ const initialState = {
   message: '',
   polygons: [],
   markers: [],
+  lastCenter: [13.84626739, 100.538],
   mapCenter: [13.84626739, 100.538],
   draggableMarker: false,
   draggableMarkerLatlon: [13.8462745, 100.5382592],
@@ -35,6 +36,11 @@ const geo = (state = initialState, action) => {
         ...state,
         draggableMarkerLatlon: action.payload,
       }
+    case GEO_LASTCENTER_UPDATE:
+      return {
+        ...state,
+        lastCenter: action.payload,
+      }
     case GEO_MAPCENTER_UPDATE:
       return {
         ...state,