redash/client/app/visualizations/map/map-editor.html

<div>
  <ul class="tab-nav">
    <li ng-class="{active: $ctrl.currentTab == 'general'}"><a ng-click="$ctrl.setCurrentTab('general')">General</a></li>
    <li ng-class="{active: $ctrl.currentTab == 'groups'}"><a ng-click="$ctrl.setCurrentTab('groups')">Groups</a></li>
    <li ng-class="{active: $ctrl.currentTab == 'style'}"><a ng-click="$ctrl.setCurrentTab('style')">Style</a></li>
  </ul>

  <div ng-show="$ctrl.currentTab == 'general'" class="m-t-10 m-b-10">
    <div class="form-group">
      <label class="control-label">Latitude Column Name</label>
      <ui-select name="form-control" required ng-model="$ctrl.options.latColName">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in $ctrl.columnNames | remove:$ctrl.options.classify | remove:$ctrl.options.lonColName">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="$ctrl.columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>

    <div class="form-group">
      <label class="control-label">Longitude Column Name</label>
      <ui-select name="form-control" required ng-model="$ctrl.options.lonColName">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in $ctrl.columnNames | remove:$ctrl.options.classify | remove:$ctrl.options.latColName">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="$ctrl.columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>

    <div class="form-group">
      <label class="control-label">Group By</label>
      <ui-select name="form-control" required ng-model="$ctrl.options.classify">
        <ui-select-match placeholder="Choose column...">{{$select.selected}}</ui-select-match>
        <ui-select-choices repeat="column in $ctrl.classifyColumns | remove:$ctrl.options.lonColName | remove:$ctrl.options.latColName">
          <span ng-bind-html="column | highlight: $select.search"></span><span> </span>
          <small class="text-muted" ng-bind="$ctrl.columns[column].type"></small>
        </ui-select-choices>
      </ui-select>
    </div>
  </div>

  <div ng-show="$ctrl.currentTab == 'groups'" class="m-b-10">
    <table class="table table-condensed col-table">
      <thead>
      <th>Name</th>
      <th>Color</th>
      </thead>
      <tbody>
      <tr ng-repeat="(name, options) in $ctrl.options.groups">
        <td>{{name}}</td>
        <td>
          <input class="form-control" type="color" ng-model="options.color"/>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

  <div ng-show="$ctrl.currentTab == 'style'" class="m-t-10 m-b-10">
    <h4>Tile</h4>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="$ctrl.options.clusterMarkers">
        <i class="input-helper"></i> Cluster Markers
      </label>
    </div>

    <div class="form-group">
      <label class="control-label">Map Tiles</label>
      <select ng-options="tile.url as tile.name for tile in $ctrl.mapTiles"
        ng-model="$ctrl.options.mapTileUrl" class="form-control"></select>
    </div>

    <h4>Marker</h4>

    <div class="checkbox">
      <label>
        <input type="checkbox" ng-model="$ctrl.options.customizeMarkers">
        <i class="input-helper"></i>Override default style
      </label>
    </div>

    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label>Shape</label>
          <ui-select ng-model="$ctrl.options.iconShape"
            ng-disabled="!$ctrl.options.customizeMarkers">
            <ui-select-match>{{$select.selected.value}}</ui-select-match>
            <ui-select-choices repeat="shapes.key as (key, shapes) in $ctrl.iconShapes">
              {{shapes.value}}
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label>Icon Font
                  <span class="m-1-5" uib-popover-html="'Enter an icon name from<br/><a href=&quot;https://fontawesome.com/v4.7.0/icons/&quot; target=&quot;_blank&quot;>Font-Awesome 4.7.</a><br/>(e.g. check, times-circle, flag)<br/>Leave blank to remove.'"
              popover-trigger="'click outsideClick'">
              <i class="fa fa-question-circle"></i>
            </span>
          </label>
          <input ng-model="$ctrl.options.iconFont" type="text" class="form-control"
            ng-disabled="!$ctrl.options.customizeMarkers"></select>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Foreground Color</label>
          <ui-select ng-model="$ctrl.options.foregroundColor"
            ng-disabled="!$ctrl.options.customizeMarkers">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Background Color</label>
          <ui-select ng-model="$ctrl.options.backgroundColor"
            ng-disabled="!$ctrl.options.customizeMarkers">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-6">
        <div class="form-group">
          <label class="control-label">Border Color</label>
          <ui-select ng-model="$ctrl.options.borderColor"
            ng-disabled="!$ctrl.options.customizeMarkers">
            <ui-select-match>
              <color-box color="$select.selected.value"></color-box>
              <span ng-bind-html="$select.selected.key | capitalize"></span>
            </ui-select-match>
            <ui-select-choices repeat="color.value as (key, color) in $ctrl.colors">
              <color-box color="color.value"></color-box>
              <span ng-bind-html="color.key | capitalize | highlight: $select.search"></span>
            </ui-select-choices>
          </ui-select>
        </div>
      </div>
    </div>
  </div>
</div>