Geopoint settings

panels/map2/editor.html

@@ -1,75 +1,120 @@
-  <div class="row-fluid" ng-controller="map2">
+<style>
+    .tabDetails {
+        border-bottom: 1px solid #ddd;
+        padding-bottom:20px;
+    }
+    .tabDetails td {
+        padding-right: 10px;
+        padding-bottom:10px;
+    }
+</style>
+<div class="row-fluid" ng-controller="map2">
     <div class="span11">
-    The map panel uses 2 letter country or US state codes to plot concentrations on a map. Darker terroritories mean more records matched that area. If multiple queries are sent from a single panel the <strong>first query will be displayed</strong>
+        The map panel uses 2 letter country or US state codes to plot concentrations
+        on a map. Darker terroritories mean more records matched that area. If
+        multiple queries are sent from a single panel the <strong>first query will be
+        displayed</strong>
     </div>
-  </div>
+</div>
 
-  <div class="row-fluid">    
+<div class="row-fluid">
     <div class="span3">
-      <form>
-        <h6>Field</h6>
-        <input type="text" class="input-small" ng-model="panel.field">
-      </form>
+        <form>
+            <h6>Field</h6>
+            <input type="text" class="input-small" ng-model="panel.field">
+        </form>
     </div>
+
     <div class="span6">
-      <form class="input-append">
-        <h6>Query</h6>
-        <input type="text" ng-model="panel.query">
-        <button class="btn" ng-click="get_data();"><i class="icon-search"></i></button>
-      </form>
+        <form class="input-append">
+            <h6>Query</h6><input type="text" ng-model="panel.query">
+        </form>
     </div>
-    <div class="span1"><h6>Map</h6> 
-      <select ng-change="$emit('render')" class="input-small" ng-model="panel.map" ng-options="f for f in ['world','europe','usa']"></select>
+
+    <div class="span1">
+        <h6>Map</h6>
     </div>
-  </div>
+</div>
 
-  <div class="row-fluid">
-      <div class="span11">
+<div class="row-fluid">
+    <div class="span11">
         <h4>Display Options</h4>
-      </div>
-
-      <!--
+    </div>
+    <!--
         Rolling our own tab control here because the Angular-Strap Tab directive doesn't allow
         updates to components inside, which is quite bizarre.  Or I just can't figure it out...
-      -->
-      <div class="span11" style="margin-bottom:20px">
-          <ul class="nav nav-tabs" ng-cloak>
-              <li ng-repeat="tab in panel.displayTabs" ng-class="{active:isActive(tab)}">
-                  <a ng-click="tabClick(tab)">{{tab}}</a>
-              </li>
-          </ul>
-
-          <div ng-show="isActive('geopoints')">
-              <table ng-controller="map2">
-                  <tbody>
-                  <tr>
-                      <td style="width:100px" >
-                          <button type="button" class="btn"
-                                  bs-button
-                                  ng-class="{'btn-success': panel.display.geopoints.enabled}"
-                                  ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
-
-                      </td>
-                      <td>
+    -->
 
+    <div class="span11">
+        <ul class="nav nav-tabs" ng-cloak="">
+            <li ng-repeat="tab in panel.displayTabs" ng-class="{active:isActive(tab)}">
+                <a ng-click="tabClick(tab)">{{tab}}</a>
+            </li>
+        </ul>
+    </div>
+</div>
 
-                      </td>
-                  </tr>
-                  </tbody>
+<div class="row-fluid">
+    <div class="span8 offset1 tabDetails">
+        <div ng-show="isActive('geopoints')">
+            <table>
+                <tbody  >
+                <tr>
+                    <td>Geopoints</td>
+                    <td>
+                        <button type="button" class="btn" bs-button
+                            ng-change="$emit('render')"
+                            ng-class="{'btn-success': panel.display.geopoints.enabled}"
+                            ng-model="panel.display.geopoints.enabled">{{panel.display.geopoints.enabled|enabledText}}</button>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Point size</td>
+                    <td>
+                        <input type="text" style="width:100px"
+                            ng-change="$emit('render')"
+                            data-placement="right"
+                            bs-tooltip="'Controls the size of the geopoints on the map'"
+                            ng-model="panel.display.geopoints.pointSize"
+                            value="{{panel.display.geopoints.pointSize}}" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>Point Transparency</td>
+                    <td>
+                        <input type="text" style="width:100px"
+                               ng-change="$emit('render')"
+                               data-placement="right"
+                               bs-tooltip="'Controls the transparency of geopoints. Valid numbers are between 0.0 and 1.0'"
+                               ng-model="panel.display.geopoints.pointAlpha"
+                               value="{{panel.display.geopoints.pointAlpha}}" />
+                    </td>
+                </tr>
+                <tr>
+                    <td>Autosizing</td>
+                    <td>
+                        <input type="checkbox"
+                               ng-change="$emit('render')"
+                               data-placement="right"
+                               bs-tooltip="'Allows point sizes to scale as you zoom in and out of the map.'" />
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
 
-              </table>
-          </div>
-      </div>
-  </div>
+<h5>Panel Spy</h5>
 
-  <h5>Panel Spy</h5>
-  <div class="row-fluid">
-    <div class="span2"> 
-      <label class="small"> Spyable </label><input type="checkbox" ng-model="panel.spyable" ng-checked="panel.spyable">
+<div class="row-fluid">
+    <div class="span2">
+        <label class="small">Spyable</label> <input type="checkbox" ng-model=
+            "panel.spyable" ng-checked="panel.spyable">
     </div>
+
     <div class="span9 small">
-      The panel spy shows 'behind the scenes' information about a panel. It can
-      be accessed by clicking the <i class='icon-eye-open'></i> in the top right
-      of the panel.
+        The panel spy shows 'behind the scenes' information about a panel. It can be
+        accessed by clicking the in the top right of the panel.
     </div>
-  </div>
+</div>

panels/map2/module.js

@@ -14,7 +14,9 @@ angular.module('kibana.map2', [])
             display: {
                 geopoints: {
                     enabled: true,
-                    enabledText: "Enabled"
+                    enabledText: "Enabled",
+                    pointSize: 1,
+                    pointAlpha: 0.6
                 },
                 binning: {
 
@@ -221,6 +223,8 @@ angular.module('kibana.map2', [])
                                 return projection([decoded.longitude, decoded.latitude]);
                             });
 
+
+
                             var color = d3.scale.linear()
                                 .domain([0, 20])
                                 .range(["white", "steelblue"])
@@ -245,27 +249,22 @@ angular.module('kibana.map2', [])
                                 })
                                 .attr("opacity", 1);
 
-                            /*
+                            /* raw geopoints */
 
-                             raw, ugly points
-                             */
+                            if (scope.panel.display.geopoints.enabled) {
 
-                            var points = _.map(scope.data, function (k, v) {
-                                var decoded = geohash.decode(v);
-                                return {
-                                    lat: decoded.latitude,
-                                    lon: decoded.longitude
-                                };
-                            });
 
-                            g.selectAll("circles.points")
-                                .data(points)
-                                .enter()
-                                .append("circle")
-                                .attr("r", 1)
-                                .attr("transform", function (d) {
-                                    return "translate(" + projection([d.lon, d.lat]) + ")";
-                                });
+                                g.selectAll("circles.points")
+                                    .data(points)
+                                    .enter()
+                                    .append("circle")
+                                    .attr("r", scope.panel.display.geopoints.pointSize)
+                                    .attr("opacity", scope.panel.display.geopoints.pointAlpha)
+                                    .attr("transform", function (d) {
+                                        return "translate(" + d[0] + "," + d[1] + ")";
+                                    });
+                            }
+
 
                         });