Leaflet support, based on PR #152

zeppelin-web/CONTRIBUTING.md

@@ -60,7 +60,7 @@ The `src` folder is organized as such:
  │   |    └──  component1.controller.js
  │   └──  component2/
  ├──  fonts/
- |    ├──  *.{eot,svg,ttf,woff,otf}
+ |    ├──  *.{eot,svg,ttf,woff,woff2,otf}
  │    └──  *.css
  ├──  favico.ico
  ├──  index.html

zeppelin-web/Gruntfile.js

@@ -348,7 +348,7 @@ module.exports = function (grunt) {
           expand : true,
           cwd: '<%= yeoman.app %>',
           dest: '<%= yeoman.dist %>',
-          src: ['fonts/**/*.{eot,svg,ttf,woff}']
+          src: ['fonts/**/*.{eot,svg,ttf,woff,woff2}']
         }, {
           expand : true,
           cwd: '<%= yeoman.app %>',
@@ -364,6 +364,11 @@ module.exports = function (grunt) {
           cwd: 'bower_components/bootstrap/dist',
           src: 'fonts/*',
           dest: '<%= yeoman.dist %>'
+        }, {
+          expand: true,
+          cwd: 'bower_components/leaflet/dist/images',
+          src: '*.png',
+          dest: '<%= yeoman.dist %>/styles/images'
         }, {
           expand: true,
           cwd: 'bower_components/jquery-ui/themes/base/images',

zeppelin-web/bower.json

@@ -30,14 +30,18 @@
     "ngtoast": "~2.0.0",
     "ng-focus-if": "~1.0.2",
     "bootstrap3-dialog": "bootstrap-dialog#~1.34.7",
-    "floatThead": "~1.3.2"
+    "floatThead": "~1.3.2",
+    "leaflet": "1.0.0-beta.2",
+    "angular-leaflet-directive": "~0.10.0",
+    "leaflet.heat": "https://github.com/Leaflet/Leaflet.heat.git#v0.2.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"
   },
   "appPath": "src",
   "resolutions": {
-    "perfect-scrollbar": "~0.5.4"
+    "perfect-scrollbar": "~0.5.4",
+    "leaflet": "1.0.0-beta.2"
   },
   "overrides": {
     "ace-builds": {
@@ -61,6 +65,11 @@
       ],
       "version": "8.4.0",
       "name": "highlightjs"
+    },
+    "leaflet.heat": {
+      "main": [
+        "dist/leaflet-heat.js"
+      ]
     }
   }
 }

zeppelin-web/src/app/app.js

@@ -31,6 +31,7 @@
             'monospaced.elastic',
             'puElasticInput',
             'xeditable',
+            'leaflet-directive',
             'ngToast',
             'focus-if',
             'ngResource'

zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html

@@ -40,8 +40,18 @@
           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)"
+					tooltip-placement="bottom" tooltip="Marker map"><i class="fa fa-map-marker"></i>
+  </button>
+  <button type="button" class="btn btn-default btn-sm"
+          ng-class="{'active': isGraphMode('heatmapChart')}"
+          ng-click="setGraphMode('heatmapChart', true)"
+					tooltip-placement="bottom" tooltip="Heatmap"><i class="fa fa-fire"></i>
+  </button>
 </div>
-<span ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && !asIframe && !viewOnly"
+<span ng-if="getResultType()=='TABLE' && getGraphMode()!='table' && getGraphMode()!='mapChart' && getGraphMode()!='heatmapChart' && !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>

zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html

@@ -51,4 +51,14 @@
        id="p{{paragraph.id}}_scatterChart">
     <svg></svg>
   </div>
+
+  <div ng-if="getGraphMode()=='mapChart'"
+       id="p{{paragraph.id}}_mapChart">
+    <leaflet id="{{paragraph.id}}_markermap" bounds="bounds" center="center" markers="markers"></leaflet>
+  </div>
+
+  <div ng-if="getGraphMode()=='heatmapChart'"
+       id="p{{paragraph.id}}_heatmapChart">
+    <leaflet id="{{paragraph.id}}_heatmap" bounds="bounds" center="center" layers="layers"></leaflet>
+  </div>
 </div>

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -16,7 +16,7 @@
 
 angular.module('zeppelinWebApp')
   .controller('ParagraphCtrl', function($scope,$rootScope, $route, $window, $element, $routeParams, $location,
-                                         $timeout, $compile, websocketMsgSrv) {
+                                        $timeout, $compile, websocketMsgSrv, leafletBoundsHelpers) {
   var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_';
   $scope.parentNote = null;
   $scope.paragraph = null;
@@ -1170,8 +1170,11 @@ angular.module('zeppelinWebApp')
 
       if (!type || type === 'table') {
         setTable($scope.paragraph.result, refresh);
-      }
-      else {
+      } else if (type === 'mapChart') {
+        setMapChart(type, $scope.paragraph.result, refresh);
+      } else if (type === 'heatmapChart') {
+        setHeatmapChart(type, $scope.paragraph.result, refresh);
+      } else {
         setD3Chart(type, $scope.paragraph.result, refresh);
       }
     }
@@ -1325,6 +1328,115 @@ angular.module('zeppelinWebApp')
     return groupedThousandsWith3DigitsFormatter(d);
   };
 
+  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 = 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.element('#p'+$scope.paragraph.id+'_mapChart').height(height);
+
+    $scope.center = {};
+  };
+
+  var setHeatmapChart = function(type, data, refresh) {
+    var layers = {},
+        latlngs = [],
+        // set starting bounding box to opposite extremes
+        boundSW = [90, 180],
+        boundNE = [-90, -180];
+
+    if (!$scope.chart[type]) {
+      for (var i = 0; i < data.rows.length; i++) {
+        var row = data.rows[i];
+        var lat = row[2];
+        var lng = row[3];
+        latlngs.push([lat, lng]);
+        boundSW = [Math.min(boundSW[0], lat), Math.min(boundSW[1], lng)];
+        boundNE = [Math.max(boundNE[0], lat), Math.max(boundNE[1], lng)];
+      }
+
+      layers = {
+        baselayers: {
+          osm: {
+            name: 'OpenStreetMap',
+            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+            type: 'xyz',
+            layerParams: {
+              noWrap: false
+            }
+          }
+        },
+        overlays: {
+          heat: {
+            name: 'Heatmap',
+            type: 'heat',
+            data: latlngs,
+            // TODO don't hardcode options
+            layerOptions: {
+              minOpacity: 0.45,
+              radius: 25,
+              blur: 15,
+              gradient: {0.4: 'blue', 0.65: 'lime', 1: 'red'}
+            },
+            visible: true
+          }
+        }
+      };
+
+    }
+
+    $scope.defaults = {
+      scrollWheelZoom: true
+    };
+
+    $scope.layers = angular.extend({}, layers);
+
+    $scope.bounds = leafletBoundsHelpers.createBoundsFromArray(
+                      [boundNE, boundSW]
+                    );
+
+    // set map chart height
+    var height = $scope.paragraph.config.graph.height;
+    angular.element('#p'+$scope.paragraph.id+'_heatmapChart').height(height);
+
+    if (refresh) {
+      $scope.layers.overlays.heat.doRefresh = true;
+    }
+  };
+
   var setD3Chart = function(type, data, refresh) {
     if (!$scope.chart[type]) {
       var chart = nv.models[type]();

zeppelin-web/src/app/notebook/paragraph/paragraph.css

@@ -67,6 +67,11 @@
   margin-bottom: 5px !important;
 }
 
+.angular-leaflet-map {
+  height: 300px;
+  width: 100%;
+}
+
 .resizable-helper {
   border: 3px solid #DDDDDD;
 }