energylink/panels/map2/editor.html

<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>
    </div>
</div>

<div class="row-fluid">
    <div class="span3">
        <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">
        </form>
    </div>

    <div class="span1">
        <h6>Map</h6>
    </div>
</div>

<div class="row-fluid">
    <div class="span11">
        <h4>Display Options</h4>
    </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">
        <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>

<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>

<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>

    <div class="span9 small">
        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>