Fix bug where key listeners would die if >1 graph present

panels/map2/display/binning.js

@@ -1,5 +1,6 @@
 
-function displayBinning(scope, dimensions, projection) {
+function displayBinning(scope, dimensions, projection, path) {
+
     /**
      * Hexbin-specific setup
      */
@@ -26,7 +27,11 @@ function displayBinning(scope, dimensions, projection) {
         });
 
     } else {
-        binPoints = points;
+
+        binPoints = _.map(scope.data, function (k, v) {
+            var decoded = geohash.decode(v);
+            return projection([decoded.longitude, decoded.latitude]);
+        });
     }
 
     //bin and sort the points, so we can set the various ranges appropriately
@@ -50,7 +55,7 @@ function displayBinning(scope, dimensions, projection) {
      */
 
 
-    scope.g.selectAll(".hexagon")
+    scope.g.selectAll("hexagon")
         .data(binnedPoints)
         .enter().append("path")
         .attr("d", function (d) {

panels/map2/display/bullseye.js

@@ -13,8 +13,6 @@ function displayBullseye(scope, projection, path) {
         .data(data)
         .enter().append("path")
         .datum(function(d) {
-            console.log(d);
-
             return circle.origin([d.lon, d.lat]).angle(1000 / 6371 * degrees)();
         })
         .attr("d", path)

panels/map2/display/geopoints.js

@@ -1,4 +1,6 @@
-function displayGeopoints(scope) {
+function displayGeopoints(scope, path) {
+
+    /*
     scope.g.selectAll("circles.points")
         .data(points)
         .enter()
@@ -8,4 +10,19 @@ function displayGeopoints(scope) {
         .attr("transform", function (d) {
             return "translate(" + d[0] + "," + d[1] + ")";
         });
+
+    */
+
+    var circle = d3.geo.circle();
+    var degrees = 180 / Math.PI
+
+    scope.g.selectAll("circles.points")
+        .data(points)
+        .enter().append("path")
+        .datum(function(d) {
+            return circle.origin([d[0], d[1]]).angle(5 / 6371 * degrees)();
+        })
+        .attr("d", path)
+        .attr("class", "geopoint");
+
 }

panels/map2/module.html

@@ -37,6 +37,12 @@
             stroke-width: .5px;
             fill: none;
         }
+
+        .geopoint {
+            stroke: #000;
+            stroke-width: .5px;
+            fill: #000;
+        }
     </style>
   <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
     <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>

panels/map2/module.js

@@ -61,7 +61,10 @@ angular.module('kibana.map2', [])
                 $scope.get_data();
             });
             // Now that we're all setup, request the time from our group
-            eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time')
+            eventBus.broadcast($scope.$id, $scope.panel.group, 'get_time');
+
+
+
         };
 
         $scope.isNumber = function (n) {
@@ -193,6 +196,8 @@ angular.module('kibana.map2', [])
                 scope.worldNames = null;
                 scope.svg = null;
                 scope.g = null;
+                scope.ctrlKey = false;
+
 
                 // Receive render events
                 scope.$on('render', function () {
@@ -220,6 +225,8 @@ angular.module('kibana.map2', [])
                     scripts.wait(function () {
                         elem.text('');
 
+
+
                         //these files can take a bit of time to process, so save them in a variable
                         //and use those on redraw
                         if (scope.worldData === null || scope.worldNames === null) {
@@ -244,6 +251,7 @@ angular.module('kibana.map2', [])
 
 
 
+
                     var world = scope.worldData,
                         names = scope.worldNames;
 
@@ -315,7 +323,7 @@ angular.module('kibana.map2', [])
                     //Geocoded points are decoded into lat/lon, then projected onto x/y
                     points = _.map(scope.data, function (k, v) {
                         var decoded = geohash.decode(v);
-                        return projection([decoded.longitude, decoded.latitude]);
+                        return [decoded.longitude, decoded.latitude];
                     });
 
 
@@ -325,14 +333,14 @@ angular.module('kibana.map2', [])
                      * D3 SVG Setup
                      */
 
-                    var ctrlKey = false;
-                    //set up listener for ctrl key
-                    d3.select("body")
+                    //set up some key listeners for our sphere dragging
+                    window.focus();
+                    d3.select(window)
                         .on("keydown", function() {
-                            ctrlKey = d3.event.ctrlKey;
+                            scope.ctrlKey = d3.event.ctrlKey;
                         })
                         .on("keyup", function() {
-                            ctrlKey = d3.event.ctrlKey;
+                            scope.ctrlKey = d3.event.ctrlKey;
                         });
 
                     //remove our old svg...is there a better way to update than remove/append?
@@ -345,6 +353,7 @@ angular.module('kibana.map2', [])
                         .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
                         .call(zoom);
 
+
                     scope.g = scope.svg.append("g");
 
                     //Overlay is used so that the entire map is draggable, not just the locations
@@ -355,6 +364,11 @@ angular.module('kibana.map2', [])
                         .attr("height", height)
                         .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
 
+
+                    //set up listener for ctrl key
+                    //scope.svg
+
+
                     //Draw the countries, if this is a choropleth, draw with fancy colors
                     scope.g.selectAll("path")
                         .data(countries)
@@ -381,9 +395,10 @@ angular.module('kibana.map2', [])
                             .call(d3.behavior.drag()
                                 .origin(function() { var rotate = projection.rotate(); return {x: 2 * rotate[0], y: -2 * rotate[1]}; })
                                 .on("drag", function() {
-                                    if (ctrlKey) {
+                                    if ( scope.ctrlKey) {
                                         projection.rotate([d3.event.x / 2, -d3.event.y / 2, projection.rotate()[2]]);
                                         scope.svg.selectAll("path").attr("d", path);
+                                        //displayBinning(scope, dimensions, projection, path);
                                     }
                                 }));
                     }
@@ -396,12 +411,12 @@ angular.module('kibana.map2', [])
                     if (scope.panel.display.binning.enabled) {
                         //@todo fix this
                         var dimensions = [width, height];
-                        displayBinning(scope, dimensions, projection);
+                        displayBinning(scope, dimensions, projection, path);
                     }
 
                     //Raw geopoints
                     if (scope.panel.display.geopoints.enabled) {
-                        displayGeopoints(scope);
+                        displayGeopoints(scope, path);
                     }
 
                     if (scope.panel.display.bullseye.enabled) {
@@ -420,7 +435,7 @@ angular.module('kibana.map2', [])
 
                     function move() {
 
-                        if (!ctrlKey) {
+                        if (! scope.ctrlKey) {
                             var t = d3.event.translate,
                                 s = d3.event.scale;
                             t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));