diff --git a/panels/map2/display/binning.js b/panels/map2/display/binning.js index a13db8ecdd4..815d22e67c8 100644 --- a/panels/map2/display/binning.js +++ b/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) { diff --git a/panels/map2/display/bullseye.js b/panels/map2/display/bullseye.js index ef03c73b6ba..b4c5b30081e 100644 --- a/panels/map2/display/bullseye.js +++ b/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) diff --git a/panels/map2/display/geopoints.js b/panels/map2/display/geopoints.js index 0602c160cc0..7a123209db4 100644 --- a/panels/map2/display/geopoints.js +++ b/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"); + } \ No newline at end of file diff --git a/panels/map2/module.html b/panels/map2/module.html index 53c25a356c1..660bf8cc792 100644 --- a/panels/map2/module.html +++ b/panels/map2/module.html @@ -37,6 +37,12 @@ stroke-width: .5px; fill: none; } + + .geopoint { + stroke: #000; + stroke-width: .5px; + fill: #000; + } diff --git a/panels/map2/module.js b/panels/map2/module.js index 09d5dae6a57..d11af4a71df 100644 --- a/panels/map2/module.js +++ b/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]));