diff --git a/panels/map2/display/bullseye.js b/panels/map2/display/bullseye.js new file mode 100644 index 00000000000..36e245f0b62 --- /dev/null +++ b/panels/map2/display/bullseye.js @@ -0,0 +1,42 @@ +function displayBullseye(scope, projection, path) { + + var arc = d3.svg.arc() + .innerRadius(5) + .outerRadius(10) + .startAngle(0) //converting from degs to radians + .endAngle(2*Math.PI) //just radians + + var coords = projection([parseFloat(scope.panel.display.bullseye.coord.lon), parseFloat(scope.panel.display.bullseye.coord.lat)]); + + + var circle = d3.geo.circle(); + + var data = [ + {lat: parseFloat(scope.panel.display.bullseye.coord.lat), lon: parseFloat(scope.panel.display.bullseye.coord.lon)} + ]; + + scope.g.selectAll("arc") + .data(data) + .enter().append("path") + .datum(function(d) { + console.log(d); + + return circle.origin([d.lon, d.lat]).angle(1)(); + }) + .attr("d", path) + .attr("class", "arc"); + + + /* + scope.g.append("path") + .attr("d", arc) + .attr("transform", "translate(" + coords[0] + "," + coords[1] + ")"); + + scope.g + .append("circle") + .attr("r", 1) + .attr("opacity", 1) + .attr("transform", "translate(" + coords[0] + "," + coords[1] + ")"); +*/ + +} \ No newline at end of file diff --git a/panels/map2/module.html b/panels/map2/module.html index 1736bd373bd..53c25a356c1 100644 --- a/panels/map2/module.html +++ b/panels/map2/module.html @@ -32,6 +32,11 @@ .q8 { fill:rgb(8,81,156); } .q9 { fill:rgb(8,48,107); } + .arc { + stroke: #f00; + stroke-width: .5px; + fill: none; + } diff --git a/panels/map2/module.js b/panels/map2/module.js index bebd5db6d5b..acd570be688 100644 --- a/panels/map2/module.js +++ b/panels/map2/module.js @@ -36,7 +36,12 @@ angular.module('kibana.map2', []) enabled: false }, bullseye: { - enabled: false + enabled: false, + coord: { + lat: 0, + lon: 0 + }, + } }, displayTabs: ["Geopoints", "Binning", "Choropleth", "Bullseye", "Data"], @@ -206,7 +211,8 @@ angular.module('kibana.map2', []) .script("panels/map2/lib/d3.hexbin.v0.min.js") .script("panels/map2/lib/queue.v1.min.js") .script("panels/map2/display/binning.js") - .script("panels/map2/display/geopoints.js"); + .script("panels/map2/display/geopoints.js") + .script("panels/map2/display/bullseye.js"); // Populate element. Note that jvectormap appends, does not replace. scripts.wait(function () { @@ -243,15 +249,16 @@ angular.module('kibana.map2', []) var width = $(elem[0]).width(), height = $(elem[0]).height(); + //scale to whichever dimension is smaller, helps to ensure the whole map is displayed - var scale = (width > height) ? (height / 2 / Math.PI) : (width / 2 / Math.PI); + var scale = (width > height) ? (height/5) : (width/5); /** * D3 and general config section */ var projection = d3.geo.mercator() - .translate([0,0]) + .translate([width/2, height/2]) .scale(scale); var zoom = d3.behavior.zoom() @@ -310,10 +317,9 @@ angular.module('kibana.map2', []) //where countries are scope.svg.append("rect") .attr("class", "overlay") - .attr("x", -width / 2) - .attr("y", -height / 2) .attr("width", width) - .attr("height", height); + .attr("height", height) + .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); //Draw the countries, if this is a choropleth, draw with fancy colors scope.g.selectAll("path") @@ -342,6 +348,7 @@ angular.module('kibana.map2', []) //Hexagonal Binning if (scope.panel.display.binning.enabled) { + //@todo fix this var dimensions = [width, height]; displayBinning(scope, dimensions, projection); } @@ -351,6 +358,10 @@ angular.module('kibana.map2', []) displayGeopoints(scope); } + if (scope.panel.display.bullseye.enabled) { + displayBullseye(scope, projection, path); + } + /** * Zoom Functionality @@ -373,6 +384,7 @@ angular.module('kibana.map2', []) scope.g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")"); } + } } };