Auto zoom real time and visitor map (#13687)

* auto zoom real time and visitor map

* add more zooms

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();
 
                     }