diff --git a/web/gui2/BUILD b/web/gui2/BUILD
index 607f955..bd0b330 100644
--- a/web/gui2/BUILD
+++ b/web/gui2/BUILD
@@ -344,6 +344,7 @@
         ":_onos-gui2-base-jar",
         ":_web_inf_classes_files",
         "//web/gui:onos-gui-lion-for-gui2",
+        "//web/gui:onos-gui-data-for-gui2",
         "src/main/webapp/WEB-INF/web.xml",
     ],
     outs = ["onos-gui2.jar"],
@@ -357,6 +358,8 @@
           " unzip -q $$ROOT/$(location //web/gui:onos-gui-lion-for-gui2) web/gui/src/main/resources/**/* &&" +
           " mv web/gui/src/main/resources/org/onosproject/ui/lion* WEB-INF/classes/org/onosproject/ui/ &&" +
           " mv web/gui/src/main/resources/core WEB-INF/classes/ &&" +
+          " unzip -q $$ROOT/$(location //web/gui:onos-gui-data-for-gui2) web/gui/src/main/webapp/data/**/* &&" +
+          " mv web/gui/src/main/webapp/data WEB-INF/classes/ &&" +
           " find . -type f -exec touch -t 201901200000 {} \; &&" +
           " jar cmf META-INF/MANIFEST.MF $$ROOT/$@ WEB-INF/web.xml WEB-INF/classes OSGI-INF/*.xml",
     output_to_bindir = 1,
diff --git a/web/gui2/package-lock.json b/web/gui2/package-lock.json
index c7f2b1c..763b0c4 100644
--- a/web/gui2/package-lock.json
+++ b/web/gui2/package-lock.json
@@ -3216,7 +3216,7 @@
         "d3-fetch": "1.1.2",
         "d3-force": "1.1.2",
         "d3-format": "1.3.2",
-        "d3-geo": "1.11.1",
+        "d3-geo": "1.11.3",
         "d3-hierarchy": "1.1.8",
         "d3-interpolate": "1.3.2",
         "d3-path": "1.0.7",
@@ -3338,9 +3338,9 @@
       "integrity": "sha512-Z18Dprj96ExragQ0DeGi+SYPQ7pPfRMtUXtsg/ChVIKNBCzjO8XYJvRTC1usblx52lqge56V5ect+frYTQc8WQ=="
     },
     "d3-geo": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.1.tgz",
-      "integrity": "sha512-GsG7x9G9sykseLviOVSJ3h5yjw0ItLopOtuDQKUt1TRklEegCw5WAmnIpYYiCkSH/QgUMleAeE2xZK38Qb+1+Q==",
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.3.tgz",
+      "integrity": "sha512-n30yN9qSKREvV2fxcrhmHUdXP9TNH7ZZj3C/qnaoU0cVf/Ea85+yT7HY7i8ySPwkwjCNYtmKqQFTvLFngfkItQ==",
       "requires": {
         "d3-array": "1.2.4"
       }
@@ -11205,6 +11205,14 @@
         "repeat-string": "1.6.1"
       }
     },
+    "topojson-client": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.0.0.tgz",
+      "integrity": "sha1-H5kpOnfvQqRI0DKoGqmCtz82DS8=",
+      "requires": {
+        "commander": "2.19.0"
+      }
+    },
     "toposort": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
diff --git a/web/gui2/package.json b/web/gui2/package.json
index 1ce2565..3a7f747 100644
--- a/web/gui2/package.json
+++ b/web/gui2/package.json
@@ -27,6 +27,7 @@
     "fm-gui2-lib": "file:../../apps/faultmanagement/fm-gui2-lib/dist/fm-gui2-lib/fm-gui2-lib-2.0.0.tgz",
     "gui2-fw-lib": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-2.0.0.tgz",
     "rxjs": "^6.0.0",
+    "topojson-client": "^3.0.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
index d745ce8..bb9e638 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
@@ -13,7 +13,7 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
-<svg:g xmlns:svg="http://www.w3.org/2000/svg" onos-mapsvg />
+<svg:g xmlns:svg="http://www.w3.org/2000/svg" onos-mapsvg [map]="map"/>
 <svg:g  xmlns:svg="http://www.w3.org/2000/svg">
     <svg:text>Layout: {{ layoutData.id }} {{ layoutData.bgDesc }}</svg:text>
     <svg:text>Region: {{ layoutData.region }} {{ layoutData.regionName }}</svg:text>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
index f1e1e69..a3eed06 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
@@ -16,21 +16,52 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { BackgroundSvgComponent } from './backgroundsvg.component';
+import {MapSvgComponent} from '../mapsvg/mapsvg.component';
+import {from} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
+import {LogService} from 'gui2-fw-lib';
+import {MapObject} from '../maputils';
+
+class MockHttpClient {
+    get() {
+        return from(['{"id":"app","icon":"nav_apps","cat":"PLATFORM","label":"Applications"}']);
+    }
+
+    subscribe() {}
+}
 
 describe('BackgroundSvgComponent', () => {
+    let logServiceSpy: jasmine.SpyObj<LogService>;
     let component: BackgroundSvgComponent;
     let fixture: ComponentFixture<BackgroundSvgComponent>;
+    const testmap: MapObject = <MapObject>{
+        scale: 1.0,
+        id: 'test',
+        description: 'test map'
+    };
 
     beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+
         TestBed.configureTestingModule({
-            declarations: [ BackgroundSvgComponent ]
+            declarations: [
+                BackgroundSvgComponent,
+                MapSvgComponent
+            ],
+            providers: [
+                { provide: LogService, useValue: logSpy },
+                { provide: HttpClient, useClass: MockHttpClient },
+            ]
         })
         .compileComponents();
+
+        logServiceSpy = TestBed.get(LogService);
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(BackgroundSvgComponent);
         component = fixture.componentInstance;
+        component.map = testmap;
         fixture.detectChanges();
     });
 
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
index e07f304..5536784 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import {MapObject} from '../maputils';
 
 /**
  * model of the topo2CurrentLayout attrs from BgZoom below
@@ -76,6 +77,7 @@
     styleUrls: ['./backgroundsvg.component.css']
 })
 export class BackgroundSvgComponent implements OnInit {
+    @Input() map: MapObject;
 
     layoutData: Layout = <Layout>{};
 
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts
index b511886..24dd029 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/models/force-directed-graph.ts
@@ -52,6 +52,10 @@
     height: number;
 }
 
+/**
+ * The inspiration for this approach comes from
+ * https://medium.com/netscape/visualizing-data-with-angular-and-d3-209dde784aeb
+ */
 export class ForceDirectedGraph {
     public ticker: EventEmitter<d3.Simulation<Node, Link>> = new EventEmitter();
     public simulation: d3.Simulation<any, any>;
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
index f206973..0dac42a 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
@@ -16,4 +16,11 @@
 
 /**
  * ONOS GUI -- Topology Map Layer -- CSS file
- */
\ No newline at end of file
+ */
+/* --- Topo Map --- */
+
+path.topo-map {
+    stroke-width: 2px;
+    stroke: #f4f4f4;
+    fill: #e5e5e6;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
index 157a87b..adc0346 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
@@ -13,5 +13,11 @@
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 -->
-<svg:text xmlns:svg="http://www.w3.org/2000/svg">Map of Croatia</svg:text>
-<svg:path xmlns:svg="http://www.w3.org/2000/svg" d="m 187.50819,219.30177 -3.14986,-1.57795 z M 45.764161,56.635237 48.914029,55.022914 Z m 62.997349,-32.313055 6.29973,4.85593 6.29974,11.31816 v 11.300949 h 9.4496 l 12.59947,8.061616 6.29973,12.880483 v 8.039036 l 6.29974,14.448536 -3.14987,9.616908 -6.29973,12.80342 v 14.37787 l 3.14986,7.97587 -9.4496,3.18799 3.14987,9.55592 6.29973,4.77344 v 7.94906 l -6.29973,1.58881 3.14987,15.86987 6.29973,6.33869 v 6.33341 l 6.29974,1.58253 v 20.54314 h 6.29973 18.89921 l 3.14986,4.73289 v 1.57699 6.30469 l -3.14986,4.72511 6.29973,6.29564 v 1.57311 l 3.14987,7.8607 -9.4496,17.26536 h -9.44961 l -6.29973,4.70203 v 14.08899 l -6.29974,3.12741 v 15.61816 l -3.14986,6.23849 -22.04907,3.11737 -3.14987,7.78797 h -6.29974 l 9.44961,17.10623 -3.14987,6.21118 -6.29974,-1.55233 v 10.85988 l -6.29973,7.74786 -18.89921,-6.19768 v -20.17635 l -6.299731,-3.10867 v -6.22107 l -6.299735,-10.8988 -9.449602,-3.11675 v -4.67746 l -9.449602,-1.55978 -6.299735,-6.24224 -9.449602,-3.123 -9.449602,-12.5046 -3.149867,-14.09183 12.599469,12.52734 3.149868,-12.52734 -9.449602,-9.40886 6.299734,1.56894 v -7.84788 l -6.299734,1.57021 -6.299735,-9.4261 3.149867,-4.71738 V 228.7627 l 3.149868,-9.46093 6.299734,-3.15624 v -31.63431 l 6.299735,-7.92914 -3.149867,-6.34927 H 52.063896 V 155.9275 l 9.449602,-9.5519 -9.449602,-7.96914 h 12.599469 v -27.15822 l -12.599469,-6.40444 -6.299735,1.60162 V 82.385126 l 3.149868,-3.213886 6.299734,1.607116 3.149868,-8.039036 -12.59947,-9.658277 6.299735,-9.6708 -3.149867,-1.613022 6.299734,-11.300949 6.299735,-4.848528 v -6.469632 l 6.299735,-3.236933 v -8.098523 l 9.449602,-4.863368 3.149867,3.2426 v 14.574161 l 6.299735,3.234816 12.59947,-3.234816 z"></svg:path>
\ No newline at end of file
+<svg:desc xmlns:svg="http://www.w3.org/2000/svg">Map of {{map.id}} in SVG format</svg:desc>
+<svg:path class="topo-map"
+        *ngFor="let f of mapPathGenerator?.geodata.features"
+        xmlns:svg="http://www.w3.org/2000/svg"
+        [attr.d]="pathGenerator(f)">
+    <svg:title>{{ f.id }}</svg:title>
+</svg:path>
+
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
index e1000c8..ab73820 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
@@ -16,25 +16,45 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MapSvgComponent } from './mapsvg.component';
+import {HttpClient} from '@angular/common/http';
+import {from} from 'rxjs';
+import {LogService} from 'gui2-fw-lib';
+
+class MockHttpClient {
+    get() {
+        return from(['{"id":"app","icon":"nav_apps","cat":"PLATFORM","label":"Applications"}']);
+    }
+
+    subscribe() {}
+}
 
 describe('MapSvgComponent', () => {
-  let component: MapSvgComponent;
-  let fixture: ComponentFixture<MapSvgComponent>;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: MapSvgComponent;
+    let fixture: ComponentFixture<MapSvgComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ MapSvgComponent ]
-    })
-    .compileComponents();
-  }));
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MapSvgComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+        TestBed.configureTestingModule({
+            declarations: [ MapSvgComponent ],
+            providers: [
+                { provide: LogService, useValue: logSpy },
+                { provide: HttpClient, useClass: MockHttpClient },
+            ]
+        })
+        .compileComponents();
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MapSvgComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
index 2de6c12..a10cf4c 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
@@ -13,18 +13,206 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, OnInit } from '@angular/core';
+import {
+    Component,
+    Input,
+    OnChanges,
+    SimpleChanges
+} from '@angular/core';
+import { MapObject } from '../maputils';
+import {LogService} from 'gui2-fw-lib';
+import {HttpClient} from '@angular/common/http';
+import * as d3 from 'd3';
+import * as topojson from 'topojson-client';
+
+const BUNDLED_URL_PREFIX = 'data/map/';
+
+/**
+ * Model of the transform attribute of a topojson file
+ */
+interface TopoDataTransform {
+    scale: number[];
+    translate: number[];
+}
+
+/**
+ * Model of the Generator setting for D3 GEO
+ */
+interface GeneratorSettings {
+    objectTag: string;
+    projection: Object;
+    logicalSize: number;
+    mapFillScale: number;
+}
+
+/**
+ * Model of the Path Generator
+ */
+interface PathGenerator {
+    geodata: FeatureCollection;
+    pathgen: (Feature) => string;
+    settings: GeneratorSettings;
+}
+
+/**
+ * Model of the Feature returned prom topojson library
+ */
+interface Feature {
+    geometry: Object;
+    id: string;
+    properties: Object;
+    type: string;
+}
+
+/**
+ * Model of the Features Collection returned by the topojson.features function
+ */
+interface FeatureCollection {
+    type: string;
+    features: Feature[];
+}
+
+/**
+ * Model of the topojson file
+ */
+interface TopoData {
+    type: string; // Usually "Topology"
+    objects: Object; // Can be a list of countries or individual countries
+    arcs: number[][][]; // Coordinates
+    bbox: number[]; // Bounding box
+    transform: TopoDataTransform; // scale and translate
+}
+
+/**
+ * Default settings for the path generator for TopoJson
+ */
+const DEFAULT_GEN_SETTINGS: GeneratorSettings = <GeneratorSettings>{
+    objectTag: 'states',
+    projection: d3.geoMercator(),
+    logicalSize: 1000,
+    mapFillScale: .95,
+};
 
 @Component({
     selector: '[onos-mapsvg]',
     templateUrl: './mapsvg.component.html',
     styleUrls: ['./mapsvg.component.css']
 })
-export class MapSvgComponent implements OnInit {
+export class MapSvgComponent implements  OnChanges {
+    @Input() map: MapObject = <MapObject>{id: 'none'};
 
-    constructor() { }
+    cache = new Map<string, TopoData>();
+    topodata: TopoData;
+    mapPathGenerator: PathGenerator;
 
-    ngOnInit() {
+    constructor(
+        private log: LogService,
+        private httpClient: HttpClient,
+    ) {
+        this.log.debug('MapSvgComponent constructed');
     }
 
+    static getUrl(id: string): string {
+        if (id && id[0] === '*') {
+            return BUNDLED_URL_PREFIX + id.slice(1) + '.topojson';
+        }
+        return id + '.topojson';
+    }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        this.log.debug('Change detected', changes);
+        if (changes['map']) {
+            const map: MapObject = <MapObject>(changes['map'].currentValue);
+            if (map.id) {
+                if (this.cache.get(map.id)) {
+                    this.topodata = this.cache.get(map.id);
+                } else {
+                    this.httpClient
+                        .get(MapSvgComponent.getUrl(map.filePath))
+                        .subscribe((topoData: TopoData) => {
+                            this.mapPathGenerator = this.handleTopoJson(map, topoData);
+                            this.log.debug('Path Generated for', map.id,
+                                'from', MapSvgComponent.getUrl(map.filePath));
+                        });
+                }
+            }
+        }
+    }
+
+    /**
+     * Wrapper for the path generator function
+     * @param feature The county or state within the map
+     */
+    pathGenerator(feature: Feature): string {
+        return this.mapPathGenerator.pathgen(feature);
+    }
+
+    /**
+     * Handle the topojson file stream as it arrives back from the server
+     *
+     * The topojson library converts the topojson file in to a FeatureCollection
+     * d3.geo then further converts this in to a Path
+     *
+     * @param map The Map chosen in the GUI
+     * @param topoData The data in the TopoJson file
+     */
+    handleTopoJson(map: MapObject, topoData: TopoData): PathGenerator {
+        this.topodata = topoData;
+        this.cache.set(map.id, topoData);
+        this.log.debug('Map retrieved', topoData);
+
+        const topoObject = topoData.objects[map.id];
+        const geoData: FeatureCollection = <FeatureCollection>topojson.feature(topoData, topoObject);
+        this.log.debug('Map retrieved', topoData, geoData);
+
+        const settings: GeneratorSettings = Object.assign({}, DEFAULT_GEN_SETTINGS);
+        const path = d3.geoPath().projection(settings.projection);
+        this.rescaleProjection(
+            settings.projection,
+            settings.mapFillScale,
+            settings.logicalSize,
+            path,
+            geoData);
+        this.log.debug('Scale adjusted');
+
+        return <PathGenerator>{
+            geodata: geoData,
+            pathgen: path,
+            settings: settings
+        };
+    }
+
+    /**
+     * Adjust projection scale and translation to fill the view
+     * with the map
+     * @param proj
+     * @param mfs
+     * @param dim
+     * @param path
+     * @param geoData
+     * @param adjustScale
+     */
+    rescaleProjection(proj: any, mfs: number, dim: number, path: any,
+                      geoData: FeatureCollection, adjustScale: number = 1.0) {
+        // start with unit scale, no translation..
+        proj.scale(1).translate([0, 0]);
+
+        // figure out dimensions of map data..
+        const b = path.bounds(geoData);
+        const x1 = b[0][0];
+        const y1 = b[0][1];
+        const x2 = b[1][0];
+        const y2 = b[1][1];
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+        const x = (x1 + x2) / 2;
+        const y = (y1 + y2) / 2;
+
+        // size map to 95% of minimum dimension to fill space..
+        const s = (mfs / Math.min(dx / dim, dy / dim)) * adjustScale;
+        const t = [dim / 2 - s * x, dim / 2 - s * y];
+
+        // set new scale, translation on the projection..
+        proj.scale(s).translate(t);
+    }
 }
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/maputils.ts b/web/gui2/src/main/webapp/app/view/topology/layer/maputils.ts
new file mode 100644
index 0000000..45c3140
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/maputils.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2019-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface MapObject {
+    id: string;
+    description: string;
+    filePath: string;
+    scale: number;
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts
index f298bf5..23d75c5 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.spec.ts
@@ -15,26 +15,51 @@
  */
 import { ZoomableDirective } from './zoomable.directive';
 import {inject, TestBed} from '@angular/core/testing';
-import {LogService, ConsoleLoggerService} from 'gui2-fw-lib';
+import {LogService, ConsoleLoggerService, FnService} from 'gui2-fw-lib';
 import {ElementRef} from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
 
 describe('ZoomableDirective', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
     let log: LogService;
     let mockWindow: Window;
 
     beforeEach(() => {
         log = new ConsoleLoggerService();
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
 
         mockWindow = <any>{
             navigator: {
                 userAgent: 'HeadlessChrome',
                 vendor: 'Google Inc.'
+            },
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
             }
         };
 
+        fs = new FnService(ar, log, mockWindow);
+
         TestBed.configureTestingModule({
             providers: [ZoomableDirective,
-                {provide: LogService, useValue: log},
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: log },
+                { provide: 'Window', useValue: mockWindow },
                 { provide: ElementRef, useValue: mockWindow }
             ]
         });
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts
index bd69db1..0484384 100644
--- a/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/zoomable.directive.ts
@@ -13,46 +13,107 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {Directive, ElementRef, Input, OnChanges} from '@angular/core';
-import {LogService} from 'gui2-fw-lib';
+import {
+    Directive,
+    ElementRef,
+    Input,
+    OnChanges,
+    OnInit,
+    SimpleChanges
+} from '@angular/core';
+import {LogService, PrefsService} from 'gui2-fw-lib';
 import * as d3 from 'd3';
 
+
+/**
+ * Model of the Zoom preferences
+ */
+export interface TopoZoomPrefs {
+    tx: number;
+    ty: number;
+    sc: number;
+}
+
+const TOPO_ZOOM_PREFS = 'topo_zoom';
+
+const ZOOM_PREFS_DEFAULT: TopoZoomPrefs = <TopoZoomPrefs>{
+    tx: 0, ty: 0, sc: 1.0
+};
+
+/**
+ * A directive that takes care of Zooming and Panning the Topology view
+ *
+ * It wraps the D3 Pan and Zoom functionality
+ * See https://github.com/d3/d3-zoom/blob/master/README.md
+ */
 @Directive({
   selector: '[onosZoomableOf]'
 })
-export class ZoomableDirective implements OnChanges {
+export class ZoomableDirective implements OnChanges, OnInit {
     @Input() zoomableOf: ElementRef;
 
+    zoom: any; // The d3 zoom behaviour
+
     constructor(
         private _element: ElementRef,
         private log: LogService,
-    ) {}
+        private ps: PrefsService
+    ) {
+        const container = d3.select(this._element.nativeElement);
+
+        const zoomed = () => {
+            const transform = d3.event.transform;
+            container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
+            this.updateZoomState(transform.x, transform.y, transform.k);
+        };
+
+        this.zoom = d3.zoom().on('zoom', zoomed);
+    }
+
+    ngOnInit() {
+        const zoomState: TopoZoomPrefs = this.ps.getPrefs(TOPO_ZOOM_PREFS, ZOOM_PREFS_DEFAULT);
+        const svg = d3.select(this.zoomableOf);
+
+        svg.call(this.zoom);
+
+        svg.transition().call(this.zoom.transform,
+            d3.zoomIdentity.translate(zoomState.tx, zoomState.ty).scale(zoomState.sc));
+        this.log.debug('Loaded topo_zoom_prefs',
+            zoomState.tx, zoomState.ty, zoomState.sc);
+
+    }
+
+    /**
+     * Updates the cache of zoom preferences locally and onwards to the PrefsService
+     */
+    updateZoomState(x: number, y: number, scale: number): void {
+        this.ps.setPrefs(TOPO_ZOOM_PREFS, <TopoZoomPrefs>{
+            tx: x,
+            ty: y,
+            sc: scale
+        });
+    }
 
     /**
      * If the input object is changed then re-establish the zoom
      */
-    ngOnChanges() {
-        let zoomed, zoom;
-
-        const svg = d3.select(this.zoomableOf);
-        const container = d3.select(this._element.nativeElement);
-
-        zoomed = () => {
-            const transform = d3.event.transform;
-            container.attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')');
-        };
-
-        zoom = d3.zoom().on('zoom', zoomed);
-        svg.call(zoom);
-        this.log.debug('Applying zoomable behaviour on', this.zoomableOf, this._element.nativeElement);
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['zoomableOf']) {
+            const svg = d3.select(changes['zoomableOf'].currentValue);
+            svg.call(this.zoom);
+            this.log.debug('Applying zoomable behaviour on', this.zoomableOf, this._element.nativeElement);
+        }
     }
 
     /**
      * Reset the zoom when the R key is pressed when in Topology view
+     *
+     * Animated to run over 750ms
      */
     resetZoom(): void {
-        const container = d3.select(this._element.nativeElement);
-        container.attr('transform', 'translate(0,0) scale(1.0)');
+        const svg = d3.select(this.zoomableOf);
+        svg.transition().duration(750).call(this.zoom.transform, d3.zoomIdentity);
+        this.updateZoomState(0, 0, 1.0);
         this.log.debug('Pan to 0,0 and zoom to 1.0');
     }
 
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.css
new file mode 100644
index 0000000..59c0d78
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2019-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Map Selector -- CSS file
+ */
+.dialog h2 {
+    margin: 0;
+    word-wrap: break-word;
+    display: inline-block;
+    width: 210px;
+    vertical-align: middle;
+}
+
+.dialog .dialog-button {
+    display: inline-block;
+    cursor: pointer;
+    height: 20px;
+    padding: 6px 8px 2px 8px;
+    margin: 4px;
+    float: right;
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.html
new file mode 100644
index 0000000..b3a4224
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.html
@@ -0,0 +1,33 @@
+<!--
+~ Copyright 2019-present Open Networking Foundation
+~
+~ Licensed under the Apache License, Version 2.0 (the "License");
+~ you may not use this file except in compliance with the License.
+~ You may obtain a copy of the License at
+~
+~     http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+-->
+<div id="topo-p-dialog"
+     class="floatpanel dialog topo-p"
+     style="opacity: 1; left: 20px; width: 300px;">
+    <div class="header">
+        <h2>{{ lionFn('title_select_map') }}</h2>
+    </div>
+    <div class="map-list">
+        <form [formGroup]="form">
+            <select formControlName="mapid">
+                <option *ngFor="let o of mapSelectorResponse.order" [ngValue]="o">{{ mapSelectorResponse.maps[o].description }}</option>
+            </select>
+        </form>
+    </div>
+    <div class="footer">
+        <div class="dialog-button" (click)="choice(form.value)">{{ lionFn('ok') }}</div>
+        <div class="dialog-button" (click)="choice(undefined)">{{ lionFn('close') }}</div>
+    </div>
+</div>
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.spec.ts
new file mode 100644
index 0000000..4d95361
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.spec.ts
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2019-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapSelectorComponent } from './mapselector.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ActivatedRoute, Params} from '@angular/router';
+import {of} from 'rxjs';
+import {FnService, LogService} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+describe('MapSelectorComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: MapSelectorComponent;
+    let fixture: ComponentFixture<MapSelectorComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule,
+                ReactiveFormsModule
+            ],
+            declarations: [ MapSelectorComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        })
+        .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(MapSelectorComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
+
+// Expecting WebSocket request and response similar to:
+//
+// {"event":"mapSelectorRequest","payload":{}}
+//
+// {
+//     "event": "mapSelectorResponse",
+//     "payload": {
+//     "order": ["australia", "americas", "n_america", "s_america", "usa", "bayareaGEO",
+//     "europe", "italy", "uk", "japan", "s_korea", "taiwan", "africa", "oceania", "asia"],
+//         "maps": {
+//         "australia": {
+//             "id": "australia",
+//             "description": "Australia",
+//             "filePath": "*australia",
+//             "scale": 1.0
+//         },
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.ts
new file mode 100644
index 0000000..c97e0ca
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.component.ts
@@ -0,0 +1,87 @@
+
+import {
+    Component, EventEmitter, OnChanges,
+    OnDestroy,
+    OnInit, Output, SimpleChanges,
+} from '@angular/core';
+import {
+    DetailsPanelBaseImpl,
+    FnService,
+    LionService, LoadingService,
+    LogService,
+    WebSocketService
+} from 'gui2-fw-lib';
+import {FormControl, FormGroup} from '@angular/forms';
+import { MapObject } from '../../layer/maputils';
+
+interface MapSelection {
+    order: string[];
+    maps: Object[];
+}
+
+@Component({
+    selector: 'onos-mapselector',
+    templateUrl: './mapselector.component.html',
+    styleUrls: ['./mapselector.component.css', './mapselector.theme.css', '../../topology.common.css']
+})
+export class MapSelectorComponent extends DetailsPanelBaseImpl implements OnInit, OnDestroy {
+    @Output() chosenMap = new EventEmitter<MapObject>();
+    lionFn; // Function
+    mapSelectorResponse: MapSelection = <MapSelection>{
+        order: [],
+        maps: []
+    };
+    form = new FormGroup({
+        mapid: new FormControl(this.mapSelectorResponse.order[0]),
+    });
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ls: LoadingService,
+        protected wss: WebSocketService,
+        private lion: LionService
+    ) {
+        super(fs, ls, log, wss, 'topo');
+
+        if (this.lion.ubercache.length === 0) {
+            this.lionFn = this.dummyLion;
+            this.lion.loadCbs.set('topoms', () => this.doLion());
+        } else {
+            this.doLion();
+        }
+
+        this.log.debug('Topo MapSelectorComponent constructed');
+    }
+
+    ngOnInit() {
+        this.wss.bindHandlers(new Map<string, (data) => void>([
+            ['mapSelectorResponse', (data) => {
+                this.mapSelectorResponse = data;
+                this.form.setValue({'mapid': this.mapSelectorResponse.order[0]});
+            }
+            ]
+        ]));
+        this.wss.sendEvent('mapSelectorRequest', {});
+        this.log.debug('Topo MapSelectorComponent initialized');
+    }
+
+    /**
+     * When the component is being unloaded then unbind the WSS handler.
+     */
+    ngOnDestroy(): void {
+        this.wss.unbindHandlers(['mapSelectorResponse']);
+        this.log.debug('Topo MapSelectorComponent destroyed');
+    }
+
+    /**
+     * Read the LION bundle for Details panel and set up the lionFn
+     */
+    doLion() {
+        this.lionFn = this.lion.bundle('core.view.Topo');
+    }
+
+    choice(mapid: Object): void {
+        this.chosenMap.emit(<MapObject>this.mapSelectorResponse.maps[mapid['mapid']]);
+    }
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.theme.css
new file mode 100644
index 0000000..0ef1538
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/mapselector/mapselector.theme.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2019-present Open Networking Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * ONOS GUI -- Topology Map Selector theme -- CSS file
+ */
+
+/*.light */
+.dialog .dialog-button {
+    background-color: #518ecc;
+    color: white;
+}
+
+
+/* ========== DARK Theme ========== */
+
+.dark .dialog .dialog-button {
+    background-color: #345e85;
+    color: #cccccd;
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
index 18f9687..fa7fd01 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
@@ -14,7 +14,7 @@
 ~ limitations under the License.
 -->
 <div id="toolbar-topo2-toolbar" class="floatpanel toolbar" [@toolbarState]="on"
-     style="opacity: 1; left: 0px; width: 261px; top: auto; bottom: 10px;">
+     style="opacity: 1; left: 0px; width: 286px; top: auto; bottom: 10px;">
     <div class="tbar-arrow" (click)="on =! on">
         <onos-icon [iconSize]="10" [iconId]="on?'triangleLeft':'triangleRight'"></onos-icon>
     </div>
@@ -41,6 +41,9 @@
         <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-bkgrnd-tog" (click)="buttonClicked('bkgrnd-tog')">
             <onos-icon [iconSize]="25" iconId="m_map" [toolTip]="lionFn('tbtt_tog_map')" classes="toggleButton selected" [classes]="['toggleButton', backgroundVisible?'selected':'']"></onos-icon>
         </div>
+        <div class="toggleButton" id="toolbar-topo2-toolbar-topo2-bkgrnd-sel" (click)="buttonClicked('bkgrnd-sel')">
+            <onos-icon [iconSize]="25" iconId="m_selectMap" [toolTip]="lionFn('tbtt_sel_map')" classes="button"></onos-icon>
+        </div>
     </div>
     <br>
     <div class="tbar-row">
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
index f781364..ed9e2ee 100644
--- a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
@@ -30,6 +30,7 @@
 export const OFFLINE_TOGGLE = 'offline-tog';
 export const PORTS_TOGGLE = 'ports-tog';
 export const BKGRND_TOGGLE = 'bkgrnd-tog';
+export const BKGRND_SELECT = 'bkgrnd-sel';
 export const CYCLELABELS_BTN = 'cycleLabels-btn';
 export const CYCLEHOSTLABEL_BTN = 'cycleHostLabel-btn';
 export const RESETZOOM_BTN = 'resetZoom-btn';
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology.module.ts b/web/gui2/src/main/webapp/app/view/topology/topology.module.ts
index e7fe739..b6c79a1 100644
--- a/web/gui2/src/main/webapp/app/view/topology/topology.module.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/topology.module.ts
@@ -34,6 +34,8 @@
     DeviceNodeSvgComponent,
     HostNodeSvgComponent, LinkSvgComponent,
 } from './layer/forcesvg/visuals';
+import { MapSelectorComponent } from './panel/mapselector/mapselector.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 /**
  * ONOS GUI -- Topology View Module
@@ -46,6 +48,8 @@
 @NgModule({
     imports: [
         CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
         TopologyRoutingModule,
         Gui2FwLibModule
     ],
@@ -64,7 +68,8 @@
         LinkSvgComponent,
         DeviceNodeSvgComponent,
         HostNodeSvgComponent,
-        SubRegionNodeSvgComponent
+        SubRegionNodeSvgComponent,
+        MapSelectorComponent
     ],
     providers: [
         TopologyService
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
      */
diff --git a/web/gui2/src/main/webapp/data/img/apple-touch-icon.png b/web/gui2/src/main/webapp/data/img/apple-touch-icon.png
deleted file mode 100644
index 3bf5eb6..0000000
--- a/web/gui2/src/main/webapp/data/img/apple-touch-icon.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/dropdown-icon.png b/web/gui2/src/main/webapp/data/img/dropdown-icon.png
deleted file mode 100644
index eb57f17..0000000
--- a/web/gui2/src/main/webapp/data/img/dropdown-icon.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-01.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-01.png
deleted file mode 100644
index 5f209a3..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-01.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-02.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-02.png
deleted file mode 100644
index 18f371b..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-02.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-03.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-03.png
deleted file mode 100644
index 00eb3a8..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-03.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-04.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-04.png
deleted file mode 100644
index 5977f6e..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-04.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-05.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-05.png
deleted file mode 100644
index 1da5d28..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-05.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-06.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-06.png
deleted file mode 100644
index 871b9a6..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-06.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-07.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-07.png
deleted file mode 100644
index 7538b84..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-07.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-08.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-08.png
deleted file mode 100644
index a7f3233..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-08.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-09.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-09.png
deleted file mode 100644
index 8c311df..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-09.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-10.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-10.png
deleted file mode 100644
index cf59c93..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-10.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-11.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-11.png
deleted file mode 100644
index e18c93a..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-11.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-12.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-12.png
deleted file mode 100644
index c63c240..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-12.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-13.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-13.png
deleted file mode 100644
index a6b3c7a..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-13.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-14.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-14.png
deleted file mode 100644
index 046a132..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-14.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-15.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-15.png
deleted file mode 100644
index c22108f..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-15.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/dark/load-16.png b/web/gui2/src/main/webapp/data/img/loading/dark/load-16.png
deleted file mode 100644
index b685ad5..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/dark/load-16.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-01.png b/web/gui2/src/main/webapp/data/img/loading/light/load-01.png
deleted file mode 100644
index 5cfedd6..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-01.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-02.png b/web/gui2/src/main/webapp/data/img/loading/light/load-02.png
deleted file mode 100644
index ec726fa..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-02.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-03.png b/web/gui2/src/main/webapp/data/img/loading/light/load-03.png
deleted file mode 100644
index d815032..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-03.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-04.png b/web/gui2/src/main/webapp/data/img/loading/light/load-04.png
deleted file mode 100644
index 6b97e0e..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-04.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-05.png b/web/gui2/src/main/webapp/data/img/loading/light/load-05.png
deleted file mode 100644
index 7b20749..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-05.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-06.png b/web/gui2/src/main/webapp/data/img/loading/light/load-06.png
deleted file mode 100644
index 4926bcc..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-06.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-07.png b/web/gui2/src/main/webapp/data/img/loading/light/load-07.png
deleted file mode 100644
index 27c95fd..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-07.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-08.png b/web/gui2/src/main/webapp/data/img/loading/light/load-08.png
deleted file mode 100644
index 0709c12..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-08.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-09.png b/web/gui2/src/main/webapp/data/img/loading/light/load-09.png
deleted file mode 100644
index 8318b43..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-09.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-10.png b/web/gui2/src/main/webapp/data/img/loading/light/load-10.png
deleted file mode 100644
index 57dd853..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-10.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-11.png b/web/gui2/src/main/webapp/data/img/loading/light/load-11.png
deleted file mode 100644
index 549c3c2..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-11.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-12.png b/web/gui2/src/main/webapp/data/img/loading/light/load-12.png
deleted file mode 100644
index 17bb059..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-12.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-13.png b/web/gui2/src/main/webapp/data/img/loading/light/load-13.png
deleted file mode 100644
index b52e5d7..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-13.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-14.png b/web/gui2/src/main/webapp/data/img/loading/light/load-14.png
deleted file mode 100644
index 78f6183f7..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-14.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-15.png b/web/gui2/src/main/webapp/data/img/loading/light/load-15.png
deleted file mode 100644
index e29dbc5..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-15.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/loading/light/load-16.png b/web/gui2/src/main/webapp/data/img/loading/light/load-16.png
deleted file mode 100644
index 74c7933..0000000
--- a/web/gui2/src/main/webapp/data/img/loading/light/load-16.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/masthead-logo-mojo.png b/web/gui2/src/main/webapp/data/img/masthead-logo-mojo.png
deleted file mode 100644
index 969c5fb..0000000
--- a/web/gui2/src/main/webapp/data/img/masthead-logo-mojo.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/nav-menu-mojo.png b/web/gui2/src/main/webapp/data/img/nav-menu-mojo.png
deleted file mode 100644
index d8cd6d5..0000000
--- a/web/gui2/src/main/webapp/data/img/nav-menu-mojo.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/nav-menu.png b/web/gui2/src/main/webapp/data/img/nav-menu.png
deleted file mode 100644
index 07bbcf1..0000000
--- a/web/gui2/src/main/webapp/data/img/nav-menu.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/onos-logo-fliprotate.png b/web/gui2/src/main/webapp/data/img/onos-logo-fliprotate.png
deleted file mode 100644
index 7368017..0000000
--- a/web/gui2/src/main/webapp/data/img/onos-logo-fliprotate.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/onos-logo.lg.png b/web/gui2/src/main/webapp/data/img/onos-logo.lg.png
deleted file mode 100644
index afbd438..0000000
--- a/web/gui2/src/main/webapp/data/img/onos-logo.lg.png
+++ /dev/null
Binary files differ
diff --git a/web/gui2/src/main/webapp/data/img/onos-logo.png b/web/gui2/src/main/webapp/data/img/onos-logo.png
deleted file mode 100644
index 8688cd6..0000000
--- a/web/gui2/src/main/webapp/data/img/onos-logo.png
+++ /dev/null
Binary files differ