diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index 60a8be1..8b1c499 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -154,6 +154,7 @@
             .attr('in', String);
     }
 
+    // deprecated -- we'll use something else to highlight instances for affinity
     function loadGlowDefs(defs) {
         loadGlow(defs, 0.0, 0.0, 0.7, 'blue-glow');
         loadGlow(defs, 1.0, 1.0, 0.3, 'yellow-glow');
diff --git a/web/gui/src/main/webapp/app/fw/util/prefs.js b/web/gui/src/main/webapp/app/fw/util/prefs.js
index 16f2607..1cf590b 100644
--- a/web/gui/src/main/webapp/app/fw/util/prefs.js
+++ b/web/gui/src/main/webapp/app/fw/util/prefs.js
@@ -77,7 +77,17 @@
         cache[name] = obj;
         wss.sendEvent('updatePrefReq', { key: name, value: obj });
     }
-    
+
+    // merge preferences:
+    // The assumption here is that obj is a sparse object, and that the
+    //  defined keys should overwrite the corresponding values, but any
+    //  existing keys that are NOT explicitly defined here should be left
+    //  alone (not deleted).
+    function mergePrefs(name, obj) {
+        var merged = cache[name] || {};
+        setPrefs(name, angular.extend(merged, obj));
+    }
+
     function updatePrefs(data) {
         cache = data;
         listeners.forEach(function (lsnr) { lsnr(); });
@@ -114,6 +124,7 @@
                 getPrefs: getPrefs,
                 asNumbers: asNumbers,
                 setPrefs: setPrefs,
+                mergePrefs: mergePrefs,
                 addListener: addListener,
                 removeListener: removeListener
             };
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
index 4a7a44a..a90bae5 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2-theme.css
@@ -30,29 +30,36 @@
     fill: #db7773;
 }
 
-#ov-topo2 svg #topo-noDevsLayer text {
+#ov-topo2 svg #topo2-noDevsLayer text {
     fill: #7e9aa8;
 }
 
 /* --- Topo Map --- */
 
-#ov-topo2 svg #topo-map {
+#ov-topo2 svg #topo2-map {
     stroke-width: 2px;
     stroke: #f4f4f4;
     fill: #e5e5e6;
 }
 
-/* --- general topo-panel styling --- */
+/* --- general topo2-panel styling --- */
 
-.topo-p svg {
-    background: #c0242b;
+.topo2-p h2 {
+    display: inline-block;
+    padding: 6px;
 }
 
-.topo-p svg .glyph {
+.topo2-p svg {
+    background: #c0242b;
+    width: 28px;
+    height: 28px;
+}
+
+.topo2-p svg .glyph {
     fill: #ffffff;
 }
 
-.topo-p hr {
+.topo2-p hr {
     background-color: #cccccc;
 }
 
@@ -359,35 +366,35 @@
 /* ------------------------------------------------- */
 /* Sprite Layer */
 
-#ov-topo2 svg #topo-sprites .gold1 use {
+#ov-topo2 svg #topo2-sprites .gold1 use {
     stroke: #fda;
     fill: none;
 }
-#ov-topo2 svg #topo-sprites .gold1 text {
+#ov-topo2 svg #topo2-sprites .gold1 text {
     fill: #eda;
 }
 
-#ov-topo2 svg #topo-sprites .blue1 use {
+#ov-topo2 svg #topo2-sprites .blue1 use {
     stroke: #bbd;
     fill: none;
 }
-#ov-topo2 svg #topo-sprites .blue1 text {
+#ov-topo2 svg #topo2-sprites .blue1 text {
     fill: #cce;
 }
 
-#ov-topo2 svg #topo-sprites .gray1 use {
+#ov-topo2 svg #topo2-sprites .gray1 use {
     stroke: #ccc;
     fill: none;
 }
-#ov-topo2 svg #topo-sprites .gray1 text {
+#ov-topo2 svg #topo2-sprites .gray1 text {
     fill: #ddd;
 }
 
 /* fills */
-#ov-topo2 svg #topo-sprites use.fill-gray2 {
+#ov-topo2 svg #topo2-sprites use.fill-gray2 {
     fill: #eee;
 }
 
-#ov-topo2 svg #topo-sprites use.fill-blue2 {
+#ov-topo2 svg #topo2-sprites use.fill-blue2 {
     fill: #bce;
 }
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.css b/web/gui/src/main/webapp/app/view/topo2/topo2.css
index 5e05ff3..12be44a 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.css
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.css
@@ -133,3 +133,77 @@
     height: 28px;
 }
 
+
+/* --- general topo2-panel styling --- */
+
+.topo2-p div.header {
+    margin-bottom: 10px;
+}
+
+.topo2-p div.header div.icon {
+    vertical-align: middle;
+    display: inline-block;
+}
+.topo2-p div.body {
+    overflow-y: scroll;
+}
+
+.topo2-p div.body::-webkit-scrollbar {
+    display: none;
+}
+
+.topo2-p svg {
+    display: inline-block;
+    width: 26px;
+    height: 26px;
+}
+
+
+.topo2-p h2 {
+    padding: 0 0 0 10px;
+    margin: 0;
+    font-weight: lighter;
+    word-wrap: break-word;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.topo2-p h3 {
+    padding: 0 4px;
+    margin: 0;
+    word-wrap: break-word;
+    top: 20px;
+    left: 50px;
+}
+
+.topo2-p p,
+.topo2-p table {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.topo2-p td {
+    word-wrap: break-word;
+}
+.topo2-p td.label {
+    font-weight: bold;
+    padding: 0 10px 0 0;
+}
+.topo2-p td.value {
+    padding: 0;
+}
+
+#topo2-p-summary  td.label {
+    width: 50%;
+}
+
+#topo2-p-detail  div.actionBtns {
+    padding-top: 6px;
+}
+
+.topo2-p hr {
+    height: 1px;
+    border: 0;
+    margin: 4px -3px;
+}
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2.js b/web/gui/src/main/webapp/app/view/topo2/topo2.js
index be3f65b..e443d39 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2.js
@@ -15,7 +15,7 @@
 */
 
 /*
- ONOS GUI -- Topology View Module
+ ONOS GUI -- Topology (2) View Module
 
  NOTE: currently under development to support Regions.
  */
@@ -31,13 +31,17 @@
     var ovtopo2, svg, defs, zoomLayer, forceG;
 
     // Internal state
-    var zoomer;
+    var zoomer,
+        currentLayoutId = '_default_';  // NOTE: see UiTopoLayoutId.DEFAULT_STR
+
 
     // --- Glyphs, Icons, and the like -----------------------------------
 
     function setUpDefs() {
         defs = svg.append('defs');
         gs.loadDefs(defs);
+
+        // TODO: consider using something other than the "glow" styles
         sus.loadGlowDefs(defs);
     }
 
@@ -60,13 +64,20 @@
 
     function zoomCallback() {
         var sc = zoomer.scale(),
-            tr = zoomer.translate();
+            tr = zoomer.translate(),
+            sparse = {};
 
-        ps.setPrefs('topo_zoom', { tx: tr[0], ty: tr[1], sc: sc });
+        sparse[currentLayoutId] =  {
+            zoomScale: sc,
+            zoomPanX: tr[0],
+            zoomPanY: tr[1]
+        };
+
+        ps.mergePrefs('topo2_zoom', sparse);
     }
 
     function setUpZoom() {
-        zoomLayer = svg.append('g').attr('id', 'topo-zoomlayer');
+        zoomLayer = svg.append('g').attr('id', 'topo2-zoomlayer');
 
         zoomer = t2zs.createZoomer({
             svg: svg,
@@ -80,22 +91,25 @@
 
     angular.module('ovTopo2', ['onosUtil', 'onosSvg', 'onosRemote'])
     .controller('OvTopo2Ctrl', [
-        '$scope', '$log', '$location', 'FnService', 'MastService', 'KeyService',
-        'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
-        'WebSocketService', 'PrefsService', 'ThemeService',
+        '$scope', '$log', '$location',
+        'FnService', 'MastService', 'KeyService', 'GlyphService', 'MapService',
+        'SvgUtilService', 'FlashService', 'WebSocketService',
+        'PrefsService', 'ThemeService',
         'Topo2EventService', 'Topo2ForceService', 'Topo2InstanceService',
         'Topo2BreadcrumbService', 'Topo2KeyCommandService', 'Topo2MapService',
-        'Topo2MapConfigService', 'Topo2ZoomService',
-        'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel', 'Topo2SpriteLayerService',
+        'Topo2MapConfigService', 'Topo2ZoomService', 'Topo2SpriteLayerService',
+        'Topo2SummaryPanelService', 'Topo2DeviceDetailsPanel',
 
-        function (_$scope_, _$log_, _$loc_,
-            _fs_, _mast_, _ks_,
-            _gs_, _ms_, _sus_, _flash_,
-            _wss_, _ps_, _th_,
-            _t2es_, _t2fs_, _t2is_, _t2bcs_, _t2kcs_, _t2ms_, _t2mcs_,
-            _t2zs_, summaryPanel, detailsPanel, t2sls
+        function (
+            _$scope_, _$log_, _$loc_,
+            _fs_, _mast_, _ks_, _gs_, _ms_,
+            _sus_, _flash_, _wss_,
+            _ps_, _th_,
+            _t2es_, _t2fs_, _t2is_,
+            _t2bcs_, _t2kcs_, _t2ms_,
+            _t2mcs_, _t2zs_, t2sls,
+            summaryPanel, detailsPanel
         ) {
-
             var params = _$loc_.search(),
                 dim,
                 wh,
@@ -106,7 +120,6 @@
                     zoomLayer: function () { return zoomLayer; },
                     zoomer: function () { return zoomer; }
                     // opacifyMap: opacifyMap,
-                    // topoStartDone: topoStartDone
                 };
 
             $scope = _$scope_;
@@ -115,10 +128,8 @@
             fs = _fs_;
             mast = _mast_;
             ks = _ks_;
-
             gs = _gs_;
             sus = _sus_;
-
             ps = _ps_;
 
             t2es = _t2es_;
@@ -140,7 +151,8 @@
                 $scope.intentData = {
                     key: params.intentKey,
                     appId: params.intentAppId,
-                    appName: params.intentAppName
+                    appName: params.intentAppName,
+                    intentType: params.intentType
                 };
             }
 
@@ -176,21 +188,34 @@
             // make sure we can respond to topology events from the server
             t2es.bindHandlers();
 
-            // Add the map SVG Group
-            t2ms.init(zoomLayer, zoomer).then(
-                function (proj) {
-                    var z = ps.getPrefs('topo_zoom', { tx: 0, ty: 0, sc: 1 });
-                    zoomer.panZoom([z.tx, z.ty], z.sc);
+            // Add the map SVG Group, but don't load a map yet...
+            //   we will wait until the server tells us whether we should
+            //   be loading a geomap or a sprite layer
+            t2ms.init(zoomLayer, zoomer);
 
-                    t2mcs.projection(proj);
-                    $log.debug('** Zoom restored:', z);
-                    $log.debug('** We installed the projection:', proj);
+            // TODO: figure out from where to call this code...
+            // we still need to do the equivalent of this when we load
+            //  a geo map, just not here.
+            //
+            // ... NOTE: we still have to position the nodes AFTER the map
+            //           has loaded and the projection has been established...
+            //           maybe another promise ending with a "positionNodes()"
+            //           call?
 
-                    // Now the map has load and we have a projection we can
-                    // get the info from the server
-                    t2es.start();
-                }
-            );
+            // .then(
+            //     function (proj) {
+            //         var z = ps.getPrefs('topo2_zoom', { tx: 0, ty: 0, sc: 1 });
+            //         zoomer.panZoom([z.tx, z.ty], z.sc);
+            //
+            //         t2mcs.projection(proj);
+            //         $log.debug('** Zoom restored:', z);
+            //         $log.debug('** We installed the projection:', proj);
+            //
+            //         // Now the map has load and we have a projection we can
+            //         // get the info from the server
+            //         t2es.start();
+            //     }
+            // );
 
             t2sls.init(svg, zoomLayer);
             t2fs.init(svg, forceG, uplink, dim, zoomer);
@@ -219,6 +244,10 @@
             summaryPanel.init();
             detailsPanel.init();
 
+            // Now that we are initialized, ask the server for what we
+            //  need to show.
+            t2es.start();
+
             $log.log('OvTopo2Ctrl has been created');
         }]);
 })();
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
index 16ab45b8..29773f8 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2DetailsPanel.js
@@ -30,7 +30,7 @@
 
     // configuration
     var id = 'topo2-p-detail',
-        className = 'topo-p',
+        className = 'topo2-p',
         panelOpts = {
             width: 260          // summary and detail panel width
         };
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Dialog.js b/web/gui/src/main/webapp/app/view/topo2/topo2Dialog.js
index c7661fc..71a33d2 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Dialog.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Dialog.js
@@ -23,9 +23,9 @@
     'use strict';
 
     // constants
-    var idDialog = 'topo-p-dialog',
+    var idDialog = 'topo2-p-dialog',
         opts = {
-            cssCls: 'topo-p'
+            cssCls: 'topo2-p'
         };
 
     // ==========================
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Event.js b/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
index 76a573e..a03dab4 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Event.js
@@ -33,7 +33,6 @@
     var handlerMap,
         openListener;
 
-    // TODO: only add heartbeat timer etc. if we really need to be doing that..
     // ========================== Helper Functions
 
     function createHandlerMap() {
@@ -42,7 +41,6 @@
             topo2CurrentLayout: t2fs,
             topo2CurrentRegion: t2fs,
             topo2PeerRegions: t2fs,
-            topo2StartDone: t2fs,
 
             topo2UiModelEvent: t2fs
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
index 1795df4..98c8484 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Force.js
@@ -145,10 +145,6 @@
         doTmpPeerRegions(data);
     }
 
-    function startDone(data) {
-        $log.debug('>> topo2StartDone event:', data);
-    }
-
     function modelEvent(data) {
         $log.debug('>> topo2UiModelEvent event:', data);
 
@@ -276,7 +272,6 @@
                 topo2AllInstances: allInstances,
                 topo2CurrentLayout: currentLayout,
                 topo2CurrentRegion: currentRegion,
-                topo2StartDone: startDone,
 
                 topo2UiModelEvent: modelEvent,
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js b/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js
index 307c2db..8a3cf20 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Instance.js
@@ -212,7 +212,7 @@
     // ==========================
     function logicError(msg) {
         if (showLogicErrors) {
-            $log.warn('TopoInstService: ' + msg);
+            $log.warn('Topo2InstService: ' + msg);
         }
     }
 
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 0f54273..0d49e39 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2KeyCommands.js
@@ -79,7 +79,7 @@
 
     function updatePrefsState(what, b) {
         prefsState[what] = b ? 1 : 0;
-        ps.setPrefs('topo_prefs', prefsState);
+        ps.setPrefs('topo2_prefs', prefsState);
     }
 
     function deviceLabelFlashMessage(index) {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
index 9a639bf..9350020 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Layout.js
@@ -121,15 +121,15 @@
 
                         this.prevForce = this.forceG;
 
-                        this.forceG = d3.select('#topo-zoomlayer')
-                            .append('g').attr('class', 'topo-force');
+                        this.forceG = d3.select('#topo2-zoomlayer')
+                            .append('g').attr('class', 'topo2-force');
 
                         this.elements = {
-                            linkG: this.addElement(this.forceG, 'topo-links'),
-                            linkLabelG: this.addElement(this.forceG, 'topo-linkLabels'),
-                            numLinksLabels: this.addElement(this.forceG, 'topo-numLinkLabels'),
-                            nodeG: this.addElement(this.forceG, 'topo-nodes'),
-                            portLabels: this.addElement(this.forceG, 'topo-portLabels')
+                            linkG: this.addElement(this.forceG, 'topo2-links'),
+                            linkLabelG: this.addElement(this.forceG, 'topo2-linkLabels'),
+                            numLinksLabels: this.addElement(this.forceG, 'topo2-numLinkLabels'),
+                            nodeG: this.addElement(this.forceG, 'topo2-nodes'),
+                            portLabels: this.addElement(this.forceG, 'topo2-portLabels')
                         };
                     },
                     addElement: function (parent, className) {
@@ -180,9 +180,9 @@
                         this.update();
                     },
                     centerLayout: function () {
-                        d3.select('#topo-zoomlayer').attr('data-layout', t2rs.model.get('id'));
+                        d3.select('#topo2-zoomlayer').attr('data-layout', t2rs.model.get('id'));
 
-                        var zoomer = d3.select('#topo-zoomlayer').node().getBBox(),
+                        var zoomer = d3.select('#topo2-zoomlayer').node().getBBox(),
                             layoutBBox = this.forceG.node().getBBox(),
                             scale = (zoomer.height - 150) / layoutBBox.height,
                             x = (zoomer.width / 2) - ((layoutBBox.x + layoutBBox.width / 2) * scale),
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
index 09377e9..be8d03c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Link.js
@@ -160,7 +160,7 @@
                     this.set('enhanced', true);
                     point = this.locatePortLabel();
                     angular.extend(point, {
-                        id: 'topo-port-tgt',
+                        id: 'topo2-port-tgt',
                         num: this.get('portB')
                     });
                     data.push(point);
@@ -168,13 +168,13 @@
                     if (this.get('portA')) {
                         point = this.locatePortLabel(1);
                         angular.extend(point, {
-                            id: 'topo-port-src',
+                            id: 'topo2-port-src',
                             num: this.get('portA')
                         });
                         data.push(point);
                     }
 
-                    var entering = d3.select('#topo-portLabels')
+                    var entering = d3.select('#topo2-portLabels')
                         .selectAll('.portLabel')
                         .data(data)
                         .enter().append('g')
@@ -204,7 +204,7 @@
             },
             unenhance: function () {
                 this.set('enhanced', false);
-                d3.select('#topo-portLabels').selectAll('.portLabel').remove();
+                d3.select('#topo2-portLabels').selectAll('.portLabel').remove();
             },
             getSelected: function () {
                 return this.collection.filter(function (m) {
@@ -307,7 +307,7 @@
 
                 var labelScale = labelDim / (labelDim * t2zs.scale());
 
-                d3.select('#topo-portLabels')
+                d3.select('#topo2-portLabels')
                     .selectAll('.portLabel')
                     .selectAll('*')
                     .style('transform', 'scale(' + labelScale + ')');
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 aa9766e..69716d8 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
@@ -23,7 +23,7 @@
     'use strict';
 
     // Injected Services
-    var $loc, ps, ms, flash, sus, countryFilters;
+    var $log, $loc, ps, ms, flash, sus, countryFilters;
 
     // Injected Classes
     var MapSelectionDialog;
@@ -34,9 +34,12 @@
     function init(_zoomLayer_, _zoomer_) {
         zoomLayer = _zoomLayer_;
         zoomer = _zoomer_;
-        return setUpMap.bind(this)();
+        // This function no longer returns a promise.
+        //  TODO: call setUpMap() when we know which map we want (not from here)
+        // return setUpMap.bind(this)();
     }
 
+    // TODO: to be re-worked: map-id, filePath, scale/pan to be passed as params
     function setUpMap() {
         var prefs = currentMap(),
             mapId = prefs.mapid,
@@ -45,17 +48,17 @@
             loadMap = ms.loadMapInto,
             promise, cfilter;
 
-        mapG = d3.select('#topo-map');
+        mapG = d3.select('#topo2-map');
 
         if (mapG.empty()) {
-            mapG = zoomLayer.append('g').attr('id', 'topo-map');
+            mapG = zoomLayer.append('g').attr('id', 'topo2-map');
         } else {
             mapG.each(function () {
                 d3.selectAll(this.childNodes).remove();
             });
         }
 
-        if (!ps.getPrefs('topo_prefs')[this.prefs.visible]) {
+        if (!ps.getPrefs('topo2_prefs')[this.prefs.visible]) {
             this.hide();
         }
 
@@ -73,9 +76,11 @@
         return promise;
     }
 
+    // TODO: deprecated - the layout will tell us which map
+    //   no longer stored in user preferences
     function currentMap() {
         return ps.getPrefs(
-            'topo_mapid',
+            'topo2_mapid',
             {
                 mapid: 'usa',
                 mapscale: 1,
@@ -86,20 +91,23 @@
         );
     }
 
+    // TODO: deprecated - maps are defined per layout on the server side.
     function setMap(map) {
-        ps.setPrefs('topo_mapid', map);
+        ps.setPrefs('topo2_mapid', map);
         return setUpMap.bind(this)();
     }
 
+    // TODO: deprecated - map selection does not make sense in Topo2
     function openMapSelection() {
+        $log.warn('openMapSelection DISABLED');
 
-        MapSelectionDialog.prototype.currentMap = currentMap;
-
-        new MapSelectionDialog({
-            okHandler: function (preferences) {
-                setMap(preferences);
-            }
-        }).open();
+        // MapSelectionDialog.prototype.currentMap = currentMap;
+        //
+        // new MapSelectionDialog({
+        //     okHandler: function (preferences) {
+        //         setMap(preferences);
+        //     }
+        // }).open();
     }
 
     function resetZoom() {
@@ -108,11 +116,15 @@
 
     angular.module('ovTopo2')
     .factory('Topo2MapService', [
-        '$location', 'Topo2ViewController', 'PrefsService', 'MapService', 'FlashService',
-        'SvgUtilService', 'Topo2CountryFilters', 'Topo2MapDialog',
+        '$log', '$location', 'Topo2ViewController', 'PrefsService',
+        'MapService', 'FlashService', 'SvgUtilService', 'Topo2CountryFilters',
+        'Topo2MapDialog',
 
-        function (_$loc_, ViewController, _ps_, _ms_, _flash_, _sus_, _t2cf_, _t2md_) {
+        function (_$log_, _$loc_, ViewController, _ps_,
+                  _ms_, _flash_, _sus_, _t2cf_,
+                  _t2md_) {
 
+            $log = _$log_;
             $loc = _$loc_;
             ps = _ps_;
             ms = _ms_;
@@ -123,7 +135,7 @@
 
             var MapLayer = ViewController.extend({
 
-                id: 'topo-map',
+                id: 'topo2-map',
                 displayName: 'Map',
 
                 init: init,
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js b/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js
index 9eaf243..ef3698e 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Prefs.js
@@ -34,7 +34,7 @@
     };
 
     function topo2Prefs() {
-        return ps.getPrefs('topo_prefs', defaultPrefsState);
+        return ps.getPrefs('topo2_prefs', defaultPrefsState);
     }
 
     function get(key) {
@@ -45,7 +45,7 @@
     function set(key, value) {
         var preferences = topo2Prefs();
         preferences[key] = value;
-        ps.setPrefs('topo_prefs', preferences);
+        ps.setPrefs('topo2_prefs', preferences);
         return preferences[key];
     }
 
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 8820a30..17c4262 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SpriteLayer.js
@@ -37,7 +37,7 @@
 
                 var SpriteLayer = ViewController.extend({
 
-                    id: 'topo-sprites',
+                    id: 'topo2-sprites',
                     displayName: 'Sprite Layer',
 
                     init: function(svg, zoomLayer) {
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js b/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
index 6017504..07a9562 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2SummaryPanel.js
@@ -30,7 +30,7 @@
 
     // configuration
     var id = 'topo2-p-summary',
-        className = 'topo-p',
+        className = 'topo2-p',
         panelOpts = {
             show: true,
             width: 260 // summary and detail panel width
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 ac475be..ad8dfa9 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2ViewController.js
@@ -43,7 +43,7 @@
             return d3.select('#' + this.id);
         },
         enabled: function () {
-            return ps.getPrefs('topo_prefs')[this.prefs.visible];
+            return ps.getPrefs('topo2_prefs')[this.prefs.visible];
         },
         isVisible: function () {
             return this.node().style('visibility') === 'visible';
@@ -81,9 +81,9 @@
             this.updatePrefState(this.prefs.visible, on);
         },
         updatePrefState: function (key, value) {
-            var state = ps.getPrefs('topo_prefs');
+            var state = ps.getPrefs('topo2_prefs');
             state[key] = value ? 1 : 0;
-            ps.setPrefs('topo_prefs', state);
+            ps.setPrefs('topo2_prefs', state);
         }
     };
 
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js b/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js
index 7dcf325..d52154c 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Zoom.js
@@ -15,48 +15,44 @@
  */
 
 /*
- ONOS GUI -- Topology Breadcrumb Module.
- Module that renders the breadcrumbs for regions
+ ONOS GUI -- Topology Zoom Module.
+ Module that handles Zoom events.
  */
 
 (function () {
-
     'use strict';
 
-    var zs, ps;
+    // injected references
+    var fs, zs, ps;
 
+    // internal state
     var zoomer,
         zoomEventListeners = [];
 
+    function createZoomer(options) {
+        // need to wrap the original zoom callback to extend its behavior
+        var origCallback = fs.isF(options.zoomCallback) || function () {};
+
+        options.zoomCallback = function () {
+            origCallback();
+
+            angular.forEach(zoomEventListeners, function (ev) {
+                ev(zoomer);
+            });
+        };
+
+        zoomer = zs.createZoomer(options);
+        return zoomer;
+    }
+
     function getZoomer() {
         return zoomer;
     }
 
-    function createZoomer(options) {
-        var settings = angular.extend({}, options, {
-            zoomCallback: zoomCallback
-        });
-
-        zoomer = zs.createZoomer(settings);
-        return zoomer;
-    }
-
-    function zoomCallback() {
-        var sc = zoomer.scale(),
-            tr = zoomer.translate();
-
-        ps.setPrefs('topo_zoom', { tx: tr[0], ty: tr[1], sc: sc });
-
-        angular.forEach(zoomEventListeners, function (ev) {
-            ev(zoomer);
-        });
-    }
-
     function findZoomEventListener(ev) {
-        for (var i = 0, l = zoomEventListeners.length; i < l; i++) {
+        for (var i = 0, len = zoomEventListeners.length; i < len; i++) {
             if (zoomEventListeners[i] === ev) return i;
         }
-
         return -1;
     }
 
@@ -65,7 +61,6 @@
     }
 
     function removeZoomEventListener(callback) {
-
         var evIndex = findZoomEventListener(callback);
 
         if (evIndex !== -1) {
@@ -83,9 +78,10 @@
 
     angular.module('ovTopo2')
     .factory('Topo2ZoomService', [
-        'ZoomService', 'PrefsService',
-        function (_zs_, _ps_) {
+        'FnService', 'ZoomService', 'PrefsService',
+        function (_fs_, _zs_, _ps_) {
 
+            fs = _fs_;
             zs = _zs_;
             ps = _ps_;