diff --git a/web/client/components/background/BackgroundSelector.jsx b/web/client/components/background/BackgroundSelector.jsx
index 5e0e35e9f1..65dc36a091 100644
--- a/web/client/components/background/BackgroundSelector.jsx
+++ b/web/client/components/background/BackgroundSelector.jsx
@@ -58,12 +58,6 @@ const BackgroundSelector = React.createClass({
         this.props.onLayerChange('tempLayer', {});
         this.props.onStartChange(0);
     },
-    componentWillUpdate(nextProps) {
-        if (this.props.size.width !== nextProps.size.width
-        || this.props.size.height !== nextProps.size.height) {
-            this.props.onStartChange(0);
-        }
-    },
     getThumb(layer) {
         return this.props.thumbs[layer.source] && this.props.thumbs[layer.source][layer.name] || layer.thumbURL || this.props.thumbs.unknown;
     },
diff --git a/web/client/components/background/PreviewList.jsx b/web/client/components/background/PreviewList.jsx
index ba83444510..1a15c99dae 100644
--- a/web/client/components/background/PreviewList.jsx
+++ b/web/client/components/background/PreviewList.jsx
@@ -36,12 +36,12 @@ const PreviewList = React.createClass({
     },
     render() {
         let iconButtons = [].concat(this.props.icons);
-        iconButtons = iconButtons.slice(this.props.start, this.props.start + this.props.length);
+        iconButtons = this.props.pagination ? iconButtons.slice(this.props.start, this.props.start + this.props.length) : iconButtons;
         if (this.props.pagination) {
             if (this.props.start !== 0) {
                 iconButtons.unshift(<PaginationButton key="pagination_0" vertical={this.props.vertical} side={this.props.vertical ? this.props.width : this.props.height} direction={false} onClick={ () => { this.props.onStartChange(this.props.start - 1); }} />);
             }
-            if (this.props.start + this.props.length !== this.props.icons.length) {
+            if (this.props.start + this.props.length < this.props.icons.length) {
                 iconButtons.push(<PaginationButton key="pagination_1" vertical={this.props.vertical} side={this.props.vertical ? this.props.width : this.props.height} direction={true} onClick={ () => { this.props.onStartChange(this.props.start + 1); } } />);
             }
         }
diff --git a/web/client/components/background/__tests__/BackgroundSelector-test.jsx b/web/client/components/background/__tests__/BackgroundSelector-test.jsx
index fd4ad6b79c..8ef0ac0e97 100644
--- a/web/client/components/background/__tests__/BackgroundSelector-test.jsx
+++ b/web/client/components/background/__tests__/BackgroundSelector-test.jsx
@@ -69,11 +69,6 @@ describe("test the BackgroundSelector", () => {
         const node = ReactDOM.findDOMNode(backgroundSelector);
         expect(node).toExist();
 
-        backgroundSelector.componentWillUpdate({size: {width: 1000, height: 400}, drawerEnabled: false});
-        backgroundSelector.componentWillUpdate({size: {width: 900, height: 500}, drawerEnabled: false});
-        backgroundSelector.componentWillUpdate({size: {width: 1000, height: 500}, drawerEnabled: true});
-        backgroundSelector.componentWillUpdate({size: {width: 1000, height: 500}, drawerEnabled: false});
-
         const icons = backgroundSelector.getIcons(5, 5, 5, false);
         expect(icons.length).toBeGreaterThan(0);
 
diff --git a/web/client/components/mapcontrols/search/searchbar.css b/web/client/components/mapcontrols/search/searchbar.css
index 1cb9b7c488..de578a03bf 100644
--- a/web/client/components/mapcontrols/search/searchbar.css
+++ b/web/client/components/mapcontrols/search/searchbar.css
@@ -1,5 +1,5 @@
 .MapSearchBar {
-    left: 45px;
+    left: 65px;
     position: absolute;
     right: 55px;
     top: 10px;
diff --git a/web/client/components/print/Font.jsx b/web/client/components/print/Font.jsx
index c3ea0435f1..944c75c84f 100644
--- a/web/client/components/print/Font.jsx
+++ b/web/client/components/print/Font.jsx
@@ -38,8 +38,8 @@ const Font = React.createClass({
     onChangeFamily(family) {
         this.props.onChangeFamily(family);
     },
-    onChangeSize(size) {
-        this.props.onChangeSize(size);
+    onChangeSize(e) {
+        this.props.onChangeSize(parseFloat(e.target.value));
     },
     render() {
         return (
diff --git a/web/client/epics/wfsquery.js b/web/client/epics/wfsquery.js
index 5719600db1..546ce78844 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/plugins/assets/css/plugins.css b/web/client/examples/plugins/assets/css/plugins.css
index 62d597d99d..0d75f7af37 100644
--- a/web/client/examples/plugins/assets/css/plugins.css
+++ b/web/client/examples/plugins/assets/css/plugins.css
@@ -92,3 +92,9 @@ html, body, #container, #map {
 #plugins-list {
   overflow-x: hidden;
 }
+
+#plugins-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
diff --git a/web/client/examples/plugins/plugins.js b/web/client/examples/plugins/plugins.js
index 6bc8c20d50..69a6143173 100644
--- a/web/client/examples/plugins/plugins.js
+++ b/web/client/examples/plugins/plugins.js
@@ -25,17 +25,17 @@ module.exports = {
         TOCPlugin: require('../../plugins/TOC'),
         FeatureGridPlugin: require('../../plugins/FeatureGrid'),
         RasterStylerPlugin: require('../../plugins/RasterStyler'),
+        VectorStylerPlugin: require('../../plugins/VectorStyler'),
         BackgroundSwitcherPlugin: require('../../plugins/BackgroundSwitcher'),
+        BackgroundSelectorPlugin: require('../../plugins/BackgroundSelector'),
         MeasurePlugin: require('../../plugins/Measure'),
-        MeasureResultsPlugin: require('../../plugins/MeasureResults'),
         PrintPlugin: require('../../plugins/Print'),
+        FullScreenPlugin: require('../../plugins/FullScreen'),
         SnapshotPlugin: require('../../plugins/Snapshot'),
         ShapeFilePlugin: require('../../plugins/ShapeFile'),
         MetadataExplorerPlugin: require('../../plugins/MetadataExplorer'),
         SettingsPlugin: require('../../plugins/Settings'),
-        TutorialPlugin: require('../../plugins/Tutorial'),
         ExpanderPlugin: require('../../plugins/Expander'),
-        HelpPlugin: require('../../plugins/Help'),
         SharePlugin: require('../../plugins/Share'),
         HomePlugin: require('../../plugins/Home'),
         LoginPlugin: require('../../plugins/Login')
diff --git a/web/client/examples/print/index.html b/web/client/examples/print/index.html
index faead1dc7b..c200cd6d13 100644
--- a/web/client/examples/print/index.html
+++ b/web/client/examples/print/index.html
@@ -9,7 +9,6 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
         <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.12/proj4.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
-        <script src="https://unpkg.com/pdfjs-dist@1.4.79/build/pdf.combined.js"></script>
         <style>
             html, body, #container, .fill, #map {
                 position:absolute;
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]);
diff --git a/web/client/localConfig.json b/web/client/localConfig.json
index 2cb20b927e..9d0cf6b848 100644
--- a/web/client/localConfig.json
+++ b/web/client/localConfig.json
@@ -37,6 +37,7 @@
             {
                 "name": "BackgroundSelector",
                 "cfg": {
+                    "bottom": 40,
                     "dimensions": {
                     "side": 65,
                     "sidePreview": 65,
@@ -126,7 +127,8 @@
             }, "Login",
             "OmniBar", "BurgerMenu", "Expander", "GlobeViewSwitcher"
         ],
-        "desktop": ["Map", "HelpLink", "Share", "DrawerMenu", "Version", "BackgroundSelector", {
+        "desktop": ["Map", "HelpLink", "Share", "DrawerMenu", "Version", {"name": "BackgroundSelector", "cfg": { "bottom": 40 } },
+            {
                 "name": "Identify",
                 "showIn": ["IdentifyBar", "Settings"],
                 "cfg": {
@@ -223,6 +225,7 @@
               },{
                   "name": "BackgroundSelector",
                   "cfg": {
+                      "bottom": 40,
                       "dimensions": {
                       "side": 65,
                       "sidePreview": 65,
diff --git a/web/client/plugins/BackgroundSelector.jsx b/web/client/plugins/BackgroundSelector.jsx
index bd1a640aec..354c711828 100644
--- a/web/client/plugins/BackgroundSelector.jsx
+++ b/web/client/plugins/BackgroundSelector.jsx
@@ -13,13 +13,14 @@ const {changeLayerProperties} = require('../actions/layers');
 const {createSelector} = require('reselect');
 const {layersSelector} = require('../selectors/layers');
 
-const mapSelector = (state) => (state.map && state.map.present) || {};
+const {mapSelector} = require('../selectors/map');
 const backgroundControlsSelector = (state) => (state.controls && state.controls.backgroundSelector) || {};
 const drawerEnabledControlSelector = (state) => (state.controls && state.controls.drawer && state.controls.drawer.enabled) || false;
 
 const HYBRID = require('./background/assets/img/HYBRID.jpg');
 const ROADMAP = require('./background/assets/img/ROADMAP.jpg');
 const TERRAIN = require('./background/assets/img/TERRAIN.jpg');
+const SATELLITE = require('./background/assets/img/SATELLITE.jpg');
 const Aerial = require('./background/assets/img/Aerial.jpg');
 const mapnik = require('./background/assets/img/mapnik.jpg');
 const mapquestOsm = require('./background/assets/img/mapquest-osm.jpg');
@@ -33,7 +34,8 @@ const thumbs = {
     google: {
         HYBRID,
         ROADMAP,
-        TERRAIN
+        TERRAIN,
+        SATELLITE
     },
     bing: {
         Aerial,
@@ -59,13 +61,12 @@ const thumbs = {
 
 const backgroundSelector = createSelector([mapSelector, layersSelector, backgroundControlsSelector, drawerEnabledControlSelector],
     (map, layers, controls, drawer) => ({
-        size: map.size || {width: 0, height: 0},
+        size: map && map.size || {width: 0, height: 0},
         layers: layers.filter((layer) => layer.group === "background") || [],
         tempLayer: controls.tempLayer || {},
         currentLayer: controls.currentLayer || {},
         start: controls.start || 0,
-        enabled: controls.enabled && !drawer,
-        thumbs
+        enabled: controls.enabled && !drawer
     }));
 
 /**
@@ -99,7 +100,16 @@ const BackgroundSelectorPlugin = connect(backgroundSelector, {
     onToggle: toggleControl.bind(null, 'backgroundSelector', null),
     onLayerChange: setControlProperty.bind(null, 'backgroundSelector'),
     onStartChange: setControlProperty.bind(null, 'backgroundSelector', 'start')
-})(require('../components/background/BackgroundSelector'));
+}, (stateProps, dispatchProps, ownProps) => ({
+        ...stateProps,
+        ...dispatchProps,
+        ...ownProps,
+        thumbs: {
+            ...thumbs,
+            ...ownProps.thumbs
+        }
+    })
+)(require('../components/background/BackgroundSelector'));
 
 module.exports = {
     BackgroundSelectorPlugin,
diff --git a/web/client/plugins/MetadataExplorer.jsx b/web/client/plugins/MetadataExplorer.jsx
index 82f6d9cd67..94ec15f064 100644
--- a/web/client/plugins/MetadataExplorer.jsx
+++ b/web/client/plugins/MetadataExplorer.jsx
@@ -63,8 +63,8 @@ const MetadataExplorerComponent = React.createClass({
         return {
             id: "mapstore-metadata-explorer",
             active: false,
-            wrap: false,
-            modal: true,
+            wrap: true,
+            modal: false,
             wrapWithPanel: false,
             panelStyle: {
                 zIndex: 100,
diff --git a/web/client/plugins/Settings.jsx b/web/client/plugins/Settings.jsx
index 1795707578..7aa8f2b34d 100644
--- a/web/client/plugins/Settings.jsx
+++ b/web/client/plugins/Settings.jsx
@@ -31,6 +31,7 @@ const {Glyphicon} = require('react-bootstrap');
 const assign = require('object-assign');
 
 const SettingsPanel = require('./settings/SettingsPanel');
+const LocaleUtils = require('../utils/LocaleUtils');
 const {Panel} = require('react-bootstrap');
 const Dialog = require('../components/misc/Dialog');
 
@@ -85,7 +86,7 @@ const SettingsButton = React.createClass({
     },
     renderSettings() {
         const settingsFirst = {
-            language: <span><label><Message msgId="language" /></label> <LangBar key="langSelector"/></span>
+            language: <span><label><Message msgId="language" /></label> <LangBar locales={LocaleUtils.getSupportedLocales()} key="langSelector"/></span>
         };
         const settingsLast = {
             history: <HistoryBar
diff --git a/web/client/plugins/ShapeFile.jsx b/web/client/plugins/ShapeFile.jsx
index 0b1b738e10..d2f6521a2e 100644
--- a/web/client/plugins/ShapeFile.jsx
+++ b/web/client/plugins/ShapeFile.jsx
@@ -26,7 +26,7 @@ module.exports = {
 
             const ShapeFilePlugin = connect((state) => (
             {
-                visible: state.controls && state.controls.shapefile && state.controls.shapefile.enabled,
+                visible: state.controls && state.controls.shapefile && state.controls.shapefile.enabled || state.controls && state.controls.toolbar && state.controls.toolbar.active === 'shapefile',
                 layers: state.shapefile && state.shapefile.layers || null,
                 selected: state.shapefile && state.shapefile.selected || null,
                 bbox: state.shapefile && state.shapefile.bbox || null,
@@ -58,7 +58,7 @@ module.exports = {
             help: <Message msgId="helptexts.shapefile"/>,
             title: "shapefile.title",
             tooltip: "shapefile.tooltip",
-            wrap: true,
+            wrap: false,
             icon: <Glyphicon glyph="open-file"/>,
             exclusive: true,
             priority: 1
diff --git a/web/client/plugins/background/assets/img/SATELLITE.jpg b/web/client/plugins/background/assets/img/SATELLITE.jpg
new file mode 100644
index 0000000000..ae7cac3b3b
Binary files /dev/null and b/web/client/plugins/background/assets/img/SATELLITE.jpg differ
diff --git a/web/client/plugins/burgermenu/burgermenu.css b/web/client/plugins/burgermenu/burgermenu.css
index b02c86850f..fe06fa4cb1 100644
--- a/web/client/plugins/burgermenu/burgermenu.css
+++ b/web/client/plugins/burgermenu/burgermenu.css
@@ -1,6 +1,7 @@
 #mapstore-burger-menu {
     position: absolute;
-    left: 200px;
+    right: 0;
+    top: 0;
 }
 
 #mapstore-navbar #mapstore-burger-menu {
diff --git a/web/client/plugins/shapefile/ShapeFile.jsx b/web/client/plugins/shapefile/ShapeFile.jsx
index a391ace403..0b4d5e9017 100644
--- a/web/client/plugins/shapefile/ShapeFile.jsx
+++ b/web/client/plugins/shapefile/ShapeFile.jsx
@@ -46,14 +46,7 @@ const ShapeFile = React.createClass({
             id: "mapstore-shapefile-upload",
             wrap: true,
             wrapWithPanel: false,
-            panelStyle: {
-                minWidth: "360px",
-                zIndex: 100,
-                position: "absolute",
-                overflow: "visible",
-                top: "100px",
-                left: "calc(50% - 150px)"
-            },
+            panelStyle: {},
             panelClassName: "toolbar-panel",
             visible: false,
             toggleControl: () => {},
diff --git a/web/client/product/assets/css/viewer.css b/web/client/product/assets/css/viewer.css
index 74eee69172..6043a7e2c1 100644
--- a/web/client/product/assets/css/viewer.css
+++ b/web/client/product/assets/css/viewer.css
@@ -55,40 +55,6 @@ html, body, #container, .fill {
 	background-size:contain;
 }
 
-.leafletbottom.leafletright, .leaflet-control-minimap{
-    bottom: 47px !important;
-    right: 49px !important;
-}
-
-.leaflet-control-scale {
-    position: absolute;
-    bottom: -1px;
-    right: 47px;
-    z-index: 1000;
-}
-.leaflet-control-attribution {
-    width: 165px;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-}
-
-.leaflet-bottom.leaflet-right {
-    margin-bottom: 0 !important;
-}
-
-.ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
-    bottom: 55px !important;
-    left: auto !important;
-    right: 57px !important;
-    top: auto !important;
-}
-
-.ol-scale-line.ol-unselectable {
-    right: 58px;
-    left: auto;
-    bottom: 3px;
-}
 .modal-dialog-container {
     z-index: 2000!important;
 }
diff --git a/web/client/themes/default/ms2-theme.less b/web/client/themes/default/ms2-theme.less
index 23dbeb9b1e..6e6183655a 100644
--- a/web/client/themes/default/ms2-theme.less
+++ b/web/client/themes/default/ms2-theme.less
@@ -1087,3 +1087,53 @@ select.form-control option {
 .application-version-label {
 		font-weight: bold;
 }
+
+.leafletbottom.leafletright, .leaflet-control-minimap{
+    bottom: 47px !important;
+    right: 49px !important;
+}
+
+.leaflet-control-scale {
+    position: absolute;
+    bottom: -1px;
+    right: 47px;
+    z-index: 1000;
+}
+.leaflet-control-attribution {
+    width: 165px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+
+.leaflet-bottom.leaflet-right {
+    margin-bottom: 0 !important;
+}
+
+.ol-custom-overviewmap, .ol-custom-overviewmap.ol-uncollapsible {
+    bottom: 55px !important;
+    left: auto !important;
+    right: 57px !important;
+    top: auto !important;
+}
+
+.ol-scale-line.ol-unselectable {
+    right: 58px;
+    left: auto;
+    bottom: 3px;
+}
+
+.toolbar-panel #background-switcher {
+    max-height: 600px;
+    overflow: auto;
+}
+
+#mapstore-shapefile-upload {
+    min-width: 360px;
+    z-index: 100;
+    position: absolute;
+    overflow: visible;
+    top: 100px;
+    width: 50%;
+    left: ~"calc(50% - 150px)";
+}
diff --git a/web/client/utils/LocaleUtils.js b/web/client/utils/LocaleUtils.js
index 52bfc0b864..46a6f8ba9f 100644
--- a/web/client/utils/LocaleUtils.js
+++ b/web/client/utils/LocaleUtils.js
@@ -70,10 +70,12 @@ const LocaleUtils = {
         return LocaleUtils.getLocale(url.parse(window.location.href, true).query);
     },
     getLocale: function(query) {
+        const key = Object.keys(supportedLocales)[0];
+        const defaultLocale = supportedLocales.en ? { key: 'en', locale: supportedLocales.en } : { key, locale: supportedLocales[key] };
         let locale = supportedLocales[
-            LocaleUtils.normalizeLocaleCode(query.locale || (navigator ? navigator.language || navigator.browserLanguage : "en"))
+            LocaleUtils.normalizeLocaleCode(query.locale || (navigator ? navigator.language || navigator.browserLanguage : defaultLocale.key))
         ];
-        return locale ? locale.code : "en-US";
+        return locale ? locale.code : defaultLocale.locale.code;
     },
     getSupportedLocales: function() {
         return supportedLocales;
diff --git a/web/client/utils/PrintUtils.js b/web/client/utils/PrintUtils.js
index 64e213841c..27be99e2c9 100644
--- a/web/client/utils/PrintUtils.js
+++ b/web/client/utils/PrintUtils.js
@@ -205,8 +205,7 @@ const PrintUtils = {
                                  height: spec.iconSize,
                                  width: spec.iconSize,
                                  minSymbolSize: spec.iconSize,
-                                 fontFamily: spec.fontFamily,
-                                 LEGEND_OPTIONS: "forceLabels:" + (spec.forceLabels ? "on" : "") + ";fontAntialiasing:" + spec.antiAliasing + ";dpi:" + spec.legendDpi + ";fontStyle:" + (spec.bold && "bold" || (spec.italic && "italic") || ''),
+                                 LEGEND_OPTIONS: "forceLabels:" + (spec.forceLabels ? "on" : "") + ";fontAntialiasing:" + spec.antiAliasing + ";dpi:" + spec.legendDpi + ";fontStyle:" + (spec.bold && "bold" || (spec.italic && "italic") || '') + ";fontName:" + spec.fontFamily + ";fontSize:" + spec.fontSize,
                                  format: "image/png",
                                  ...assign({}, layer.params)
                              }
diff --git a/web/client/utils/TemplateUtils.js b/web/client/utils/TemplateUtils.js
index b94a742aa7..54ff2bbed7 100644
--- a/web/client/utils/TemplateUtils.js
+++ b/web/client/utils/TemplateUtils.js
@@ -6,6 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+const {isString} = require('lodash');
+
 module.exports = {
     /**
      * generates a template string to use for static replacements.
@@ -20,15 +22,17 @@ module.exports = {
             var fn = cache[template];
 
             if (!fn) {
-            // Replace ${expressions} (etc) with ${map.expressions}.
-                let sanitized = template
-                .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function(_, match) {
-                    return `\$\{map.${match.trim()}\}`;
-                })
-                // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
-                .replace(/(\$\{(?!map\.)[^}]+\})/g, '');
-
-                fn = Function('map', `return \`${sanitized}\``);
+                fn = (map) => {
+
+                    let sanitized = template
+                    .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, (_, match) => {
+                        return match.trim().split(".").reduce((a, b) => {
+                            return a && a[b];
+                        }, map);
+                    });
+
+                    return isString(sanitized) && sanitized || '';
+                };
                 cache[template] = fn;
 
             }