Simon Hunt
Committed by Gerrit Code Review

GUI - topo view: enhancements to provide tinting of maps.

Change-Id: Ie369f4eee4c28e70ef86852cfbeea78fea8fae4f
......@@ -56,13 +56,13 @@
deferredProjection.resolve(gen.settings.projection);
var path = mapLayer.selectAll('path')
mapLayer.selectAll('path')
.data(gen.geodata.features)
.enter()
.append('path')
.attr('d', gen.pathgen);
opts.fill && path.style('fill', opts.fill);
reshade(opts.shading);
});
return deferredProjection.promise;
}
......@@ -78,7 +78,7 @@
// }
// });
function loadMapRegionInto(mapLayer, filterOpts) {
function loadMapRegionInto(mapLayer, opts) {
var promise = gds.fetchTopoData("*countries"),
deferredProjection = $q.defer();
......@@ -94,14 +94,14 @@
pathGen = d3.geo.path().projection(proj),
data = promise.topodata,
features = topojson.feature(data, data.objects.countries).features,
country = features.filter(filterOpts.countryFilter),
country = features.filter(opts.countryFilter),
countryFeature = {
type: 'FeatureCollection',
features: country
},
path = d3.geo.path().projection(proj);
gds.rescaleProjection(proj, 0.95, 1000, path, countryFeature);
gds.rescaleProjection(proj, 0.95, 1000, path, countryFeature, opts.adjustScale);
deferredProjection.resolve(proj);
......@@ -110,10 +110,31 @@
.enter()
.append('path').classed('country', true)
.attr('d', pathGen);
reshade(opts.shading);
});
return deferredProjection.promise;
}
function reshade(sh) {
var p = sh && sh.palette,
svg, paths, stroke, fill, bg;
if (sh) {
stroke = p.outline;
fill = sh.flip ? p.sea : p.land;
bg = sh.flip ? p.land : p.sea;
svg = d3.select('#ov-topo').select('svg');
paths = d3.select('#topo-map').selectAll('path');
svg.style('background-color', bg);
paths.attr({
stroke: stroke,
fill: fill
});
}
}
angular.module('onosSvg')
.factory('MapService', ['$log', '$q', 'FnService', 'GeoDataService',
function (_$log_, _$q_, _fs_, _gds_) {
......@@ -124,7 +145,8 @@
return {
loadMapRegionInto: loadMapRegionInto,
loadMapInto: loadMapInto
loadMapInto: loadMapInto,
reshade: reshade
};
}]);
......
......@@ -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...
......