GUI - topo view: enhancements to provide tinting of maps.
Change-Id: Ie369f4eee4c28e70ef86852cfbeea78fea8fae4f
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index a78647d..56be9f6 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -29,14 +29,14 @@
];
// references to injected services etc.
- var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps,
+ var $scope, $log, $cookies, fs, ks, zs, gs, ms, sus, flash, wss, ps, th,
tds, tes, tfs, tps, tis, tss, tls, tts, tos, fltr, ttbs, ttip, tov;
// DOM elements
var ovtopo, svg, defs, zoomLayer, mapG, spriteG, forceG, noDevsLayer;
// Internal state
- var zoomer, actionMap;
+ var zoomer, actionMap, themeListener;
// --- Short Cut Keys ------------------------------------------------
@@ -345,6 +345,27 @@
}
};
+ var tintOn = 0,
+ shadeFlip = 0,
+ shadePalette = {
+ light: {
+ sea: 'aliceblue',
+ land: 'white',
+ outline: '#ddd'
+ },
+ dark: {
+ sea: '#001830',
+ land: '#232331',
+ outline: '#3a3a3a'
+ }
+ };
+
+ function shading() {
+ return tintOn ? {
+ palette: shadePalette[th.theme()],
+ flip: shadeFlip
+ } : '';
+ }
function setUpMap($loc) {
var qp = $loc.search(),
@@ -355,27 +376,53 @@
ms1 = qp.mapscale,
ms2 = pr && pr.scale,
mapScale = ms1 || ms2 || 1,
+ t1 = qp.tint,
+ t2 = pr && pr.tint,
+ tint = t1 || t2 || 'off',
promise,
cfilter;
+ tintOn = tint === 'on' ? 1 : 0;
+
mapG = zoomLayer.append('g').attr('id', 'topo-map');
if (mapId === 'usa') {
- promise = ms.loadMapInto(mapG, '*continental_us');
+ shadeFlip = 0;
+ promise = ms.loadMapInto(mapG, '*continental_us', {
+ adjustScale: mapScale,
+ shading: shading()
+ });
} else if (mapId === 'bayarea') {
- // TODO: be consistent about propagating options to other cases
+ shadeFlip = 1;
promise = ms.loadMapInto(mapG, '*bayarea', {
objectTag: 'bayareaGEO',
adjustScale: mapScale,
- fill: 'aliceblue'
+ shading: shading()
});
} else {
+ shadeFlip = 0;
cfilter = countryFilters[mapId] || countryFilters.world;
- promise = ms.loadMapRegionInto(mapG, { countryFilter: cfilter });
+ promise = ms.loadMapRegionInto(mapG, {
+ countryFilter: cfilter,
+ adjustScale: mapScale,
+ shading: shading()
+ });
}
- ps.setPrefs('topo_mapid', { id: mapId, scale: mapScale });
+ ps.setPrefs('topo_mapid', { id: mapId, scale: mapScale, tint: tint });
return promise;
}
+ // set up theme listener to re-shade the map when required.
+ function mapShader(on) {
+ if (on) {
+ themeListener = th.addListener(function () {
+ ms.reshade(shading());
+ });
+ } else {
+ th.removeListener(themeListener);
+ themeListener = null;
+ }
+ }
+
function opacifyMap(b) {
mapG.transition()
.duration(1000)
@@ -448,7 +495,8 @@
.controller('OvTopoCtrl', ['$scope', '$log', '$location', '$timeout',
'$cookies', 'FnService', 'MastService', 'KeyService', 'ZoomService',
'GlyphService', 'MapService', 'SvgUtilService', 'FlashService',
- 'WebSocketService', 'PrefsService', 'TopoDialogService',
+ 'WebSocketService', 'PrefsService', 'ThemeService',
+ 'TopoDialogService',
'TopoEventService', 'TopoForceService', 'TopoPanelService',
'TopoInstService', 'TopoSelectService', 'TopoLinkService',
'TopoTrafficService', 'TopoObliqueService', 'TopoFilterService',
@@ -456,7 +504,8 @@
'TopoOverlayService',
function (_$scope_, _$log_, $loc, $timeout, _$cookies_, _fs_, mast, _ks_,
- _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _tds_, _tes_,
+ _zs_, _gs_, _ms_, _sus_, _flash_, _wss_, _ps_, _th_,
+ _tds_, _tes_,
_tfs_, _tps_, _tis_, _tss_, _tls_, _tts_, _tos_, _fltr_,
_ttbs_, tspr, _ttip_, _tov_) {
var params = $loc.search(),
@@ -484,6 +533,7 @@
flash = _flash_;
wss = _wss_;
ps = _ps_;
+ th = _th_;
tds = _tds_;
tes = _tes_;
tfs = _tfs_;
@@ -523,6 +573,7 @@
tis.destroyInst();
tfs.destroyForce();
ttbs.destroyToolbar();
+ mapShader(false);
});
// svg layer and initialization of components
@@ -548,6 +599,7 @@
flash.enable(false);
toggleMap(prefsState.bg);
flash.enable(true);
+ mapShader(true);
// now we have the map projection, we are ready for
// the server to send us device/host data...