diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
index 4f65679..0f54273 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
@@ -17,7 +17,7 @@
 (function () {
 
     // Injected Services
-    var ks, flash, wss, t2ps, t2ms, ps, t2is, t2sp, t2vs, t2rs, t2fs;
+    var ks, flash, wss, t2ps, t2ms, ps, t2is, t2sp, t2vs, t2rs, t2fs, t2sls;
 
     // Commmands
     var actionMap = {
@@ -31,6 +31,7 @@
         E: [equalizeMasters, 'Equalize mastership roles'],
         X: [resetAllNodeLocations, 'Reset Node Location'],
         U: [unpinNode, 'Unpin node (mouse over)'],
+        S: [toggleSpriteLayer, 'Toggle sprite layer'],
 
         esc: handleEscape
     };
@@ -119,6 +120,10 @@
         flash.flash('Pan and zoom reset');
     }
 
+    function toggleSpriteLayer() {
+        t2sls.toggle();
+    }
+
     function togglePorts(x) {
         updatePrefsState('porthl', t2vs.togglePortHighlights(x));
         t2fs.updateLinks();
@@ -144,8 +149,9 @@
         'KeyService', 'FlashService', 'WebSocketService', 'Topo2PrefsService',
         'Topo2MapService', 'PrefsService', 'Topo2InstanceService',
         'Topo2SummaryPanelService', 'Topo2ViewService', 'Topo2RegionService',
+        'Topo2SpriteLayerService',
         function (_ks_, _flash_, _wss_, _t2ps_, _t2ms_, _ps_, _t2is_, _t2sp_,
-                  _t2vs_, _t2rs_) {
+                  _t2vs_, _t2rs_, _t2sls_) {
 
             ks = _ks_;
             flash = _flash_;
@@ -157,6 +163,7 @@
             t2sp = _t2sp_;
             t2vs = _t2vs_;
             t2rs = _t2rs_;
+            t2sls = _t2sls_;
 
             return {
                 init: init,
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Map.js b/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
index ff595e7..aa9766e 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
@@ -29,12 +29,12 @@
     var MapSelectionDialog;
 
     // internal state
-    var mapG, zoomLayer, zoomer;
+    var instance, mapG, zoomLayer, zoomer;
 
     function init(_zoomLayer_, _zoomer_) {
         zoomLayer = _zoomLayer_;
         zoomer = _zoomer_;
-        return setUpMap();
+        return setUpMap.bind(this)();
     }
 
     function setUpMap() {
@@ -50,11 +50,15 @@
         if (mapG.empty()) {
             mapG = zoomLayer.append('g').attr('id', 'topo-map');
         } else {
-            mapG.each(function (d, i) {
+            mapG.each(function () {
                 d3.selectAll(this.childNodes).remove();
             });
         }
 
+        if (!ps.getPrefs('topo_prefs')[this.prefs.visible]) {
+            this.hide();
+        }
+
         if (mapFilePath === '*countries') {
             cfilter = countryFilters[mapId] || countryFilters.uk;
             loadMap = ms.loadMapRegionInto;
@@ -66,10 +70,6 @@
             shading: ''
         });
 
-        if (!ps.getPrefs('topo_prefs').bg) {
-            toggle(false);
-        }
-
         return promise;
     }
 
@@ -86,55 +86,13 @@
         );
     }
 
-    function opacifyMap(b) {
-        mapG.transition()
-            .duration(1000)
-            .attr('opacity', b ? 1 : 0);
-    }
-
     function setMap(map) {
         ps.setPrefs('topo_mapid', map);
-        opacifyMap(true);
-        return setUpMap();
-    }
-
-    // TODO: -- START -- Move to dedicated module
-    var prefsState = {};
-
-    function updatePrefsState(what, b) {
-        prefsState[what] = b ? 1 : 0;
-        ps.setPrefs('topo_prefs', prefsState);
-    }
-
-    function _togSvgLayer(x, G, tag, what) {
-        var on = (x === 'keyev') ? !sus.visible(G) : Boolean(x),
-            verb = on ? 'Show' : 'Hide';
-        sus.visible(G, on);
-        updatePrefsState(tag, on);
-
-        if (x === 'keyev') {
-            flash.flash(verb + ' ' + what);
-        }
-
-        return on;
-    }
-    // TODO: -- END -- Move to dedicated module
-
-    function show() {
-        sus.visible(mapG, true);
-    }
-
-    function hide() {
-        sus.visible(mapG, false);
-    }
-
-    function toggle(x) {
-        return _togSvgLayer(x, mapG, 'bg', 'background map');
+        return setUpMap.bind(this)();
     }
 
     function openMapSelection() {
 
-        // TODO: Create a view class with extend method
         MapSelectionDialog.prototype.currentMap = currentMap;
 
         new MapSelectionDialog({
@@ -149,31 +107,32 @@
     }
 
     angular.module('ovTopo2')
-    .factory('Topo2MapService',
-        ['$location', 'PrefsService', 'MapService', 'FlashService',
-            'SvgUtilService', 'Topo2CountryFilters', 'Topo2MapDialog',
-            function (_$loc_, _ps_, _ms_, _flash_, _sus_, _t2cf_, _t2md_) {
+    .factory('Topo2MapService', [
+        '$location', 'Topo2ViewController', 'PrefsService', 'MapService', 'FlashService',
+        'SvgUtilService', 'Topo2CountryFilters', 'Topo2MapDialog',
 
-                $loc = _$loc_;
-                ps = _ps_;
-                ms = _ms_;
-                flash = _flash_;
-                sus = _sus_;
-                countryFilters = _t2cf_;
-                MapSelectionDialog = _t2md_;
+        function (_$loc_, ViewController, _ps_, _ms_, _flash_, _sus_, _t2cf_, _t2md_) {
 
-                return {
-                    init: init,
-                    setMap: setMap,
-                    openMapSelection: openMapSelection,
+            $loc = _$loc_;
+            ps = _ps_;
+            ms = _ms_;
+            flash = _flash_;
+            sus = _sus_;
+            countryFilters = _t2cf_;
+            MapSelectionDialog = _t2md_;
 
-                    show: show,
-                    hide: hide,
-                    toggle: toggle,
+            var MapLayer = ViewController.extend({
 
-                    resetZoom: resetZoom
-                };
-            }
-        ]);
+                id: 'topo-map',
+                displayName: 'Map',
 
+                init: init,
+                setMap: setMap,
+                openMapSelection: openMapSelection,
+                resetZoom: resetZoom
+            });
+
+            return instance || new MapLayer();
+        }
+    ]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index bb8e0db..0202ca9 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -53,22 +53,26 @@
                     if (data.bgType === 'geo') {
                         t2ms.setMap({
                             mapid: data.bgId,
-
-                            // TODO: The following value will be specified in the Topo2CurrentLayout Payload
-                            mapfilepath: "*bayarea"
+                            mapfilepath: data.bgFilePath
                         }).then(function () {
                             _.each(_this.regionNodes(), function (node) {
                                 node.resetPosition();
                             });
                         });
-                        t2ms.show();
+
+                        if (t2ms.enabled()) {
+                            t2ms.show();
+                        }
                     } else {
                         t2ms.hide();
                     }
 
                     if (data.bgType === 'grid') {
                         t2sls.loadLayout(data.bgId);
-                        t2sls.show();
+
+                        if (t2sls.enabled()) {
+                            t2sls.show();
+                        }
                     } else {
                         t2sls.hide();
                     }
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
index 411d130..1701f6b 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
@@ -36,10 +36,14 @@
             function (ViewController, ss) {
 
                 var SpriteLayer = ViewController.extend({
+
+                    id: 'topo-sprites',
+                    displayName: 'Sprite Layer',
+
                     init: function(svg, zoomLayer) {
                         this.svg = svg;
                         this.createSpriteDefs();
-                        this.container = zoomLayer.append('g').attr('id', 'topo-sprites');
+                        this.container = zoomLayer.append('g').attr('id', this.id);
                     },
                     loadLayout: function (id) {
                         this.container.selectAll("*").remove();
@@ -111,27 +115,6 @@
                                 .attr('x', spriteData.x)
                                 .attr('y', spriteData.y);
                         });
-                    },
-
-                    hide: function () {
-                        if (this.visible) {
-                            this.container
-                                .style('opacity', 1)
-                                .transition()
-                                .duration(400)
-                                .style('opacity', 0);
-                        }
-                        this.visible = false;
-                    },
-                    show: function () {
-                        if (!this.visible) {
-                            this.container
-                                .style('opacity', 0)
-                                .transition()
-                                .duration(400)
-                                .style('opacity', 1);
-                        }
-                        this.visible = true;
                     }
                 });
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js b/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
index 9d9f399..ac475be 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
@@ -22,20 +22,79 @@
 (function () {
     'use strict';
 
+    var flash, ps;
+
     function ViewController(options) {
         this.initialize.apply(this, arguments);
     }
 
     ViewController.prototype = {
-        initialize: function () {
 
+        id: null,
+        displayName: 'View',
+
+        initialize: function () {
+            this.name = this.displayName.toLowerCase().replace(/ /g,"_");
+            this.prefs = {
+                visible: this.name + '_visible'
+            }
+        },
+        node: function() {
+            return d3.select('#' + this.id);
+        },
+        enabled: function () {
+            return ps.getPrefs('topo_prefs')[this.prefs.visible];
+        },
+        isVisible: function () {
+            return this.node().style('visibility') === 'visible';
+        },
+        hide: function () {
+            var node = this.node();
+
+            if (this.isVisible()) {
+                node
+                    .transition()
+                    .duration(400)
+                    .style('opacity', 0)
+                    .each('end', function () {
+                        node.style('visibility', 'hidden')
+                    });
+            }
+        },
+        show: function () {
+            var node = this.node();
+
+            if (!this.isVisible()) {
+                node
+                    .style('visibility', 'visible')
+                    .transition()
+                    .duration(400)
+                    .style('opacity', 1)
+            }
+        },
+        toggle: function () {
+            var on = !Boolean(this.isVisible()),
+                verb = on ? 'Show' : 'Hide';
+
+            on ? this.show() : this.hide();
+            flash.flash(verb + ' ' + this.displayName);
+            this.updatePrefState(this.prefs.visible, on);
+        },
+        updatePrefState: function (key, value) {
+            var state = ps.getPrefs('topo_prefs');
+            state[key] = value ? 1 : 0;
+            ps.setPrefs('topo_prefs', state);
         }
     };
 
     angular.module('ovTopo2')
         .factory('Topo2ViewController', [
-            'FnService',
-            function (fn) {
+            'FnService', 'FlashService', 'PrefsService',
+            function (fn, _flash_, _ps_) {
+
+                flash = _flash_;
+                ps = _ps_;
+
                 ViewController.extend = fn.extend;
                 return ViewController;
             }