Merge branch 'pr' into feature/tilemap

Conflicts: src/kibana/components/vislib/visualizations/tile_map.js
stormpython · Nov 7, 2014 · c84bbe1 · c84bbe1
2 parents 8500441 + 8e42a32
commit c84bbe1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 18 deletions.
diff --git a/src/kibana/components/vislib/styles/_tilemap.less b/src/kibana/components/vislib/styles/_tilemap.less
@@ -59,6 +59,13 @@
   color: #444;
 }
 
+.leaflet-control-fit {
+  text-align: center;
+  background: #fff;
+  width: 26px;
+  height: 26px;
+  outline: 1px black;
+}
 
 /* over-rides leaflet popup styles to look like kibana tooltip */
 

diff --git a/src/kibana/components/vislib/visualizations/tile_map.js b/src/kibana/components/vislib/visualizations/tile_map.js
@@ -3,16 +3,15 @@ define(function (require) {
     var _ = require('lodash');
     var $ = require('jquery');
     var L = require('leaflet');
-  
+
     var Chart = Private(require('components/vislib/visualizations/_chart'));
     var errors = require('errors');
 
     require('css!components/vislib/styles/main');
-    
+
     var mapData;
     var mapCenter = [15, 5];
     var mapZoom = 2;
-
 
     /**
      * Tile Map Visualization: renders maps
@@ -30,7 +29,7 @@ define(function (require) {
         return new TileMap(handler, chartEl, chartData);
       }
       TileMap.Super.apply(this, arguments);
-      
+
       // add allmin and allmax to geoJSON
       var mapDataExtents = handler.data.mapDataExtents(handler.data.data.raw);
       chartData.geoJSON.properties.allmin = mapDataExtents[0];
@@ -89,17 +88,35 @@ define(function (require) {
             zoom: mapZoom,
             continuousWorld: true,
             noWrap: true,
-            maxBounds: worldBounds
+            maxBounds: worldBounds,
+            scrollWheelZoom: false,
+            fadeAnimation: false
           };
 
           var map = L.map(div[0], mapOptions);
           self.maps.push(map);
 
-          // switch map types
-          L.control.layers({
-            'Map': mapLayer,
-            'Satellite': satLayer
-          }).addTo(map);
+          function fitBounds() {
+            if (data.geoJSON) {
+              map.fitBounds(_.map(data.geoJSON.features, function (feature) {
+                return _.clone(feature.geometry.coordinates).reverse();
+              }));
+            }
+          }
+
+          // Add button to fit container to points
+          var fitControl = L.Control.extend({
+            options: {
+              position: 'topleft'
+            },
+            onAdd: function (map) {
+              var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-control-zoom leaflet-control-fit');
+              $(container).html('<a class="leaflet-control-zoom fa fa-crop"></a>');
+              $(container).on('click', fitBounds);
+              return container;
+            }
+          });
+          map.addControl(new fitControl());
 
           map.on('zoomend dragend', function () {
             mapZoom = self._attr.lastZoom = map.getZoom();
@@ -114,7 +131,6 @@ define(function (require) {
             }
           }
 
-          // if sub agg split, add labels
           if (data.geoJSON.properties.label) {
             self.addLabel(data.geoJSON.properties.label, map);
           }
@@ -185,17 +201,17 @@ define(function (require) {
      */
     TileMap.prototype.shadedCircleMarkers = function (map, mapData) {
       var self = this;
-      
+
       // TODO: add UI to select local min max or all min max
 
       // min and max from chart data for this map
       // var min = mapData.properties.min;
       // var max = mapData.properties.max;
-      
+
       // super min and max from all chart data
       var min = mapData.properties.allmin;
       var max = mapData.properties.allmax;
-      
+
       var length = mapData.properties.length;
       var precision = mapData.properties.precision;
       var zoomScale = self.zoomScale(mapZoom);
@@ -315,10 +331,10 @@ define(function (require) {
     TileMap.prototype.resizeFeatures = function (map, min, max, precision, featureLayer) {
       var self = this;
       var zoomScale = self.zoomScale(mapZoom);
-      
+
       featureLayer.eachLayer(function (layer) {
         var latlng = L.latLng(layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]);
-        
+
         var count = layer.feature.properties.count;
         var rad;
         if (self._attr.mapType === 'Shaded Circle Markers') {
@@ -379,7 +395,7 @@ define(function (require) {
 
     /**
      * radiusScale returns a circle radius from
-     * approx. square root of count 
+     * approx. square root of count
      * which is multiplied by a factor based on the geohash precision
      * for relative sizing of markers
      *
@@ -429,7 +445,7 @@ define(function (require) {
     };
 
     /**
-     * returns a number to scale circle markers 
+     * returns a number to scale circle markers
      * based on the geohash precision
      *
      * @method quantRadiusScale