diff options
author | Thomas Steur <tsteur@users.noreply.github.com> | 2018-11-26 07:02:37 +0300 |
---|---|---|
committer | diosmosis <diosmosis@users.noreply.github.com> | 2018-11-26 07:02:37 +0300 |
commit | a7e06ca4b4607bb18f8faf190b4dd7c960c8e109 (patch) | |
tree | d3d6adf9eea7ecb3b8699cae94eac05398870f73 /plugins/UserCountryMap/javascripts | |
parent | 295c532727e67913210298910a99c44c39b44120 (diff) |
Auto zoom real time and visitor map (#13687)
* auto zoom real time and visitor map
* add more zooms
Diffstat (limited to 'plugins/UserCountryMap/javascripts')
-rw-r--r-- | plugins/UserCountryMap/javascripts/realtime-map.js | 46 | ||||
-rw-r--r-- | plugins/UserCountryMap/javascripts/visitor-map.js | 21 |
2 files changed, 59 insertions, 8 deletions
diff --git a/plugins/UserCountryMap/javascripts/realtime-map.js b/plugins/UserCountryMap/javascripts/realtime-map.js index 5e616acd47..37431da68b 100644 --- a/plugins/UserCountryMap/javascripts/realtime-map.js +++ b/plugins/UserCountryMap/javascripts/realtime-map.js @@ -96,6 +96,7 @@ colorMode = 'default', currentMap = 'world', yesterday = false, + userHasZoomed = false, colorManager = piwik.ColorManager, colors = colorManager.getColors('realtime-map', ['white-bg', 'white-fill', 'black-bg', 'black-fill', 'visit-stroke', 'website-referrer-color', 'direct-referrer-color', 'search-referrer-color', @@ -139,7 +140,7 @@ method: 'Live.getLastVisitsDetails', filter_limit: maxVisits, showColumns: ['latitude', 'longitude', 'actions', 'lastActionTimestamp', - 'visitLocalTime', 'city', 'country', 'referrerType', 'referrerName', + 'visitLocalTime', 'city', 'country', 'countryCode', 'referrerType', 'referrerName', 'referrerTypeName', 'browserIcon', 'operatingSystemIcon', 'countryFlag', 'idVisit', 'actionDetails', 'continentCode', 'actions', 'searches', 'goalConversions', 'visitorId', 'userId'].join(','), @@ -474,6 +475,29 @@ else d = Math.ceil(dur / 3600) + ' ' + _.hours; $('.realTimeMap_timeSpan').html(d); + if (!userHasZoomed) { + // we only apply auto zoom when user has not zoomed manually + var usedContinents = []; + var usedCountries = []; + var aSymbol; + for (var z = 0; z < visitSymbols.symbols.length; z++) { + aSymbol = visitSymbols.symbols[z]; + if (aSymbol && aSymbol.data) { + if (aSymbol.data.continentCode && -1 === usedContinents.indexOf(aSymbol.data.continentCode)) { + usedContinents.push(aSymbol.data.continentCode); + } + if (aSymbol.data.countryCode && -1 === usedCountries.indexOf(aSymbol.data.countryCode)) { + usedCountries.push(aSymbol.data.countryCode); + } + } + } + + if (usedCountries.length === 1 && usedCountries[0] && usedCountries[0] !== 'unk') { + updateMap(UserCountryMap.ISO2toISO3[usedCountries[0].toUpperCase()], false); + } else if (usedContinents.length === 1 && usedContinents[0] && usedContinents[0] !== 'unk') { + updateMap(UserCountryMap.cont2cont[usedContinents[0]], false); + } + } } firstRun = false; } @@ -505,6 +529,7 @@ }, click: function (d, p, evt) { evt.stopPropagation(); + userHasZoomed = true; if (currentMap.length == 2){ // zoom to country updateMap(d.iso); } else if (currentMap != 'world') { // zoom out if zoomed in @@ -538,7 +563,14 @@ * updates the map view (after changing the zoom) * clears all existing timeouts */ - function updateMap(_map) { + function updateMap(_map, _storeSettings) { + if ('undefined' === typeof _storeSettings) { + _storeSettings = true; + } + if (_map && currentMap === _map && _map !== 'world') { + return; + } + clearTimeout(nextReqTimer); $.each(symbolFadeInTimer, function (i, t) { clearTimeout(t); @@ -549,14 +581,20 @@ } catch (e) {} currentMap = _map; _updateMap(currentMap + '.svg', initMap); - storeSettings(); + + if (_storeSettings) { + storeSettings(); + } } updateMap(location.hash && (location.hash == '#world' || location.hash.match(/^#[A-Z]{2,3}$/)) ? location.hash.substr(1) : 'world'); // TODO: restore last state // clicking on map background zooms out $('.RealTimeMap_map', this.$element).off('click').click(function () { - if (currentMap != 'world') updateMap('world'); + if (currentMap != 'world') { + userHasZoomed = true; + updateMap('world'); + } }); // secret gimmick shortcuts diff --git a/plugins/UserCountryMap/javascripts/visitor-map.js b/plugins/UserCountryMap/javascripts/visitor-map.js index 4df3681c8b..d2d1a1522c 100644 --- a/plugins/UserCountryMap/javascripts/visitor-map.js +++ b/plugins/UserCountryMap/javascripts/visitor-map.js @@ -67,7 +67,8 @@ cityHighlightLabelColor = colors['city-highlight-label-color'], citySelectedColor = colors['city-selected-color'], citySelectedLabelColor = colors['city-selected-label-color'], - regionLayerStrokeColor = colors['region-layer-stroke-color'] + regionLayerStrokeColor = colors['region-layer-stroke-color'], + hasUserZoomed = false; ; /* @@ -314,10 +315,12 @@ function initUserInterface() { // react to changes of country select $$('.userCountryMapSelectCountry').off('change').change(function () { + hasUserZoomed = true; updateState($$('.userCountryMapSelectCountry').val()); }); function zoomOut() { + hasUserZoomed = true; var t = self.lastSelected, tgt = 'world'; // zoom out to world per default.. if (t.length == 3 && UserCountryMap.ISO3toCONT[t] !== undefined) { @@ -344,6 +347,7 @@ if (self.lastSelected.length == 3) { if (self.mode != "city") { self.mode = "city"; + hasUserZoomed = true; updateState(self.lastSelected); } } @@ -356,6 +360,7 @@ if (self.mode != "region") { $$('.UserCountryMap-view-mode-buttons a').removeClass('activeIcon'); self.mode = "region"; + hasUserZoomed = true; updateState(self.lastSelected); } }); @@ -387,7 +392,6 @@ } var metric = $$('.userCountryMapSelectMetrics').val(); - // store current map state self.widget.dashboardWidget('setParameters', { lastMap: id, viewMode: self.mode, lastMetric: metric @@ -605,6 +609,7 @@ } else { tgt = UserCountryMap.ISO3toCONT[data.iso]; } + hasUserZoomed = true; updateState(tgt); } }); @@ -1053,6 +1058,7 @@ }, click: function (path, p, evt) { // add click events for surrounding countries evt.stopPropagation(); + hasUserZoomed = true; updateState(path.iso); }, tooltips: function (data) { @@ -1238,16 +1244,23 @@ var params = self.widget.dashboardWidget('getWidgetObject').parameters; self.mode = params && params.viewMode ? params.viewMode : 'region'; if (params && params.lastMetric) $$('.userCountryMapSelectMetrics').val(params.lastMetric); - //alert('updateState: '+params && params.lastMap ? params.lastMap : 'world'); - updateState(params && params.lastMap ? params.lastMap : 'world'); + // alert('updateState: '+params && params.lastMap ? params.lastMap : 'world'); // populate country select + var isoCodes = []; $.each(countryData, function (i, country) { if (!!country.iso) { + isoCodes.push(country.iso); countrySelect.append('<option value="' + country.iso + '">' + country.name + '</option>'); } }); + if (!hasUserZoomed && isoCodes.length === 1 && isoCodes[0] && isoCodes[0] !== 'UNK') { + updateState(isoCodes[0]); + } else { + updateState(params && params.lastMap ? params.lastMap : 'world'); + } + initUserInterface(); } |