Tilemap heatmap

bower.json

@@ -39,6 +39,7 @@
     "inflection": "~1.3.5",
     "jquery": "~2.1.0",
     "leaflet": "0.7.3",
+    "Leaflet.heat": "Leaflet/Leaflet.heat#627ede7c11bbe43",
     "lesshat": "~3.0.2",
     "lodash": "~2.4.1",
     "moment": "~2.9.0",

src/kibana/components/agg_response/geo_json/_tooltip.html

@@ -0,0 +1,8 @@
+<table>
+  <tbody>
+    <tr ng-repeat="detail in details" >
+      <td><b>{{detail.label}}</b></td>
+      <td>{{detail.value}}</td>
+    </tr>
+  </tbody>
+</table>

src/kibana/components/agg_response/geo_json/_tooltip_formatter.js

@@ -0,0 +1,32 @@
+define(function (require) {
+  return function TileMapTooltipFormatter($compile, $rootScope) {
+    var $ = require('jquery');
+
+    var $tooltipScope = $rootScope.$new();
+    var $tooltip = $(require('text!components/agg_response/geo_json/_tooltip.html'));
+    $compile($tooltip)($tooltipScope);
+
+    return function tooltipFormatter(feature) {
+      if (!feature) return '';
+
+      var details = $tooltipScope.details = [];
+
+      var lat = feature.geometry.coordinates[1];
+      var lng = feature.geometry.coordinates[0];
+
+      var metric = {
+        label: feature.properties.valueLabel,
+        value: feature.properties.count
+      };
+      var location = {
+        label: 'Center',
+        value: lat.toFixed(4) + ', ' + lng.toFixed(4)
+      };
+
+      details.push(metric, location);
+
+      $tooltipScope.$apply();
+      return $tooltip[0].outerHTML;
+    };
+  };
+});

src/kibana/components/agg_response/geo_json/geo_json.js

@@ -3,6 +3,8 @@ define(function (require) {
     var _ = require('lodash');
 
     var readRows = require('components/agg_response/geo_json/_read_rows');
+    var tooltipFormatter = Private(require('components/agg_response/geo_json/_tooltip_formatter'));
+
     function findCol(table, name) {
       return _.findIndex(table.columns, function (col) {
         return col.aggConfig.schema.name === name;
@@ -25,6 +27,7 @@ define(function (require) {
       });
 
       var chart = {};
+      chart.tooltipFormatter = tooltipFormatter;
       var geoJson = chart.geoJson = {
         type: 'FeatureCollection',
         features: []
@@ -37,6 +40,10 @@ define(function (require) {
         max: 0
       };
 
+      if (agg.metric._opts.params && agg.metric._opts.params.field) {
+        props.metricField = agg.metric._opts.params.field;
+      }
+
       // set precision from the bucketting column, if we have one
       if (agg.geo) {
         props.precision = _.parseInt(agg.geo.params.precision);

src/kibana/components/vislib/styles/_tilemap.less

@@ -76,19 +76,56 @@
 
 .leaflet-popup {
   margin-bottom: 16px !important;
+  pointer-events: none;
 }
 
 .leaflet-popup-content-wrapper {
-  background: rgba(70, 82, 93, 0.95) !important;
-  color: @gray-lighter !important;
+  background: @tooltip-bg !important;
+  color: @tooltip-color !important;
   border-radius: 4px !important;
   padding: 0 !important;
 }
 
 .leaflet-popup-content {
-  padding: 8px !important;
   margin: 0 !important;
-  line-height: 14px !important;
+  line-height: 1.1 !important;
+  font-size: 12px;
+  font-weight: normal;
+  word-wrap: break-word;
+  overflow: hidden;
+  pointer-events: none;
+
+  > :last-child {
+    margin-bottom: @tooltip-space;
+  }
+
+  > * {
+    margin: @tooltip-space @tooltip-space 0;
+  }
+
+  table {
+    td,th {
+      padding: @tooltip-space-tight;
+
+      &.row-bucket {
+        word-break: break-all;
+      }
+    }
+
+    // if there is a header, give it a border that matches
+    // those in the body
+    thead tr {
+      border-bottom: 1px solid @gray;
+    }
+
+    // only apply to tr in the body, not the header
+    tbody tr {
+      border-top: 1px solid @gray;
+      &:first-child {
+        border-top: none;
+      }
+    }
+  }
 }
 
 .leaflet-popup-tip-container, .leaflet-popup-close-button {
@@ -109,7 +146,7 @@
 }
 
 .leaflet-draw-tooltip {
-    display: none;
+  display: none;
 }
 
 /* filter to desaturate mapquest tiles */