From 63de8d9016b3316748e73ba5c4591fb2f2e652de Mon Sep 17 00:00:00 2001
From: madhuka <madhukaudantha@gmail.com>
Date: Mon, 7 Mar 2016 14:55:33 +0530
Subject: [PATCH 1/6] adding leaflet

---
 zeppelin-web/bower.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index ae29f70cca9..2772f73141a 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -32,7 +32,9 @@
     "bootstrap3-dialog": "bootstrap-dialog#~1.34.7",
     "handsontable": "~0.24.2",
     "moment-duration-format": "^1.3.0",
-    "select2": "^4.0.3"
+    "select2": "^4.0.3",
+    "leaflet": "~0.7.7",
+    "angular-leaflet-directive": "~0.10.0",
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"

From c7d5a9af11521008fb6c7c486c2f7a2e19f988e7 Mon Sep 17 00:00:00 2001
From: madhuka <madhukaudantha@gmail.com>
Date: Mon, 7 Mar 2016 15:51:21 +0530
Subject: [PATCH 2/6] adding map visualization for zeppelin

---
 zeppelin-web/src/app/app.js                   |  4 +-
 .../paragraph/paragraph-chart-selector.html   |  7 ++-
 .../notebook/paragraph/paragraph-graph.html   |  5 ++
 .../paragraph/paragraph.controller.js         | 57 ++++++++++++++++++-
 .../src/app/notebook/paragraph/paragraph.css  |  9 +++
 5 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/zeppelin-web/src/app/app.js b/zeppelin-web/src/app/app.js
index 20ccfb11f9e..fd272ff7b48 100644
--- a/zeppelin-web/src/app/app.js
+++ b/zeppelin-web/src/app/app.js
@@ -33,8 +33,10 @@
           'xeditable',
           'ngToast',
           'focus-if',
-          'ngResource'
+          'ngResource',
+          'leaflet-directive'
       ])
+
         .filter('breakFilter', function() {
           return function(text) {
             if (!!text) {
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
index 0c763189fa5..c7d73ef2829 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
@@ -47,6 +47,10 @@
           ng-class="{'active': isGraphMode('scatterChart')}"
           ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
   </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('mapChart')}"
+          ng-click="setGraphMode('mapChart', true)"><i class="fa fa-globe"></i>
+  </button>
 
   <button type="button"
           ng-if="paragraph.result.type != 'TABLE'"
@@ -114,8 +118,9 @@
 </div>
 
 <span
-   ng-if="getResultType()=='TABLE' && !paragraph.config.helium.activeApp && getGraphMode()!='table' && !asIframe && !viewOnly"
+   ng-if="getResultType()=='TABLE' && !paragraph.config.helium.activeApp && getGraphMode()!='table' && getGraphMode()!='mapChart' && !asIframe && !viewOnly"
    style="margin-left:10px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
+
   <a class="btnText" ng-click="toggleGraphOption()">
     settings <span ng-class="paragraph.config.graph.optionOpen ? 'fa fa-caret-up' : 'fa fa-caret-down'"></span>
   </a>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
index c844bf861cf..60f6c8b1d3a 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html
@@ -51,4 +51,9 @@
        id="p{{paragraph.id}}_scatterChart">
     <svg></svg>
   </div>
+
+  <div ng-if="getGraphMode()=='mapChart'"
+       id="p{{paragraph.id}}_mapChart">
+    <leaflet bounds="bounds" center="center" markers="markers"></leaflet>
+  </div>
 </div>
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index f1d04cd8f37..4dd3820be73 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -16,7 +16,8 @@
 angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $rootScope, $route, $window,
                                                                       $routeParams, $location, $timeout, $compile,
                                                                       $http, websocketMsgSrv, baseUrlSrv, ngToast,
-                                                                      saveAsService) {
+                                                                      saveAsService, leafletBoundsHelpers) {
+
   var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
   $scope.parentNote = null;
   $scope.paragraph = null;
@@ -896,6 +897,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     }
   };
 
+  $scope.defaults= {
+    scrollWheelZoom: false
+  };
+
   $scope.setGraphMode = function(type, emit, refresh) {
     if (emit) {
       setNewMode(type);
@@ -907,7 +912,11 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
       if (!type || type === 'table') {
         setTable($scope.paragraph.result, refresh);
-      } else {
+      }
+      else if (type === 'mapChart') {
+        setMapChart(type, $scope.paragraph.result, refresh);
+      }
+      else {
         setD3Chart(type, $scope.paragraph.result, refresh);
       }
     }
@@ -989,7 +998,49 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
   };
 
-  var groupedThousandsWith3DigitsFormatter = function(x) {
+  var setMapChart = function(type, data, refresh) {
+    var latArr = [],
+        lngArr = [],
+        newmarkers = {};
+        
+    if (!$scope.chart[type]) {
+      var mapChartModel = function(d) {
+        var key = d[1].replace('-', '_');
+        var obj = {};
+        latArr.push(Math.round(parseFloat(d[2])));
+        lngArr.push(Math.round(parseFloat(d[3])));
+        obj[key] = {
+          lat: parseFloat(d[2]),
+          lng: parseFloat(d[3]),
+          message: d[1],
+          focus: true,
+          draggable: false
+        };
+        return obj;
+      };
+
+      for (var i = 0; i < data.rows.length; i++) {
+        var row = data.rows[i];
+        var rowMarker = mapChartModel(row);
+        newmarkers = $.extend(newmarkers, rowMarker);
+      }
+    } 
+
+    $scope.markers = newmarkers;
+    var bounds = leafletBoundsHelpers.createBoundsFromArray([
+      [Math.max.apply(Math, latArr), Math.max.apply(Math, lngArr)],
+      [Math.min.apply(Math, latArr), Math.min.apply(Math, lngArr)]
+    ]);
+    $scope.bounds = bounds;
+
+    // set map chart height
+    var height = $scope.paragraph.config.graph.height;
+    $('#p'+$scope.paragraph.id+'_mapChart').height(height);
+
+    $scope.center = {};
+  };
+
+  var groupedThousandsWith3DigitsFormatter = function(x){
     return d3.format(',')(d3.round(x, 3));
   };
 
diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.css b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
index d8b464eeed1..305601fda29 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.css
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.css
@@ -78,6 +78,15 @@ table.dataTable.table-condensed .sorting_desc:after {
   margin-bottom: 5px !important;
 }
 
+.angular-leaflet-map {
+  height: 300px;
+  width: 100%;
+}
+
+.graphContainer .mapChart {
+  overflow: hidden;
+}
+
 .resizable-helper {
   border: 3px solid #DDDDDD;
 }

From 0fa45ec718e124e8e5bf43c4429fa3e0d18962af Mon Sep 17 00:00:00 2001
From: madhuka <madhukaudantha@gmail.com>
Date: Mon, 7 Mar 2016 22:32:02 +0530
Subject: [PATCH 3/6] adding lines for index.html and karma.conf

---
 zeppelin-web/src/index.html     | 10 ++++++++++
 zeppelin-web/test/karma.conf.js |  2 ++
 2 files changed, 12 insertions(+)

diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
index b23db7a7530..aa741f769c7 100644
--- a/zeppelin-web/src/index.html
+++ b/zeppelin-web/src/index.html
@@ -146,6 +146,16 @@
     <script src="bower_components/handsontable/dist/handsontable.js"></script>
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
+    <script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>
+    <script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/dataTables.buttons.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.colVis.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.flash.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.html5.js"></script>
+    <script src="bower_components/datatables.net-buttons/js/buttons.print.js"></script>
+    <script src="bower_components/datatables.net-buttons-bs/js/buttons.bootstrap.js"></script>
+    <script src="bower_components/leaflet/dist/leaflet-src.js"></script>
+    <script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->
diff --git a/zeppelin-web/test/karma.conf.js b/zeppelin-web/test/karma.conf.js
index f9f03a413fa..efd0f3472b9 100644
--- a/zeppelin-web/test/karma.conf.js
+++ b/zeppelin-web/test/karma.conf.js
@@ -65,6 +65,8 @@ module.exports = function(config) {
       'bower_components/handsontable/dist/handsontable.js',
       'bower_components/moment-duration-format/lib/moment-duration-format.js',
       'bower_components/select2/dist/js/select2.js',
+      'bower_components/leaflet/dist/leaflet-src.js',
+      'bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'src/app/app.js',

From 70a100612be62ff4b30dbf19a3f5584bf05c3d64 Mon Sep 17 00:00:00 2001
From: madhuka <madhukaudantha@gmail.com>
Date: Thu, 10 Mar 2016 20:15:34 +0530
Subject: [PATCH 4/6] fixing extend

---
 .../src/app/notebook/paragraph/paragraph.controller.js        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 4dd3820be73..5a4fa25c4e2 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -1022,7 +1022,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
       for (var i = 0; i < data.rows.length; i++) {
         var row = data.rows[i];
         var rowMarker = mapChartModel(row);
-        newmarkers = $.extend(newmarkers, rowMarker);
+        newmarkers = angular.extend(newmarkers, rowMarker);
       }
     } 
 
@@ -1035,7 +1035,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
     // set map chart height
     var height = $scope.paragraph.config.graph.height;
-    $('#p'+$scope.paragraph.id+'_mapChart').height(height);
+    angular.extend('#p'+$scope.paragraph.id+'_mapChart').height(height);
 
     $scope.center = {};
   };

From 2dbd716c7c57edf968c1118268931370acc38c6f Mon Sep 17 00:00:00 2001
From: madhuka <madhukaudantha@gmail.com>
Date: Mon, 9 May 2016 09:51:36 +0530
Subject: [PATCH 5/6] fixing bower

---
 zeppelin-web/bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index 2772f73141a..60fea266e7b 100644
--- a/zeppelin-web/bower.json
+++ b/zeppelin-web/bower.json
@@ -34,7 +34,7 @@
     "moment-duration-format": "^1.3.0",
     "select2": "^4.0.3",
     "leaflet": "~0.7.7",
-    "angular-leaflet-directive": "~0.10.0",
+    "angular-leaflet-directive": "~0.10.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"

From 31752a411c6b9bc528c21497006a69e69d216be8 Mon Sep 17 00:00:00 2001
From: madhuka <madhukaudantha@gmail.com>
Date: Thu, 11 Aug 2016 11:19:05 +0530
Subject: [PATCH 6/6] fixing grunt build

---
 .../paragraph/paragraph.controller.js         | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
index 5a4fa25c4e2..b472a516c2c 100644
--- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
+++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
@@ -897,7 +897,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
     }
   };
 
-  $scope.defaults= {
+  $scope.defaults = {
     scrollWheelZoom: false
   };
 
@@ -912,11 +912,9 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
       if (!type || type === 'table') {
         setTable($scope.paragraph.result, refresh);
-      }
-      else if (type === 'mapChart') {
+      } else if (type === 'mapChart') {
         setMapChart(type, $scope.paragraph.result, refresh);
-      }
-      else {
+      } else {
         setD3Chart(type, $scope.paragraph.result, refresh);
       }
     }
@@ -999,10 +997,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
   };
 
   var setMapChart = function(type, data, refresh) {
-    var latArr = [],
-        lngArr = [],
-        newmarkers = {};
-        
+    var latArr = [];
+    var lngArr = [];
+    var newmarkers = {};
+
     if (!$scope.chart[type]) {
       var mapChartModel = function(d) {
         var key = d[1].replace('-', '_');
@@ -1024,7 +1022,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
         var rowMarker = mapChartModel(row);
         newmarkers = angular.extend(newmarkers, rowMarker);
       }
-    } 
+    }
 
     $scope.markers = newmarkers;
     var bounds = leafletBoundsHelpers.createBoundsFromArray([
@@ -1035,12 +1033,11 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
     // set map chart height
     var height = $scope.paragraph.config.graph.height;
-    angular.extend('#p'+$scope.paragraph.id+'_mapChart').height(height);
-
+    angular.extend('#p' + $scope.paragraph.id + '_mapChart').height(height);
     $scope.center = {};
   };
 
-  var groupedThousandsWith3DigitsFormatter = function(x){
+  var groupedThousandsWith3DigitsFormatter = function(x) {
     return d3.format(',')(d3.round(x, 3));
   };