Big refactor, moving initialization code to own function, so that multiple…

Big refactor, moving initialization code to own function, so that multiple graphs play nice together

panels/map2/display/binning.js

@@ -28,10 +28,7 @@ function displayBinning(scope, dimensions, projection, path) {
 
 
     } else {
     } else {
 
 
-        binPoints = _.map(scope.data, function (k, v) {
-            var decoded = geohash.decode(v);
-            return projection([decoded.longitude, decoded.latitude]);
-        });
+        binPoints = scope.projectedPoints;
     }
     }
 
 
     //bin and sort the points, so we can set the various ranges appropriately
     //bin and sort the points, so we can set the various ranges appropriately

panels/map2/display/geopoints.js

@@ -13,16 +13,30 @@ function displayGeopoints(scope, path) {
 
 
     */
     */
 
 
+
+
+    var points = []
+    if (scope.panel.display.bullseye.enabled) {
+        points = scope.points;
+    }
+
     var circle = d3.geo.circle();
     var circle = d3.geo.circle();
     var degrees = 180 / Math.PI
     var degrees = 180 / Math.PI
 
 
-    scope.g.selectAll("circles.points")
-        .data(points)
-        .enter().append("path")
+    var geopoints = scope.g.selectAll("geopoints")
+        .data(points);
+
+    geopoints.enter().append("path")
         .datum(function(d) {
         .datum(function(d) {
-            return circle.origin([d[0], d[1]]).angle(5 / 6371 * degrees)();
+            return circle.origin([d[0], d[1]]).angle(scope.panel.display.geopoints.pointSize / 6371 * degrees)();
         })
         })
         .attr("d", path)
         .attr("d", path)
         .attr("class", "geopoint");
         .attr("class", "geopoint");
 
 
+    geopoints.exit().remove();
+
+
+
+
+
 }
 }
\ No newline at end of file

panels/map2/editor.html

@@ -61,7 +61,7 @@
 
 
         <div class="span11">
         <div class="span11">
             <ul class="nav nav-tabs" ng-cloak="">
             <ul class="nav nav-tabs" ng-cloak="">
-                <li ng-repeat="tab in panel.displayTabs" ng-class="{active:isActive(tab)}">
+                <li ng-repeat="tab in ['Geopoints', 'Binning', 'Choropleth', 'Bullseye', 'Data']" ng-class="{active:isActive(tab)}">
                     <a ng-click="tabClick(tab)">{{tab}}</a>
                     <a ng-click="tabClick(tab)">{{tab}}</a>
                 </li>
                 </li>
             </ul>
             </ul>
@@ -87,7 +87,7 @@
                         <input type="text" style="width:100px"
                         <input type="text" style="width:100px"
                             ng-change="$emit('render')"
                             ng-change="$emit('render')"
                             data-placement="right"
                             data-placement="right"
-                            bs-tooltip="'Controls the size of the geopoints on the map'"
+                            bs-tooltip="'Controls the size of the geopoints on the map. Units in kilometers (km)'"
                             ng-model="panel.display.geopoints.pointSize"
                             ng-model="panel.display.geopoints.pointSize"
                             value="{{panel.display.geopoints.pointSize}}" />
                             value="{{panel.display.geopoints.pointSize}}" />
                     </td>
                     </td>
@@ -216,7 +216,7 @@
                         <button type="button" class="btn" bs-button
                         <button type="button" class="btn" bs-button
                                 ng-change="$emit('render')"
                                 ng-change="$emit('render')"
                                 ng-class="{'btn-success': panel.display.bullseye.enabled}"
                                 ng-class="{'btn-success': panel.display.bullseye.enabled}"
-                                ng-model="panel.display.bullseye.enabled">{{panel.display.choropleth.enabled|enabledText}}</button>
+                                ng-model="panel.display.bullseye.enabled">{{panel.display.bullseye.enabled|enabledText}}</button>
                     </td>
                     </td>
                 </tr>
                 </tr>
                 <tr>
                 <tr>
@@ -259,6 +259,12 @@
                                value="{{panel.display.data.samples}}" />
                                value="{{panel.display.data.samples}}" />
                     </td>
                     </td>
                 </tr>
                 </tr>
+                <tr>
+                    <td>Map Projection</td>
+                    <td>
+                        <select ng-model="panel.display.data.type" ng-options="option.id as option.text for option in options.data.dropdown"></select>
+                    </td>
+                </tr>
                 </tbody>
                 </tbody>
             </table>
             </table>
         </div>
         </div>

panels/map2/module.html

@@ -7,11 +7,15 @@
 
 
         .land {
         .land {
             fill: #D1D1D1;
             fill: #D1D1D1;
+            stroke: #595959;
+            stroke-linejoin: round;
+            stroke-linecap: round;
+            stroke-width: .1px;
         }
         }
 
 
         .boundary {
         .boundary {
             fill: none;
             fill: none;
-            stroke: #fff;
+            stroke: #000;
             stroke-linejoin: round;
             stroke-linejoin: round;
             stroke-linecap: round;
             stroke-linecap: round;
         }
         }
@@ -43,9 +47,12 @@
             stroke-width: .5px;
             stroke-width: .5px;
             fill: #000;
             fill: #000;
         }
         }
+
+        .dropdown-menu{position:absolute;top:auto;left:auto;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;background-color:#ffffff;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.2);*border-right-width:2px;*border-bottom-width:2px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
     </style>
     </style>
   <span ng-show="panel.spyable" style="position:absolute;right:0px;top:0px" class='panelextra pointer'>
   <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>
     <i bs-modal="'partials/modal.html'" class="icon-eye-open"></i>
   </span>
   </span>
+
   <div map2 params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
   <div map2 params="{{panel}}" style="height:{{panel.height || row.height}}"></div>
 </kibana-panel>
 </kibana-panel>
\ No newline at end of file