Topo2: Change the map background according to the current layout payload

Change-Id: I4170857ee22faf61094ddb1021bbfd9a4b606cdf
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 0ab744b..ff595e7 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Map.js
@@ -41,7 +41,7 @@
         var prefs = currentMap(),
             mapId = prefs.mapid,
             mapFilePath = prefs.mapfilepath,
-            mapScale = prefs.mapscale,
+            mapScale = prefs.mapscale || 1,
             loadMap = ms.loadMapInto,
             promise, cfilter;
 
@@ -94,8 +94,8 @@
 
     function setMap(map) {
         ps.setPrefs('topo_mapid', map);
-        setUpMap();
         opacifyMap(true);
+        return setUpMap();
     }
 
     // TODO: -- START -- Move to dedicated module
@@ -120,6 +120,14 @@
     }
     // TODO: -- END -- Move to dedicated module
 
+    function show() {
+        sus.visible(mapG, true);
+    }
+
+    function hide() {
+        sus.visible(mapG, false);
+    }
+
     function toggle(x) {
         return _togSvgLayer(x, mapG, 'bg', 'background map');
     }
@@ -156,7 +164,11 @@
 
                 return {
                     init: init,
+                    setMap: setMap,
                     openMapSelection: openMapSelection,
+
+                    show: show,
+                    hide: hide,
                     toggle: toggle,
 
                     resetZoom: resetZoom
diff --git a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
index ba1a8c4..bb8e0db 100644
--- a/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
+++ b/web/gui/src/main/webapp/app/view/topo2/topo2Region.js
@@ -35,8 +35,9 @@
     .factory('Topo2RegionService', [
         '$log', 'Topo2Model', 'Topo2SubRegionService', 'Topo2DeviceService',
         'Topo2HostService', 'Topo2LinkService', 'Topo2ZoomService', 'Topo2DetailsPanelService',
-        'Topo2BreadcrumbService', 'Topo2ViewController', 'Topo2SpriteLayerService',
-        function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController, t2sls) {
+        'Topo2BreadcrumbService', 'Topo2ViewController', 'Topo2SpriteLayerService', 'Topo2MapService',
+        'Topo2MapConfigService',
+        function ($log, _Model_, t2sr, t2ds, t2hs, t2ls, t2zs, t2dps, t2bcs, ViewController, t2sls, t2ms, t2mcs) {
 
             Model = _Model_;
 
@@ -47,7 +48,23 @@
                 },
                 addLayout: function (data) {
 
-                    // TODO: Dynamically change the Geo Map from the layout data
+                    var _this = this;
+
+                    if (data.bgType === 'geo') {
+                        t2ms.setMap({
+                            mapid: data.bgId,
+
+                            // TODO: The following value will be specified in the Topo2CurrentLayout Payload
+                            mapfilepath: "*bayarea"
+                        }).then(function () {
+                            _.each(_this.regionNodes(), function (node) {
+                                node.resetPosition();
+                            });
+                        });
+                        t2ms.show();
+                    } else {
+                        t2ms.hide();
+                    }
 
                     if (data.bgType === 'grid') {
                         t2sls.loadLayout(data.bgId);