diff --git a/assets/autopilot.css b/assets/autopilot.css
index dab0fd7..0f14489 100644
--- a/assets/autopilot.css
+++ b/assets/autopilot.css
@@ -55,7 +55,7 @@ ul.autopilot {
   max-height:none;
   }
 
-ul.autopilot li {
+ul.autopilot > li {
   position:relative;
   background:#eee;
   padding:10px 30px 0px;
@@ -134,15 +134,13 @@ ul.autopilot li .aspects { padding:10px; }
   position:relative;
   background:#fff;
   padding:0px 224px 0px 0px;
-  height:0px;
+  display:none;
+  border-top:1px solid #ccc;
   margin:0px -30px 0px;
-  box-shadow:inset #ddd 0px 1px;
-  transition:height 100ms;
-  -moz-transition:height 100ms;
-  -webkit-transition:height 100ms;
+  min-height:200px;
   }
 
-.aspect.active { height:220px; }
+.aspect.active { display:block }
 
 .aspects a.active:after {
   content:'';
@@ -158,22 +156,29 @@ ul.autopilot li .aspects { padding:10px; }
   }
 
 .aspect ul.form li.active { display:block; }
-.aspect ul.form li { padding:5px 20px 4px 100px; }
-.aspect ul.form li.text { padding:10px 20px 9px; }
-.aspect ul.form li label { width:70px; margin-left:-80px; text-align:left; }
+.aspect ul.form li { max-width:none; padding:5px 10px 4px 100px; }
+.aspect ul.form li.text { padding:10px 10px 9px; }
+.aspect ul.form li label { width:80px; margin-left:-90px; text-align:left; }
+.aspect ul.form li:last-child { border:0px; }
 
-.aspect .text .joined {
-  position:absolute;
-  top:10px;
-  right:10px;
+#page .aspect ul.form li.filter {
+  padding-right:40px;
+  background-color:#ddd;
+  border-color:#ccc;
   }
+.aspect ul.form li.filter .ui-slider:before { background-color:#eee; }
+.aspect ul.form li.filter label { font-size:11px; text-transform:uppercase; }
+.aspect ul.form li.filter a.close { position:absolute; right:10px; top:5px; }
+
+.aspect .text .filters { position:absolute; top:10px; right:10px; }
+.aspect .text .filters select { width:80px; }
+.aspect .text .filters > * { vertical-align:middle; }
 
 .aspect .colorpicker {
   position:absolute;
   background:#fff;
   z-index:1;
   border-left:1px solid #ddd;
-  box-shadow:inset #ddd 0px 1px;
   padding:10px;
   }
 
@@ -187,7 +192,7 @@ ul.autopilot li .aspects { padding:10px; }
 .aspect .ui-slider-handle {
   width:40px;
   color:#fff;
-  font-size:9px;
+  font-size:10px;
   line-height:16px;
   text-shadow:rgba(0,0,0,0.5) 0px 1px;
   text-align:center;
@@ -197,19 +202,23 @@ ul.autopilot li .aspects { padding:10px; }
 
 .aspect option.null { color:#999; }
 
-.aspect .shades {
-  height:20px;
-  margin:0px 0px 5px;
-  overflow:hidden;
-  position:relative;
-  }
+.aspect .shade-links { margin-top:5px; }
 
 .aspect .swatch {
-  width:24px;
-  margin-right:1px;
+  float:none;
+  display:inline-block;
+  vertical-align:middle;
+  width:20px;
+  height:16px;
   background:#888 url(/assets/tilemill-autopilot/autopilot.png) -40px -40px;
   }
 
+.aspect .swatch.active {
+  box-shadow:
+    #fff 0px 0px 0px 1px,
+    #888 0px 0px 0px 3px;
+}
+
 .aspect .swatch,
 .aspect .swatch .fill {
   border-radius:3px;
@@ -217,4 +226,3 @@ ul.autopilot li .aspects { padding:10px; }
   }
 
 .aspect .swatch.active { display:block; }
-
diff --git a/models/Chart.bones b/models/Chart.bones
index fe43c66..e570497 100644
--- a/models/Chart.bones
+++ b/models/Chart.bones
@@ -1,11 +1,48 @@
 model = Backbone.Model.extend();
 
+model.prototype.deepGet = function(key) {
+    var deepGet = function(attr, keys) {
+        var key = keys.shift();
+        if (keys.length) {
+            return deepGet(attr[key] || {}, keys);
+        } else {
+            return attr[key];
+        }
+    }
+    return deepGet(this.attributes, key.split('.'));
+};
+
+model.prototype.deepSet = function(key, val, options) {
+    var deepSet = function(attr, keys, val) {
+        var key = keys.shift();
+        if (keys.length) {
+            if (keys.length === 1 && !isNaN(parseInt(keys[0]))) {
+                attr[key] = attr[key] || [];
+            } else {
+                attr[key] = attr[key] || {};
+            }
+            attr[key] = deepSet(attr[key], keys, val);
+        } else {
+            attr[key] = val;
+        }
+        return attr;
+    }
+    var root = key.split('.').shift();
+    var attr = {};
+    attr[root] = this.attributes[root];
+    console.warn(attr[root]);
+    return this.set(deepSet(attr, key.split('.'), val), options)
+        .trigger('change')
+        .trigger('change:' + root);
+};
+
 model.prototype.compile = function(layer) {
     function zoomRules(rules, scale, zoom, key, val) {
         if (scale <= 1) {
             rules[key] = val;
             return;
         }
+        zoom = zoom || [0,22];
         for (var z = zoom[0], i = 0; z <= zoom[1]; z++, i++) {
             rules['[zoom='+z+']'] = rules['[zoom='+z+']'] || {};
             rules['[zoom='+z+']'][key] = val + '*' + Math.pow(scale,i).toFixed(2);
@@ -34,12 +71,12 @@ model.prototype.compile = function(layer) {
         if (key === 'id') return memo;
         if (key.indexOf('_') === 0) return memo;
         var prefix = key.split('-')[0];
-        var zoom = this.get('_'+prefix+'-zoom') || [0,22];
+        var filters = this.get('_'+prefix+'-filters') || {};
         var scale = this.get('_'+prefix+'-scale') || 1;
-        var group = _('::<%=p%>[zoom>=<%=z[0]%>][zoom<=<%=z[1]%>]').template({
-            z:zoom,
-            p:prefix
-        });
+        var group = '::' + prefix + _(filters).map(function(val, key) {
+            return _('[<%=k%>>=<%=v[0]%>][<%=k%><=<%=v[1]%>]')
+                .template({ k:key, v:val });
+        }).join('');
         switch (prefix) {
         case 'background':
             memo[key] = val;
@@ -61,7 +98,7 @@ model.prototype.compile = function(layer) {
             memo[group] = memo[group] || {};
             switch (key) {
             case 'line-width':
-                zoomRules(memo[group], scale, zoom, key, val);
+                zoomRules(memo[group], scale, filters.zoom, key, val);
                 break;
             default:
                 memo[group][key] = val;
@@ -76,7 +113,7 @@ model.prototype.compile = function(layer) {
             switch (key) {
             case 'text-size':
             case 'text-character-spacing':
-                zoomRules(memo[group], scale, zoom, key, val);
+                zoomRules(memo[group], scale, filters.zoom, key, val);
                 break;
             default:
                 memo[group][key] = val;
@@ -90,7 +127,7 @@ model.prototype.compile = function(layer) {
             switch(key) {
             case 'marker-width':
             case 'marker-line-width':
-                zoomRules(memo[group], scale, zoom, key, val);
+                zoomRules(memo[group], scale, filters.zoom, key, val);
                 break;
             default:
                 memo[group][key] = val;
diff --git a/templates/AspectFilters._ b/templates/AspectFilters._
new file mode 100644
index 0000000..acd74e3
--- /dev/null
+++ b/templates/AspectFilters._
@@ -0,0 +1,25 @@
+<li class='text'>
+  <h2><%=type[0].toUpperCase() + type.substr(1)%></h2>
+  <span class='filters'>
+    <select data-key='_<%=type%>-filters'>
+      <option class='null' value=''>- Filter -</option>
+      <option value='zoom'>Zoom</option>
+      <% _(datasource.get('fields')).each(function(val, field) { %>
+      <% if (val.type === 'Number') { %>
+      <option value='<%=field%>'><%=field%></option>
+      <% } %>
+      <% }); %>
+    </select>
+    <a class='button' href='#filterAdd'><span class='icon plus reverse'></span></a>
+  </span>
+</li>
+<% _(model.get('_'+type+'-filters')||{}).each(function(filter, key) { %>
+<% var info = datasource.get('fields')[key]; %>
+<% if (info) { %>
+<li class='filter'>
+  <label><%= key==='zoom' ? 'Zoom' : key %></label>
+  <div class='slider range' data-key='_<%=type%>-filters.<%=key%>' data-min='<%=info.min || 0%>' data-max='<%=info.max || 10000%>'></div>
+  <a href='#filterRemove' data-key='_<%=type%>-filters.<%=key%>' class='icon close'></a>
+</li>
+<% } %>
+<% }); %>
diff --git a/templates/Aspectline._ b/templates/Aspectline._
index 326bd68..f273631 100644
--- a/templates/Aspectline._
+++ b/templates/Aspectline._
@@ -1,12 +1,6 @@
 <div class='colorpicker fill-e' data-key='line-color'></div>
 <ul class='form'>
-  <li class='text'>
-    <h2>Line</h2>
-  </li>
-  <li>
-    <label>Visibility</label>
-    <div class='slider range' data-key='_line-zoom' data-min='0' data-max='22'></div>
-  </li>
+  <%=this.AspectFilters(obj)%>
   <li>
     <label>Scale</label>
     <div class='slider value' data-key='_line-scale' data-step='0.1' data-min='1' data-max='2'></div>
diff --git a/templates/Aspectpolygon._ b/templates/Aspectpolygon._
index 4491695..52b911b 100644
--- a/templates/Aspectpolygon._
+++ b/templates/Aspectpolygon._
@@ -1,28 +1,22 @@
-<div class='colorpicker fill-e' data-key='polygon-fill' data-index='0'></div>
+<div class='colorpicker fill-e' data-key='polygon-fill.0'></div>
 <ul class='form'>
-  <li class='text'>
-    <h2>Polygon</h2>
-  </li>
-  <li>
-    <label>Visibility</label>
-    <div class='slider range' data-key='_polygon-zoom' data-min='0' data-max='22'></div>
-  </li>
+  <%=this.AspectFilters(obj)%>
   <li>
-    <label>Shades</label>
-    <div class='shades'>
+    <label>Colors</label>
+    <div class='shades swatches clearfix'>
       <% _(model.get('polygon-fill')).each(function(color, index) { %>
-      <a class='swatch' data-key='polygon-fill.<%=index%>'><span class='fill' style='background-color:<%=color%>'></span></a>
+      <a class='swatch' href='#swatch' data-key='polygon-fill.<%=index%>'><span class='fill' style='background-color:<%=color%>'></span></a>
       <% }); %>
     </div>
-    <span class='buttons joined'>
+    <div class='shade-links buttons joined'>
       <a class='button' href='#shadeRemove'><span class='icon minus reverse'></span></a>
       <a class='button' href='#shadeAdd'><span class='icon plus reverse'></span></a>
       <a class='button' href='#shadeFlip'><span class='icon autopilot-flip reverse'></span></a>
       <a class='button' href='#shadeInterpolate'><span class='icon autopilot-interpolate reverse'></a>
-    </span>
+    </div>
   </li>
   <li>
-    <label>Field</label>
+    <label>Color by</label>
     <select <% if ((model.get('polygon-fill')||[]).length <= 1) %>disabled='disabled'<%;%> name='_polygon-field'>
     <option class='null' value=''>- No field -</option>
     <% _(datasource.get('fields')||[]).each(function(val, field) { %>
@@ -31,8 +25,10 @@
     <% } %>
     <% }); %>
     </select>
-    <% var range = model.get('_polygon-range')||[]; %>
-    <div class='slider range minmax' data-key='_polygon-range' data-min='<%=range[0]||0%>' data-max='<%=range[1]||10000%>'></div>
+    <% var info = datasource.get('fields')[model.get('_polygon-field')]; %>
+    <% if (info) { %>
+    <div class='slider range minmax' data-key='_polygon-range' data-min='<%=info.min%>' data-max='<%=info.max%>'></div>
+    <% } %>
   </li>
 </ul>
 <div class='mask'></div>
diff --git a/templates/Aspecttext._ b/templates/Aspecttext._
index 9d10487..e0db980 100644
--- a/templates/Aspecttext._
+++ b/templates/Aspecttext._
@@ -1,12 +1,6 @@
 <div class='colorpicker fill-e' data-key='text-fill'></div>
 <ul class='form'>
-  <li class='text'>
-    <h2>Text</h2>
-  </li>
-  <li>
-    <label>Visibility</label>
-    <div class='slider range' data-key='_text-zoom' data-min='0' data-max='22'></div>
-  </li>
+  <%= this.AspectFilters(obj) %>
   <li>
     <label>Scale</label>
     <div class='slider value' data-key='_text-scale' data-step='0.1' data-min='1' data-max='2'></div>
@@ -20,7 +14,7 @@
     <div class='slider value' data-key='text-character-spacing' data-min='0' data-max='10'></div>
   </li>
   <li>
-    <label>Field</label>
+    <label>Text field</label>
     <select name='text-name'>
     <option class='null' value=''>- No field -</option>
     <% _(datasource.get('fields')||[]).each(function(val, field) { %>
diff --git a/views/Aspect.bones b/views/Aspect.bones
index eb57026..c8bdab7 100644
--- a/views/Aspect.bones
+++ b/views/Aspect.bones
@@ -1,15 +1,11 @@
 view = Backbone.View.extend();
 
 view.prototype.events = {
-    'slidecreate .slider': 'sliderValue',
     'slidechange .slider': 'sliderValue',
+    'slidecreate .slider': 'sliderUp',
     'slide .slider': 'sliderUp',
     'change select': 'select',
-    'click .shades a.swatch': 'shadeSwatch',
-    'click a[href=#shadeAdd]': 'shadeAdd',
-    'click a[href=#shadeRemove]': 'shadeRemove',
-    'click a[href=#shadeFlip]': 'shadeFlip',
-    'click a[href=#shadeInterpolate]': 'shadeInterpolate'
+    'click a': 'link'
 };
 
 view.prototype.css2rgb = views.Stylesheets.prototype.css2rgb;
@@ -20,13 +16,9 @@ view.prototype.initialize = function(options) {
         'select',
         'sliderUp',
         'sliderValue',
+        'link',
         'shades',
-        'shadeSwatch',
-        'shadeAdd',
-        'shadeFlip',
-        'shadeInterpolate',
-        'shadeRemove',
-        'polygonField');
+        'swatches');
     if (!options.type) throw new Error('options.type required');
     if (!options.target) throw new Error('options.target required');
     if (!options.project) throw new Error('options.project required');
@@ -41,7 +33,8 @@ view.prototype.initialize = function(options) {
 
     // Bind model change handlers.
     this.model.bind('change:polygon-fill', this.shades);
-    this.model.bind('change:_polygon-field', this.polygonField);
+    this.model.bind('change:polygon-fill', this.swatches);
+    this.model.bind('filters', this.render);
 
     // Load datasource.
     var layer = this.project.get('Layer').get(this.model.id);
@@ -50,9 +43,13 @@ view.prototype.initialize = function(options) {
         project: this.project.id,
         srs: null
     }));
-    this.datasource.fetch({
-        success: this.render,
-        error: function(m, e) { new views.Modal(err) }
+    this.datasource.fetchInfo({
+        success: _(function(m, resp) {
+            // Hack zoom 'field' in.
+            m.attributes.fields['zoom'] = {type:'Number', min:0, max:22};
+            this.render();
+        }).bind(this),
+        error: function(m, err) { new views.Modal(err) }
     });
 };
 
@@ -61,11 +58,7 @@ view.prototype.render = function() {
     var model = this.model;
 
     var colorpicker = this.$('.colorpicker');
-    var key = colorpicker.data('key');
-    var index = colorpicker.data('index');
-    var val = _(index).isUndefined()
-        ? this.model.get(key) || '#fff'
-        : (this.model.get(key) || [])[index] || '#fff';
+    var val = this.model.deepGet(colorpicker.data('key')) || '#fff';
     var hsv = Color.RGB_HSV(this.css2rgb(val));
     var loading = true;
     new Color.Picker({
@@ -75,43 +68,31 @@ view.prototype.render = function() {
         element: colorpicker.get(0),
         callback: function(hex) {
             if (loading) return;
-            var attr = {};
-            var key = colorpicker.data('key');
-            var index = colorpicker.data('index');
-            if (_(index).isUndefined()) {
-                attr[key] = '#' + hex;
-            } else {
-                attr[key] = _(model.get(key) || []).clone();
-                attr[key][index] = '#' + hex;
-            }
-            model.set(attr);
+            model.deepSet(colorpicker.data('key'), '#' + hex);
         }
     });
     loading = false;
 
     this.$('select').each(function() {
-        var key = $(this).attr('name');
-        $(this).val(model.get(key));
+        $(this).val(model.deepGet($(this).attr('name')));
     });
 
     this.$('.slider.value').each(function() {
-        var key = $(this).data('key');
         $(this).slider({
             min:$(this).data('min') || 0,
             max:$(this).data('max') || 0,
             step:$(this).data('step') || 1,
-            value: model.get(key) || 0,
+            value: model.deepGet($(this).data('key')) || 0,
             range: 'min'
         });
     });
 
     this.$('.slider.range').each(function() {
-        var key = $(this).data('key');
         $(this).slider({
             min:$(this).data('min') || 0,
             max:$(this).data('max') || 0,
             step:$(this).data('step') || 1,
-            values: model.get(key) || [
+            values: model.deepGet($(this).data('key')) || [
                 $(this).data('min') || 0,
                 $(this).data('max') || 0
             ],
@@ -121,8 +102,15 @@ view.prototype.render = function() {
     return this;
 };
 
+view.prototype.link = function(ev) {
+    var method = $(ev.currentTarget).attr('href').split('#').pop();
+    if (this[method]) return this[method](ev);
+};
+
 view.prototype.select = function(ev) {
     var key = $(ev.currentTarget).attr('name');
+    if (!key) return;
+
     var attr = {};
     attr[key] = $(ev.currentTarget).val();
     this.model.set(attr);
@@ -152,17 +140,15 @@ view.prototype.sliderUp = function(ev, ui) {
 view.prototype.sliderValue = function(ev, ui) {
     this.sliderUp(ev, ui);
     var attr = {};
-    if ($(ev.target).hasClass('range')) {
-        attr[$(ev.target).data('key')] = $(ev.target).slider('values');
-    } else {
-        attr[$(ev.target).data('key')] = $(ev.target).slider('value');
-    }
-    this.model.set(attr);
+    var val = $(ev.target).hasClass('range')
+        ? $(ev.target).slider('values')
+        : $(ev.target).slider('value');
+    this.model.deepSet($(ev.target).data('key'), val);
 };
 
 view.prototype.shadeAdd = function() {
     var shades = _(this.model.get('polygon-fill')).clone();
-    if (shades.length > 4) return false;
+    if (shades.length > 10) return false;
     shades.push(_(shades).last());
     this.model.set({'polygon-fill':shades});
     return false;
@@ -206,41 +192,45 @@ view.prototype.shadeInterpolate = function() {
 };
 
 view.prototype.shades = function() {
-    this.$('.shades').replaceWith($('.shades', templates['Aspect'+this.type](this)));
+    this.$('select[name=_polygon-field]')
+        .attr('disabled', this.model.get('polygon-fill').length < 2);
+};
+
+view.prototype.swatches = function() {
+    var index = this.$('.swatches a').index(this.$('.swatches a.active'));
+    console.warn(index);
+    this.$('.swatches')
+        .replaceWith($('.swatches', templates['Aspect'+this.type](this)));
+    this.$('.swatches a:eq('+index+')').addClass('active');
 };
 
-view.prototype.shadeSwatch = function(ev) {
+view.prototype.swatch = function(ev) {
     var target = $(ev.currentTarget);
-    var index = this.$('.shades a.swatch').index(target);
-    this.$('.colorpicker').data('index', index);
+    this.$('.colorpicker').data('key', target.data('key'));
+    this.$('a.swatch.active').removeClass('active');
+    target.addClass('active');
     return false;
 };
 
-view.prototype.polygonField = function() {
-    var field = this.model.get('_polygon-field');
-    if (!field) return;
+view.prototype.filterAdd = function(ev) {
+    var field = this.$('.filters select').val();
+    var info = this.datasource.get('fields')[field];
+    if (!field || !info) return false;
 
-    // Load datasource.
-    $(this.el).addClass('loading');
-    var layer = this.project.get('Layer').get(this.model.id);
-    new models.Datasource(_(layer.get('Datasource')).extend({
-        id: layer.id,
-        project: this.project.id,
-        srs: null
-    })).fetchFeatures({
-        success: _(function(m) {
-            $(this.el).removeClass('loading');
-            var info = m.get('fields')[field];
-            this.$('.minmax').replaceWith($('.minmax', templates['Aspect'+this.type](this)));
-            this.$('.minmax').slider({
-                min:info.min,
-                max:info.max,
-                step:(info.max - info.min) > 10 ? 1 : 0.1,
-                values: this.model.get('_polygon-range') || [info.min, info.max],
-                range: true
-            });
-        }).bind(this)
-    });
+    var key = this.$('.filters select').data('key') +'.'+ field;
+    var filter = this.model.deepGet(key) || [info.min||0, info.max||0];
+    this.model.deepSet(key, filter);
+    this.model.trigger('filters');
+    return false;
+};
+
+view.prototype.filterRemove = function(ev) {
+    var key = $(ev.currentTarget).data('key').split('.').shift();
+    var filter = $(ev.currentTarget).data('key').split('.').pop();
+    var filters = _(this.model.get(key) || {}).clone();
+    delete filters[filter];
+    this.model.deepSet(key, filters);
+    this.model.trigger('filters');
     return false;
 };