added nearestFeature tooltip to heatmap

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: []

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

@@ -76,6 +76,7 @@
 
 .leaflet-popup {
   margin-bottom: 16px !important;
+  pointer-events: none;
 }
 
 .leaflet-popup-content-wrapper {
@@ -109,7 +110,7 @@
 }
 
 .leaflet-draw-tooltip {
-    display: none;
+  display: none;
 }
 
 /* filter to desaturate mapquest tiles */

src/kibana/components/vislib/visualizations/tile_map.js

@@ -183,37 +183,6 @@ define(function (require) {
             map.addControl(new FitControl());
           }
 
-          // add tooltips
-          if (self._attr.addLeafletPopup && self.tooltipFormatter) {
-            map.on('mousemove', _.debounce(mouseMoveLocation, 15, {
-              'leading': true,
-              'trailing': false
-            }));
-            map.on('mouseout', function () {
-              map.closePopup();
-            });
-          }
-
-          function mouseMoveLocation(e) {
-            map.closePopup();
-
-            if (!mapData.features.length) {
-              return;
-            }
-
-            var latlng = e.latlng;
-
-            // find nearest feature to event latlng
-            var feature = self.nearestFeature(latlng, mapData);
-
-            var zoom = map.getZoom();
-
-            // show tooltip if close enough to event latlng
-            if (self.tooltipProximity(latlng, zoom, feature, map)) {
-              self.showTooltip(map, feature);
-            }
-          }
-
           self.maps.push(map);
         });
       };
@@ -602,6 +571,46 @@ define(function (require) {
 
       var featureLayer = L.heatLayer(points, options);
 
+      if (self._attr.addTooltip && self.tooltipFormatter && !self._attr.disableTooltips) {
+        map.on('mousemove', _.debounce(mouseMoveLocation, 15, {
+          'leading': true,
+          'trailing': false
+        }));
+        map.on('mouseout', function (e) {
+          map.closePopup();
+        });
+        map.on('mousedown', function () {
+          self._attr.disableTooltips = true;
+          map.closePopup();
+        });
+        map.on('mouseup', function () {
+          self._attr.disableTooltips = false;
+        });
+      }
+
+      function mouseMoveLocation(e) {
+        map.closePopup();
+
+        // unhighlight all svgs
+        d3.selectAll('path.geohash', this.chartEl).classed('geohash-hover', false);
+
+        if (!mapData.features.length || self._attr.disableTooltips) {
+          return;
+        }
+
+        var latlng = e.latlng;
+
+        // find nearest feature to event latlng
+        var feature = self.nearestFeature(latlng, mapData);
+
+        var zoom = map.getZoom();
+
+        // show tooltip if close enough to event latlng
+        if (self.tooltipProximity(latlng, zoom, feature, map)) {
+          self.showTooltip(map, feature, latlng);
+        }
+      }
+
       return featureLayer;
     };
 

src/kibana/plugins/vis_types/vislib/editors/tile_map.html

@@ -1,7 +1,12 @@
 <!-- vis type specific options -->
 <div class="form-group">
   <label>Map type</label>
-    <select name="agg" class="form-control" ng-model="vis.params.mapType" ng-init="vis.params.mapType || vis.type.params.mapTypes[0]" ng-options="mapType as mapType for mapType in vis.type.params.mapTypes">
+    <select name="agg"
+    class="form-control"
+    ng-model="vis.params.mapType"
+    ng-init="vis.params.mapType || vis.type.params.mapTypes[0]"
+    ng-options="mapType as mapType for mapType in vis.type.params.mapTypes"
+    >
   </select>
 </div>
 
@@ -90,7 +95,7 @@
       </div>
     </div>
   </div>
-  <div>
+  <div class="form-group">
       <span class="hintbox-label" ng-click="heatNormalizeData = !heatNormalizeData">
         <label>
           <input type="checkbox" value="{{heatNormalizeData}}" ng-model="vis.params.heatNormalizeData" name="heatNormalizeData" ng-checked="vis.params.heatNormalizeData">
@@ -100,10 +105,16 @@
       </span>
       <div class="hintbox" ng-show="heatNormalizeData">Default is checked to show heatmap intensity of bucket count as a percent of max count. Uncheck to show heatmap intensity simply as bucket count.</div>
   </div>
+
+  <div class="form-group">
+    <label>
+      <input type="checkbox" ng-model="vis.params.addTooltip">
+      Show Tooltip
+    </label>
+  </div>
 </div>
 
-<div class="vis-option-item">
-  </br>
+<div class="vis-option-item form-group">
   <label>
     <input type="checkbox" value="{{isDesaturated}}" ng-model="vis.params.isDesaturated" name="isDesaturated" ng-checked="vis.params.isDesaturated">
     Desaturate map tiles

src/kibana/plugins/vis_types/vislib/tile_map.js

@@ -19,7 +19,8 @@ define(function (require) {
           heatMinOpacity: 0.1,
           heatRadius: 25,
           heatBlur: 15,
-          heatNormalizeData: true
+          heatNormalizeData: true,
+          addTooltip: true
         },
         mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
         editor: require('text!plugins/vis_types/vislib/editors/tile_map.html')