Initial base for bullseye feature

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] + ")");
+*/
+
+}

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;
+        }
     </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

@@ -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 + ")");
                     }
 
+
                 }
             }
         };