diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
index 4b66bd6..95d5d9e 100644
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
@@ -38,6 +38,7 @@
               [summaryVisible]="prefsState.summary">
 </onos-toolbar>
 <onos-details #details [on]="prefsState.detail"></onos-details>
+<onos-mapselector *ngIf="mapSelShown" (chosenMap)="changeMap($event)"></onos-mapselector>
 
 <div id="ov-topo2">
     <!-- Template explanation -
@@ -62,7 +63,7 @@
                onos-nodeviceconnected />
         <svg:g id="topo-zoomlayer" onosZoomableOf [zoomableOf]="svgZoom">
             <svg:desc>A logical layer that allows the main SVG canvas to be zoomed and panned</svg:desc>
-            <svg:g *ngIf="prefsState.bg" onos-backgroundsvg>
+            <svg:g *ngIf="prefsState.bg" onos-backgroundsvg [map]="mapIdState">
                 <svg:desc>The Background SVG component - contains maps</svg:desc>
             </svg:g>
             <svg:g #force onos-forcesvg
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
index 446d41c..0c0a6dd 100644
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
@@ -18,7 +18,7 @@
 import { of } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import * as d3 from 'd3';
 import { TopologyComponent } from './topology.component';
 import {
     Instance,
@@ -45,6 +45,10 @@
     LinkSvgComponent, SubRegionNodeSvgComponent
 } from '../layer/forcesvg/visuals';
 import {DraggableDirective} from '../layer/forcesvg/draggable/draggable.directive';
+import {MapSelectorComponent} from '../panel/mapselector/mapselector.component';
+import {BackgroundSvgComponent} from '../layer/backgroundsvg/backgroundsvg.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MapSvgComponent} from '../layer/mapsvg/mapsvg.component';
 
 
 class MockActivatedRoute extends ActivatedRoute {
@@ -156,7 +160,12 @@
         fs = new FnService(ar, logSpy, windowMock);
 
         TestBed.configureTestingModule({
-            imports: [ BrowserAnimationsModule, RouterTestingModule ],
+            imports: [
+                BrowserAnimationsModule,
+                RouterTestingModule,
+                FormsModule,
+                ReactiveFormsModule
+            ],
             declarations: [
                 TopologyComponent,
                 InstanceComponent,
@@ -173,7 +182,10 @@
                 HostNodeSvgComponent,
                 DraggableDirective,
                 ZoomableDirective,
-                SubRegionNodeSvgComponent
+                SubRegionNodeSvgComponent,
+                MapSelectorComponent,
+                BackgroundSvgComponent,
+                MapSvgComponent
             ],
             providers: [
                 { provide: FnService, useValue: fs },
@@ -201,6 +213,7 @@
     beforeEach(() => {
         fixture = TestBed.createComponent(TopologyComponent);
         component = fixture.componentInstance;
+
         fixture.detectChanges();
     });
 
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
index ff8a050..750162f 100644
--- a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
@@ -28,7 +28,6 @@
     PrefsService,
     SvgUtilService,
     WebSocketService,
-    ZoomService
 } from 'gui2-fw-lib';
 import {InstanceComponent} from '../panel/instance/instance.component';
 import {DetailsComponent} from '../panel/details/details.component';
@@ -45,12 +44,15 @@
     HOSTS_TOGGLE, OFFLINE_TOGGLE, PORTS_TOGGLE,
     BKGRND_TOGGLE, CYCLELABELS_BTN, CYCLEHOSTLABEL_BTN,
     RESETZOOM_BTN, EQMASTER_BTN,
-    CANCEL_TRAFFIC, ALL_TRAFFIC, QUICKHELP_BTN
+    CANCEL_TRAFFIC, ALL_TRAFFIC, QUICKHELP_BTN, BKGRND_SELECT
 } from '../panel/toolbar/toolbar.component';
 import {TrafficService} from '../traffic.service';
 import {ZoomableDirective} from '../layer/zoomable.directive';
+import {MapObject} from '../layer/maputils';
 
 const TOPO2_PREFS = 'topo2_prefs';
+const TOPO_MAPID_PREFS = 'topo_mapid';
+
 const PREF_BG = 'bg';
 const PREF_DETAIL = 'detail';
 const PREF_DLBLS = 'dlbls';
@@ -63,7 +65,7 @@
 const PREF_TOOLBAR = 'toolbar';
 
 /**
- * model of the topo2_prefs object - this is a subset of the overall Prefs returned
+ * Model of the topo2_prefs object - this is a subset of the overall Prefs returned
  * by the server
  */
 export interface Topo2Prefs {
@@ -134,6 +136,12 @@
         summary: 1,
         toolbar: 0,
     };
+
+    mapIdState: MapObject = <MapObject>{
+        id: undefined,
+        scale: 1.0
+    };
+    mapSelShown: boolean = false;
     lionFn; // Function
 
     constructor(
@@ -167,6 +175,7 @@
         this.is.loadIconDef('m_summary');
         this.is.loadIconDef('m_details');
         this.is.loadIconDef('m_map');
+        this.is.loadIconDef('m_selectMap');
         this.is.loadIconDef('m_cycleLabels');
         this.is.loadIconDef('m_resetZoom');
         this.is.loadIconDef('m_eqMaster');
@@ -217,6 +226,7 @@
 
         this.ps.addListener((data) => this.prefsUpdateHandler(data));
         this.prefsState = this.ps.getPrefs(TOPO2_PREFS, this.prefsState);
+        this.mapIdState = this.ps.getPrefs(TOPO_MAPID_PREFS, this.mapIdState);
         this.log.debug('Topology component initialized');
     }
 
@@ -228,8 +238,13 @@
      */
     prefsUpdateHandler(data: any): void {
         // Extract the TOPO2 prefs from it
-        this.prefsState = data[TOPO2_PREFS];
-        this.log.debug('Updated topo2 prefs', this.prefsState);
+        if (data[TOPO2_PREFS]) {
+            this.prefsState = data[TOPO2_PREFS];
+        }
+        if (data[TOPO_MAPID_PREFS]) {
+            this.mapIdState = data[TOPO_MAPID_PREFS];
+        }
+        this.log.debug('Updated topo2 prefs', this.prefsState, this.mapIdState);
     }
 
     /**
@@ -270,6 +285,9 @@
             case BKGRND_TOGGLE:
                 this.toggleBackground();
                 break;
+            case BKGRND_SELECT:
+                this.mapSelShown = !this.mapSelShown;
+                break;
             case CYCLELABELS_BTN:
                 this.cycleDeviceLabels();
                 break;
@@ -309,6 +327,7 @@
             B: [(token) => {this.toggleBackground(token); }, 'Toggle background'],
             D: [(token) => {this.toggleDetails(token); }, 'Toggle details panel'],
             I: [(token) => {this.toggleInstancePanel(token); }, 'Toggle ONOS Instance Panel'],
+            G: [() => {this.mapSelShown = !this.mapSelShown; }, 'Show map selection dialog'],
             O: [() => {this.toggleSummary(); }, 'Toggle the Summary Panel'],
             R: [() => {this.resetZoom(); }, 'Reset pan / zoom'],
             P: [(token) => {this.togglePorts(token); }, 'Toggle Port Highlighting'],
@@ -572,6 +591,13 @@
         this.trs.destroy();
     }
 
+    changeMap(map: MapObject) {
+        this.mapSelShown = false; // Hide the MapSelector component
+        this.mapIdState = map;
+        this.ps.setPrefs(TOPO_MAPID_PREFS, this.mapIdState);
+        this.log.debug('Map has been changed to ', map);
+    }
+
     /**
      * Read the LION bundle for Toolbar and set up the lionFn
      */