Merge pull request #53 from polyfractal/map2

New Map Panel

config.js

@@ -14,7 +14,7 @@ var config = new Settings(
 {
   elasticsearch:  'http://localhost:9200',
   kibana_index:   "kibana-int", 
-  modules:        ['histogram','map','pie','table','stringquery','sort',
+  modules:        ['histogram','map','map2','pie','table','stringquery','sort',
                   'timepicker','text','fields','hits','dashcontrol',
                   'column', 'parallelcoordinates'],
   }

js/services.js

@@ -106,4 +106,18 @@ angular.module('kibana.services', [])
     timers = new Array();
   }
 
+})
+.service('keylistener', function($rootScope) {
+    var keys = [];
+    $(document).keydown(function (e) {
+      keys[e.which] = true;
+    });
+
+    $(document).keyup(function (e) {
+      delete keys[e.which];
+    });
+
+    this.keyActive = function(key) {
+      return keys[key] == true;
+    }
 });

panels/map2/display/binning.js

@@ -0,0 +1,92 @@
+/**
+ * Hexagonal binning
+ * Rendered as normally projected svg paths, which mean they *do not*
+ * clip on spheres appropriately.  To fix this, we would need to translate
+ * the svg path into a geo-path
+ */
+function displayBinning(scope, dr, dimensions) {
+
+    var hexbin = d3.hexbin()
+        .size(dimensions)
+        .radius(scope.panel.display.binning.hexagonSize);
+
+
+    var binPoints = [],
+        binnedPoints = [],
+        binRange = 0;
+
+
+    if (scope.panel.display.binning.enabled) {
+        /**
+         * primary field is just binning raw counts
+         *
+         * Secondary field is binning some metric like mean/median/total.  Hexbins doesn't support that,
+         * so we cheat a little and just add more points to compensate.
+         * However, we don't want to add a million points, so normalize against the largest value
+         */
+        if (scope.panel.display.binning.areaEncodingField === 'secondary') {
+            var max = Math.max.apply(Math, _.map(scope.data, function(k,v){return k;})),
+                scale = 50/max;
+
+            _.map(scope.data, function (k, v) {
+                var decoded = geohash.decode(v);
+                return _.map(_.range(0, k*scale), function(a,b) {
+                    binPoints.push(dr.projection([decoded.longitude, decoded.latitude]));
+                })
+            });
+
+        } else {
+            binPoints = dr.projectedPoints;
+        }
+
+        //bin and sort the points, so we can set the various ranges appropriately
+        binnedPoints = hexbin(binPoints).sort(function(a, b) { return b.length - a.length; });
+        binRange = binnedPoints[0].length;
+
+        //clean up some memory
+        binPoints = [];
+    } else {
+
+        //not enabled, so just set an empty array.  D3.exit will take care of the rest
+        binnedPoints = [];
+        binRange = 0;
+    }
+
+
+
+    var radius = d3.scale.sqrt()
+        .domain([0, binRange])
+        .range([0, scope.panel.display.binning.hexagonSize]);
+
+    var color = d3.scale.linear()
+        .domain([0,binRange])
+        .range(["white", "steelblue"])
+        .interpolate(d3.interpolateLab);
+
+
+    var hex = dr.g.selectAll(".hexagon")
+        .data(binnedPoints);
+
+    hex.enter().append("path")
+        .attr("d", function (d) {
+            if (scope.panel.display.binning.areaEncoding === false) {
+                return hexbin.hexagon();
+            } else {
+                return hexbin.hexagon(radius(d.length));
+            }
+        })
+        .attr("class", "hexagon")
+        .attr("transform", function (d) {
+            return "translate(" + d.x + "," + d.y + ")";
+        })
+        .style("fill", function (d) {
+            if (scope.panel.display.binning.colorEncoding === false) {
+                return color(binnedPoints[0].length / 2);
+            } else {
+                return color(d.length);
+            }
+        })
+        .attr("opacity", scope.panel.display.binning.hexagonAlpha);
+
+    hex.exit().remove();
+}

panels/map2/display/bullseye.js

@@ -0,0 +1,28 @@
+/**
+ * Renders bullseyes as geo-json poly gon entities
+ * Allows for them to clip on spheres correctly
+ */
+function displayBullseye(scope, dr) {
+
+    var degrees = 180 / Math.PI
+    var circle = d3.geo.circle();
+    var data = [];
+
+    if (scope.panel.display.bullseye.enabled) {
+        data =  [
+          circle.origin(parseFloat(scope.panel.display.bullseye.coord.lat), parseFloat(scope.panel.display.bullseye.coord.lon)).angle(1000 / 6371 * degrees)()
+        ];
+    }
+
+    var arcs = dr.g.selectAll(".arc")
+        .data(data);
+
+    arcs.enter().append("path")
+
+        .attr("d", dr.path)
+        .attr("class", "arc");
+
+    arcs.exit().remove();
+
+
+}

panels/map2/display/geopoints.js

@@ -0,0 +1,44 @@
+/**
+ * Renders geopoints as geo-json poly gon entities
+ * Allows for them to clip on spheres correctly
+ */
+function displayGeopoints(scope, dr) {
+
+    var points = [];
+    var circle = d3.geo.circle();
+    var degrees = 180 / Math.PI
+
+    if (scope.panel.display.geopoints.enabled) {
+        //points = dr.points;
+
+      points = _.map(dr.points, function(v) {
+        return {
+            type: "Point",
+            coordinates: [v[0], v[1]]
+        };
+      });
+
+    }
+
+
+    dr.geopoints = dr.g.selectAll("path.geopoint")
+      .data(points);
+
+
+
+    dr.geopoints.enter().append("path")
+      /*
+        .datum(function(d) {
+            return circle.origin([d[0], d[1]]).angle(scope.panel.display.geopoints.pointSize / 6371 * degrees)();
+        })
+        */
+      .attr("class", "geopoint")
+      .attr("d", dr.path);
+
+    dr.geopoints.exit().remove();
+
+
+
+
+
+}