removed methods, formatter, styles, params related to #3717 tilemap-tooltip

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

@@ -25,26 +25,6 @@ define(function (require) {
       });
 
       var chart = {};
-
-      chart.tooltipFormatter = function (feature) {
-        var lat = feature.geometry.coordinates[1];
-        var lng = feature.geometry.coordinates[0];
-
-        //var content = feature.properties.valueLabel + ': ' + feature.properties.count  + '<br>' +
-        //'Center: ' + lat.toFixed(3) + ', ' + lng.toFixed(3);
-
-
-        var content = '<table class="ng-scope"><tbody>' +
-        '<tr><td><b>' + feature.properties.valueLabel + ': </b></td>' +
-        '<td>' + feature.properties.count + '</td></tr>' +
-        '<tr><td><b>Center: </b></td>' +
-        '<td>' + lat.toFixed(3) + ', ' + lng.toFixed(3) + '</td></tr>' +
-        '</tbody></table>';
-
-        return content;
-
-      };
-
       var geoJson = chart.geoJson = {
         type: 'FeatureCollection',
         features: []

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

@@ -6,7 +6,6 @@
   position: relative;
 }
 
-
 /* leaflet Dom Util div for map label */
 
 .tilemap-legend {
@@ -63,7 +62,6 @@
   outline: 1px black;
 }
 
-
 /* over-rides leaflet popup styles to look like kibana tooltip */
 
 .leaflet-container {
@@ -81,52 +79,16 @@
 }
 
 .leaflet-popup-content-wrapper {
-  background: rgba(34, 34, 34, 0.93) !important;
+  background: rgba(70, 82, 93, 0.95) !important;
   color: @gray-lighter !important;
   border-radius: 4px !important;
   padding: 0 !important;
 }
 
 .leaflet-popup-content {
+  padding: 8px !important;
   margin: 0 !important;
-  line-height: 1.1;
-  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;
-      }
-    }
-  }
+  line-height: 14px !important;
 }
 
 .leaflet-popup-tip-container, .leaflet-popup-close-button {
@@ -146,7 +108,6 @@
   padding: 0 !important;
 }
 
-
 /* filter to desaturate mapquest tiles */
 
 img.leaflet-tile {
@@ -155,11 +116,4 @@ img.leaflet-tile {
 
 img.leaflet-tile.filters-off {
   .filter(none);
-}
-
-
-/* remove events from svg map markers */
-
-.leaflet-clickable {
-  pointer-events: none;
-}
+}

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

@@ -69,9 +69,7 @@ define(function (require) {
             mapCenter = self._attr.mapCenter;
           }
 
-          // add leaflet latLngs to properties for tooltip
-          var mapData = self.addLatLng(data.geoJson);
-
+          var mapData = data.geoJson;
           var div = $(this).addClass('tilemap');
           var tileLayer = L.tileLayer('https://otile{s}-s.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg', {
             attribution: 'Tiles by <a href="http://www.mapquest.com/">MapQuest</a> &mdash; ' +
@@ -419,6 +417,9 @@ define(function (require) {
           var scaledRadius = self.radiusScale(count, max, feature) * 2;
           return L.circle(latlng, scaledRadius);
         },
+        onEachFeature: function (feature, layer) {
+          self.bindPopup(feature, layer);
+        },
         style: function (feature) {
           return self.applyShadingStyle(feature, min, max);
         }
@@ -455,6 +456,9 @@ define(function (require) {
           var radius = self.geohashMinDistance(feature);
           return L.circle(latlng, radius);
         },
+        onEachFeature: function (feature, layer) {
+          self.bindPopup(feature, layer);
+        },
         style: function (feature) {
           return self.applyShadingStyle(feature, min, max);
         }
@@ -498,6 +502,18 @@ define(function (require) {
           ];
           return L.rectangle(corners);
         },
+        onEachFeature: function (feature, layer) {
+          self.bindPopup(feature, layer);
+          layer.on({
+            mouseover: function (e) {
+              var layer = e.target;
+              // bring layer to front if not older browser
+              if (!L.Browser.ie && !L.Browser.opera) {
+                layer.bringToFront();
+              }
+            }
+          });
+        },
         style: function (feature) {
           return self.applyShadingStyle(feature, min, max);
         }
@@ -642,6 +658,33 @@ define(function (require) {
       });
     };
 
+    /**
+     * Binds popup and events to each feature on map
+     *
+     * @method bindPopup
+     * @param feature {Object}
+     * @param layer {Object}
+     * return {undefined}
+     */
+    TileMap.prototype.bindPopup = function (feature, layer) {
+      var props = feature.properties;
+      var popup = L.popup({
+        autoPan: false
+      })
+      .setContent(
+        'Geohash: ' + props.geohash + '<br>' +
+        'Center: ' + props.center[1].toFixed(1) + ', ' + props.center[0].toFixed(1) + '<br>' +
+        props.valueLabel + ': ' + props.count
+      );
+      layer.bindPopup(popup)
+      .on('mouseover', function (e) {
+        layer.openPopup();
+      })
+      .on('mouseout', function (e) {
+        layer.closePopup();
+      });
+    };
+
     /**
      * get bounds of features from geoJson
      *

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

@@ -102,13 +102,6 @@
   </div>
 </div>
 
-<div class="form-group">
-  <label>
-    <input type="checkbox" ng-model="vis.params.addLeafletPopup">
-    Show Tooltip
-  </label>
-</div>
-
 <div class="form-group">
   <label>
     <input type="checkbox"

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

@@ -15,7 +15,6 @@ define(function (require) {
           mapType: 'Scaled Circle Markers',
           isDesaturated: true,
           autoPrecision: true,
-          addLeafletPopup: true,
           heatMaxZoom: 16,
           heatMinOpacity: 0.1,
           heatRadius: 25,

test/unit/specs/vislib/visualizations/tile_map.js

@@ -115,55 +115,6 @@ define(function (require) {
           });
         });
 
-        describe('nearestFeature method', function () {
-          it('should return an object', function () {
-            vis.handler.charts.forEach(function (chart) {
-              var lat = (Math.random() * 180) - 90;
-              var lng = (Math.random() * 360) - 180;
-              var point = L.latLng(lat, lng);
-              var mapData = chart.chartData.geoJson;
-              expect(_.isObject(chart.nearestFeature(point, mapData))).to.be(true);
-              expect(chart.nearestFeature(point, mapData).type).to.be('Feature');
-            });
-          });
-        });
-
-        describe('tooltipProximity method', function () {
-          it('should return true', function () {
-            vis.handler.charts.forEach(function (chart) {
-              var zoom = _.random(1, 12);
-              var mapData = chart.chartData.geoJson;
-              var i = _.random(0, mapData.features.length - 1);
-              var feature = mapData.features[i];
-              var point = feature.properties.latLng;
-              var map = chart.maps[0];
-              expect(chart.tooltipProximity(point, zoom, feature, map)).to.be(true);
-            });
-          });
-          it('should return false', function () {
-            vis.handler.charts.forEach(function (chart) {
-              var zoom = _.random(1, 12);
-              var mapData = chart.chartData.geoJson;
-              var i = _.random(0, mapData.features.length - 1);
-              var feature = mapData.features[i];
-              var point = L.latLng(90, -180);
-              var map = chart.maps[0];
-              expect(chart.tooltipProximity(point, zoom, feature, map)).to.be(false);
-            });
-          });
-        });
-
-        describe('geohashMinDistance method', function () {
-          it('should return a number', function () {
-            vis.handler.charts.forEach(function (chart) {
-              var mapData = chart.chartData.geoJson;
-              var i = _.random(0, mapData.features.length - 1);
-              var randomFeature = mapData.features[i];
-              expect(_.isFinite(chart.geohashMinDistance(randomFeature))).to.be(true);
-            });
-          });
-        });
-
         describe('getMinMax method', function () {
           it('should return an object', function () {
             vis.handler.charts.forEach(function (chart) {