diff --git a/zeppelin-web/bower.json b/zeppelin-web/bower.json
index ae29f70cca9..60fea266e7b 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"
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..b472a516c2c 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,6 +912,8 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
       if (!type || type === 'table') {
         setTable($scope.paragraph.result, refresh);
+      } else if (type === 'mapChart') {
+        setMapChart(type, $scope.paragraph.result, refresh);
       } else {
         setD3Chart(type, $scope.paragraph.result, refresh);
       }
@@ -989,6 +996,47 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r
 
   };
 
+  var setMapChart = function(type, data, refresh) {
+    var latArr = [];
+    var lngArr = [];
+    var 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 = angular.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;
+    angular.extend('#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;
 }
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',