diff --git a/examples/choropleth/main.js b/examples/choropleth/main.js
index 905bd9e8b7..329afccd91 100644
--- a/examples/choropleth/main.js
+++ b/examples/choropleth/main.js
@@ -71,10 +71,9 @@ $(function () {
 
         choropleth
           .scalar(mockScalarData2);
-
+        choropleth.draw();
       }, 5000);
-      // Draw the map
-      map.draw();
+      choropleth.draw();
     }
   });
 });
diff --git a/examples/contour/main.js b/examples/contour/main.js
index a4660633d9..147eaab1d9 100644
--- a/examples/contour/main.js
+++ b/examples/contour/main.js
@@ -79,8 +79,7 @@ $(function () {
     url: '../../data/oahu.json',
     success: function (data) {
       var contour = makeContour(data, vglLayer);
-      // Draw the map
-      map.draw();
+      contour.draw();
       /* After 10 second, load a denser data set */
       window.setTimeout(function () {
         $.ajax({
@@ -88,7 +87,7 @@ $(function () {
           success: function (data) {
             vglLayer.deleteFeature(contour);
             contour = makeContour(data, vglLayer, contour);
-            map.draw();
+            contour.draw();
           }
         });
       }, 10000);
diff --git a/examples/heatmap/main.js b/examples/heatmap/main.js
index a27b5c9d73..5bc06e74ff 100644
--- a/examples/heatmap/main.js
+++ b/examples/heatmap/main.js
@@ -179,7 +179,7 @@ $(function () {
     }
     heatmap.data(rows);
     window.heatmap.rows = rows;
-    map.draw();
+    heatmap.draw();
     var text = 'Shown: ' + rows.length;
     $('#points-shown').text(text).attr('title', text);
   }
@@ -211,7 +211,7 @@ $(function () {
       case 'binned':
         heatmapOptions[param] = value;
         heatmap[param](value);
-        map.draw();
+        heatmap.draw();
         break;
       case 'blurRadius': case 'radius':
         processedValue = value.length ? parseFloat(value) : undefined;
@@ -221,7 +221,7 @@ $(function () {
         }
         heatmapOptions.style[param] = processedValue;
         heatmap.style(param, processedValue);
-        map.draw();
+        heatmap.draw();
         break;
       case 'dataset':
         fetch_data();
@@ -229,7 +229,7 @@ $(function () {
       case 'gaussian':
         heatmapOptions.style[param] = processedValue;
         heatmap.style(param, processedValue);
-        map.draw();
+        heatmap.draw();
         break;
       case 'gradient':
         var gradient = {};
@@ -251,7 +251,7 @@ $(function () {
         }
         heatmapOptions.style.color = gradient;
         heatmap.style('color', gradient);
-        map.draw();
+        heatmap.draw();
         var gradkeys = Object.keys(heatmapOptions.style.color).sort();
         value = gradkeys.map(function (key) {
           return [key, Math.round(gradient[key].r * 255), Math.round(gradient[key].g * 255), Math.round(gradient[key].b * 255), gradient[key].a].join(',');
@@ -264,7 +264,7 @@ $(function () {
         }
         heatmapOptions[param] = processedValue;
         heatmap[param](processedValue);
-        map.draw();
+        heatmap.draw();
         break;
       case 'opacity':
         processedValue = value.length ? parseFloat(value) : undefined;
@@ -296,7 +296,6 @@ $(function () {
   }
 
   map.createLayer('osm');
-  map.draw();
   layer = map.createLayer('feature', layerOptions);
   heatmap = layer.createFeature('heatmap', heatmapOptions)
     .intensity(function (d) {
diff --git a/examples/hurricanes/main.js b/examples/hurricanes/main.js
index 7c23d2831f..8f47eef559 100644
--- a/examples/hurricanes/main.js
+++ b/examples/hurricanes/main.js
@@ -319,14 +319,14 @@ $(function () {
         'strokeColor': function (d) {
           return cscale(d.c);
         },
-        'strokeWidth': function (d, i, l) {
-          if (l.hover) {
+        'strokeWidth': function (d, i, l, pos) {
+          if (data[pos].hover) {
             return 5;
           }
           return 1.5;
         },
-        'strokeOpacity': function (d, i, l) {
-          if (l.hover) {
+        'strokeOpacity': function (d, i, l, pos) {
+          if (data[pos].hover) {
             return 1;
           }
           if (d.c === 0) {
@@ -346,9 +346,9 @@ $(function () {
         evt.data.hover = true;
         makeInfoBox(evt.data);
         this.modified();
-        map.draw();
+        feature.draw();
       });
-    map.draw();
+    feature.draw();
   }
 
   // Create a map object
@@ -369,9 +369,6 @@ $(function () {
     }
   );
 
-  // Draw the map
-  map.draw();
-
   // Create a feature layer to draw on
   layer = map.createLayer('feature');
 
diff --git a/examples/layerEvents/main.css b/examples/layerEvents/main.css
index 5b64ba2e24..189ab74aee 100644
--- a/examples/layerEvents/main.css
+++ b/examples/layerEvents/main.css
@@ -8,7 +8,7 @@
 
 .top-layer-overlay {
   fill: yellow;
-  fill-opacity: 5%;
+  fill-opacity: 0.05;
 }
 
 rect.background {
diff --git a/examples/layerEvents/main.js b/examples/layerEvents/main.js
index dea29ee83c..8c6672abc6 100644
--- a/examples/layerEvents/main.js
+++ b/examples/layerEvents/main.js
@@ -101,9 +101,6 @@ $(function () {
       d3.event.stopPropagation();
     });
 
-  // Draw the map
-  map.draw();
-
   // Connect the button that adds or removes the top layer.
   var top = null;
   $('.layer-toggle ').text('Add top layer')
diff --git a/examples/layers/main.js b/examples/layers/main.js
index d4c6d7f27c..dc1dfa65fc 100644
--- a/examples/layers/main.js
+++ b/examples/layers/main.js
@@ -136,6 +136,4 @@ $(function () {
   drawLayer(map, 'unscaled-moving', 'This is a moving layer without rescaling.', 1);
   drawLayer(map, 'scaled-moving', 'This is a moving layer with rescaling.', 2, true);
 
-  // Draw the map
-  map.draw();
 });
diff --git a/examples/legend/main.js b/examples/legend/main.js
index 7416142475..ff2c38f18f 100644
--- a/examples/legend/main.js
+++ b/examples/legend/main.js
@@ -112,6 +112,4 @@ $(function () {
     }
   ]);
 
-  // Draw the map
-  map.draw();
 });
diff --git a/examples/picking/example.json b/examples/picking/example.json
new file mode 100644
index 0000000000..5bf4bc9c1c
--- /dev/null
+++ b/examples/picking/example.json
@@ -0,0 +1,10 @@
+{
+  "path": "picking",
+  "title": "Mouse picking for points and lines",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js", "widget.js"],
+  "about": {
+    "text": "This example demonstrates how to attach handlers to various mouse interactions that allow the users to select features.  Try moving the mouse over the features and clicking."
+  },
+  "disabled": true
+}
diff --git a/examples/picking/main.js b/examples/picking/main.js
index c57d128cc1..7f1122afc6 100644
--- a/examples/picking/main.js
+++ b/examples/picking/main.js
@@ -49,13 +49,13 @@ $(function () {
   function handleMouseClick(evt) {
     evt.data.clicked = !evt.data.clicked;
     this.modified();
-    map.draw();
+    this.draw();
   }
 
   function handleBrush(evt) {
     evt.data.clicked = true;
     this.modified();
-    map.draw();
+    this.draw();
   }
 
   var color = d3.scale.category10();
@@ -83,6 +83,6 @@ $(function () {
     .geoOn(geo.event.feature.mouseclick, handleMouseClick)
     .geoOn(geo.event.feature.brushend, handleBrush);
 
-  // Draw the map
-  map.draw();
+  vglLayer.draw();
+  svgLayer.draw();
 });
diff --git a/examples/points/main.js b/examples/points/main.js
index e7140ac29c..349c8b0faa 100644
--- a/examples/points/main.js
+++ b/examples/points/main.js
@@ -28,12 +28,12 @@ $(function () {
         .geoOn(geo.event.feature.mouseover, function (evt) {
           evt.data.opacity = 0.5;
           this.modified();        // mark the feature as modified
-          layer.map().draw();     // we must redraw as necessary
+          this.draw();            // we must redraw as necessary
         })
         .geoOn(geo.event.feature.mouseout, function (evt) {
           evt.data.opacity = 0.1;
           this.modified();
-          layer.map().draw();
+          this.draw();
         })
 
         // You must call the draw method after setting all feature
@@ -102,7 +102,4 @@ $(function () {
     };
   });
   makePoints(data, svgLayer, svgColor);
-
-  // Draw the map
-  map.draw();
 });
diff --git a/examples/quads/main.js b/examples/quads/main.js
index db2ac4440d..0172c8fe0d 100644
--- a/examples/quads/main.js
+++ b/examples/quads/main.js
@@ -125,7 +125,7 @@ $(function () {
         // asked for it not to have been cached to begin with.
         delete evt.data._cachedQuad;
         this.modified();
-        layer.map().draw();
+        this.draw();
       })
       .geoOn(geo.event.feature.mouseout, function (evt) {
         if (evt.data.orig_opacity === undefined) {
@@ -134,12 +134,10 @@ $(function () {
         evt.data.opacity = evt.data.orig_opacity || undefined;
         delete evt.data._cachedQuad;
         this.modified();
-        layer.map().draw();
+        this.draw();
       })
       .draw();
 
-    map.draw();
-
     quadDebug.map = map;
     quadDebug.layer = layer;
     quadDebug.quads = quads;
diff --git a/examples/reprojection/main.js b/examples/reprojection/main.js
index be1b913d2c..f9e574c5d7 100644
--- a/examples/reprojection/main.js
+++ b/examples/reprojection/main.js
@@ -177,7 +177,7 @@ $(function () {
         evt.data.opacity = 0.5;
         evt.data.strokeOpacity = 1;
         this.modified();
-        pointLayer.map().draw();
+        this.draw();
         tooltip.position({x: evt.data.longitude, y: evt.data.latitude});
         tooltipElem.text(evt.data.city);
         tooltipElem.removeClass('hidden');
@@ -186,10 +186,10 @@ $(function () {
         evt.data.opacity = undefined;
         evt.data.strokeOpacity = undefined;
         this.modified();
-        pointLayer.map().draw();
+        this.draw();
         tooltipElem.addClass('hidden');
-      });
-    pointLayer.map().draw();
+      })
+      .draw();
 
     // Make variables available as a global for easier debug
     exampleDebug.map = map;
@@ -228,7 +228,7 @@ $(function () {
       switch (param) {
         case 'capitals':
           pointFeature.visible(processedValue);
-          map.draw();
+          pointFeature.draw();
           break;
         case 'gcs':
           mapParams.gcs = gcsTable[processedValue] || 'EPSG:3857';
diff --git a/examples/vectors/main.js b/examples/vectors/main.js
index d62bf612fe..534dcca8fd 100644
--- a/examples/vectors/main.js
+++ b/examples/vectors/main.js
@@ -91,5 +91,7 @@ $(function () {
       }
     });
 
+  /* We could draw the two features as we create them.  Instead, this ensures
+   * that all features get drawn. */
   map.draw();
 });
diff --git a/examples/widgets/main.js b/examples/widgets/main.js
index 5640a6cbee..5c2639f632 100644
--- a/examples/widgets/main.js
+++ b/examples/widgets/main.js
@@ -54,7 +54,8 @@ $(function () {
     .data(coordinates)
     .style('radius', 5)
     .style('fillColor', function () { return 'red'; })
-    .position(function (d) { return d; });
+    .position(function (d) { return d; })
+    .draw();
 
   // Create a ui layer
   var ui = map.createLayer('ui');
@@ -83,7 +84,4 @@ $(function () {
 
   // Create a zoom slider widget
   ui.createWidget('slider');
-
-  // Draw the map
-  map.draw();
 });
diff --git a/src/canvas/heatmapFeature.js b/src/canvas/heatmapFeature.js
index 40f096cc59..1ff1fc920d 100644
--- a/src/canvas/heatmapFeature.js
+++ b/src/canvas/heatmapFeature.js
@@ -22,6 +22,9 @@ var canvas_heatmapFeature = function (arg) {
     return new canvas_heatmapFeature(arg);
   }
   heatmapFeature.call(this, arg);
+  var object = require('./object');
+
+  object.call(this);
 
   ////////////////////////////////////////////////////////////////////////////
   /**
diff --git a/src/canvas/object.js b/src/canvas/object.js
new file mode 100644
index 0000000000..8fa037e4ab
--- /dev/null
+++ b/src/canvas/object.js
@@ -0,0 +1,44 @@
+var inherit = require('../inherit');
+var sceneObject = require('../sceneObject');
+
+//////////////////////////////////////////////////////////////////////////////
+/**
+ * Canvas specific subclass of object which rerenders when the object is drawn.
+ * @class geo.canvas.object
+ * @extends geo.sceneObject
+ */
+//////////////////////////////////////////////////////////////////////////////
+
+var canvas_object = function (arg) {
+  'use strict';
+
+  var object = require('../object');
+
+  // this is used to extend other geojs classes, so only generate
+  // a new object when that is not the case... like if this === window
+  if (!(this instanceof object)) {
+    return new canvas_object(arg);
+  }
+  sceneObject.call(this);
+
+  var m_this = this,
+      s_draw = this.draw;
+
+  ////////////////////////////////////////////////////////////////////////////
+  /**
+  *  Redraw the object.
+  */
+  ////////////////////////////////////////////////////////////////////////////
+  this.draw = function () {
+    m_this._update();
+    m_this.renderer()._render();
+    s_draw();
+    return m_this;
+  };
+
+  return this;
+};
+
+inherit(canvas_object, sceneObject);
+module.exports = canvas_object;
+
diff --git a/src/canvas/quadFeature.js b/src/canvas/quadFeature.js
index ea45daba09..a595e306f4 100644
--- a/src/canvas/quadFeature.js
+++ b/src/canvas/quadFeature.js
@@ -20,6 +20,9 @@ var canvas_quadFeature = function (arg) {
   }
   quadFeature.call(this, arg);
 
+  var object = require('./object');
+  object.call(this);
+
   var $ = require('jquery');
 
   var m_this = this,
diff --git a/src/gl/choroplethFeature.js b/src/gl/choroplethFeature.js
index 3084d5c151..2cad3264a1 100644
--- a/src/gl/choroplethFeature.js
+++ b/src/gl/choroplethFeature.js
@@ -29,6 +29,7 @@ var gl_choroplethFeature = function (arg) {
       m_gl_polygons = null,
       s_exit = this._exit,
       s_init = this._init,
+      s_draw = this.draw,
       s_update = this._update;
 
   /* Create the choropleth.  This calls the base class to generate the contours,
@@ -38,6 +39,17 @@ var gl_choroplethFeature = function (arg) {
     return m_this.createChoropleth();
   }
 
+  this.draw = function () {
+    m_this._update();
+    if (m_gl_polygons) {
+      for (var idx = 0; idx < m_gl_polygons.length; idx += 1) {
+        m_gl_polygons[idx].draw();
+      }
+    }
+    s_draw();
+    return m_this;
+  };
+
   ////////////////////////////////////////////////////////////////////////////
   /**
    * Initialize
diff --git a/src/gl/contourFeature.js b/src/gl/contourFeature.js
index dfd12110cb..31576b8498 100644
--- a/src/gl/contourFeature.js
+++ b/src/gl/contourFeature.js
@@ -23,6 +23,9 @@ var gl_contourFeature = function (arg) {
   var vgl = require('vgl');
   var transform = require('../transform');
   var util = require('../util');
+  var object = require('./object');
+
+  object.call(this);
 
   ////////////////////////////////////////////////////////////////////////////
   /**
diff --git a/src/gl/geomFeature.js b/src/gl/geomFeature.js
index 823839b159..bee6779976 100644
--- a/src/gl/geomFeature.js
+++ b/src/gl/geomFeature.js
@@ -21,6 +21,9 @@ var gl_geomFeature = function (arg) {
 
   arg = arg || {};
   geomFeature.call(this, arg);
+  var object = require('./object');
+
+  object.call(this);
 
   // Initialize
   var m_this = this,
diff --git a/src/gl/lineFeature.js b/src/gl/lineFeature.js
index e7a1f6300a..9a5ddde53f 100644
--- a/src/gl/lineFeature.js
+++ b/src/gl/lineFeature.js
@@ -22,6 +22,9 @@ var gl_lineFeature = function (arg) {
   var vgl = require('vgl');
   var transform = require('../transform');
   var util = require('../util');
+  var object = require('./object');
+
+  object.call(this);
 
   ////////////////////////////////////////////////////////////////////////////
   /**
diff --git a/src/gl/object.js b/src/gl/object.js
new file mode 100644
index 0000000000..b529d4ec26
--- /dev/null
+++ b/src/gl/object.js
@@ -0,0 +1,44 @@
+var inherit = require('../inherit');
+var sceneObject = require('../sceneObject');
+
+//////////////////////////////////////////////////////////////////////////////
+/**
+ * VGL specific subclass of object which rerenders when the object is drawn.
+ * @class geo.gl.object
+ * @extends geo.sceneObject
+ */
+//////////////////////////////////////////////////////////////////////////////
+
+var gl_object = function (arg) {
+  'use strict';
+
+  var object = require('../object');
+
+  // this is used to extend other geojs classes, so only generate
+  // a new object when that is not the case... like if this === window
+  if (!(this instanceof object)) {
+    return new gl_object(arg);
+  }
+  sceneObject.call(this);
+
+  var m_this = this,
+      s_draw = this.draw;
+
+  ////////////////////////////////////////////////////////////////////////////
+  /**
+  *  Redraw the object.
+  */
+  ////////////////////////////////////////////////////////////////////////////
+  this.draw = function () {
+    m_this._update();
+    m_this.renderer()._render();
+    s_draw();
+    return m_this;
+  };
+
+  return this;
+};
+
+inherit(gl_object, sceneObject);
+module.exports = gl_object;
+
diff --git a/src/gl/pointFeature.js b/src/gl/pointFeature.js
index 179d58dab3..9bd195cc57 100644
--- a/src/gl/pointFeature.js
+++ b/src/gl/pointFeature.js
@@ -22,6 +22,9 @@ var gl_pointFeature = function (arg) {
   var vgl = require('vgl');
   var transform = require('../transform');
   var util = require('../util');
+  var object = require('./object');
+
+  object.call(this);
 
   ////////////////////////////////////////////////////////////////////////////
   /**
diff --git a/src/gl/polygonFeature.js b/src/gl/polygonFeature.js
index 9544855c5a..3dd9d45a54 100644
--- a/src/gl/polygonFeature.js
+++ b/src/gl/polygonFeature.js
@@ -22,6 +22,9 @@ var gl_polygonFeature = function (arg) {
   var vgl = require('vgl');
   var earcut = require('earcut');
   var transform = require('../transform');
+  var object = require('./object');
+
+  object.call(this);
 
   ////////////////////////////////////////////////////////////////////////////
   /**
diff --git a/src/gl/quadFeature.js b/src/gl/quadFeature.js
index db5a2cabe2..726e6792c4 100644
--- a/src/gl/quadFeature.js
+++ b/src/gl/quadFeature.js
@@ -21,6 +21,9 @@ var gl_quadFeature = function (arg) {
 
   var $ = require('jquery');
   var vgl = require('vgl');
+  var object = require('./object');
+
+  object.call(this);
 
   var m_this = this,
       s_exit = this._exit,
diff --git a/src/pointFeature.js b/src/pointFeature.js
index 36d7e3fd43..5999d13d0e 100644
--- a/src/pointFeature.js
+++ b/src/pointFeature.js
@@ -143,7 +143,7 @@ var pointFeature = function (arg) {
     // prevent recomputing the clustering and set the new data array
     m_ignoreData = true;
     m_this.data(data);
-    m_this.layer().map().draw(); // replace with m_this.draw() when gl is fixed
+    m_this.draw();
   };
 
   ////////////////////////////////////////////////////////////////////////////