diff --git a/web/client/epics/wfsquery.js b/web/client/epics/wfsquery.js
index b143e992d9..45e9b8d703 100644
--- a/web/client/epics/wfsquery.js
+++ b/web/client/epics/wfsquery.js
@@ -238,12 +238,12 @@ const viewportSelectedEpic = (action$, store) =>
     action$.ofType(SELECT_VIEWPORT_SPATIAL_METHOD, CHANGE_MAP_VIEW)
         .switchMap((action) => {
             // calculate new geometry from map properties only for viewport
-            const map = action.type === CHANGE_MAP_VIEW ? action : store.getState().map.present;
+            const map = action.type === CHANGE_MAP_VIEW ? action : store.getState().map.present || store.getState().map;
             if (action.type === SELECT_VIEWPORT_SPATIAL_METHOD ||
                 action.type === CHANGE_MAP_VIEW &&
                 store.getState().queryform &&
                 store.getState().queryform.spatialField &&
-                store.getState().queryform.spatialField.method === "viewport") {
+                store.getState().queryform.spatialField.method === "Viewport") {
                 const bounds = Object.keys(map.bbox.bounds).reduce((p, c) => {
                     return assign({}, p, {[c]: parseFloat(map.bbox.bounds[c])});
                 }, {});
diff --git a/web/client/examples/queryform/components/SmartQueryForm.jsx b/web/client/examples/queryform/components/SmartQueryForm.jsx
index 5d8cd58dfd..f0220f6148 100644
--- a/web/client/examples/queryform/components/SmartQueryForm.jsx
+++ b/web/client/examples/queryform/components/SmartQueryForm.jsx
@@ -26,6 +26,7 @@ const {
     removeGroupField,
     changeCascadingValue,
     expandAttributeFilterPanel,
+    selectViewportSpatialMethod,
     expandSpatialFilterPanel,
     selectSpatialMethod,
     selectSpatialOperation,
@@ -94,6 +95,7 @@ const SmartQueryForm = connect((state) => {
             onSelectSpatialMethod: selectSpatialMethod,
             onSelectSpatialOperation: selectSpatialOperation,
             onChangeDrawingStatus: changeDrawingStatus,
+            onSelectViewportSpatialMethod: selectViewportSpatialMethod,
             onRemoveSpatialSelection: removeSpatialSelection,
             onShowSpatialSelectionDetails: showSpatialSelectionDetails,
             onEndDrawing: endDrawing,
diff --git a/web/client/examples/queryform/stores/queryformstore.js b/web/client/examples/queryform/stores/queryformstore.js
index 683fa7eaf1..fe92779480 100644
--- a/web/client/examples/queryform/stores/queryformstore.js
+++ b/web/client/examples/queryform/stores/queryformstore.js
@@ -9,6 +9,8 @@
 var DebugUtils = require('../../../utils/DebugUtils');
 
 const {combineReducers} = require('redux');
+const {createEpicMiddleware, combineEpics} = require('redux-observable');
+const {viewportSelectedEpic} = require('../../../epics/wfsquery');
 
 // STATE_FIPS	SUB_REGION	STATE_ABBR	LAND_KM	WATER_KM	PERSONS	FAMILIES	HOUSHOLD	MALE	FEMALE	WORKERS	DRVALONE	CARPOOL	PUBTRANS	EMPLOYED	UNEMPLOY	SERVICE	MANUAL	P_MALE	P_FEMALE	SAMP_POP
 
@@ -69,5 +71,8 @@ const reducers = combineReducers({
     query: require('../reducers/query')
 });
 
+const rootEpic = combineEpics(viewportSelectedEpic);
+const epicMiddleware = createEpicMiddleware(rootEpic);
+
 // export the store with the given reducers
-module.exports = DebugUtils.createDebugStore(reducers, {queryform: initialState});
+module.exports = DebugUtils.createDebugStore(reducers, {queryform: initialState}, [epicMiddleware]);