Improve polygons

examples/polygons/example.json

@@ -0,0 +1,9 @@
+{
+  "path": "polygons",
+  "title": "Polygon features",
+  "exampleCss": ["main.css"],
+  "exampleJs": ["main.js"],
+  "about": {
+    "text": "This example shows how to add polygons to a map."
+  }
+}

examples/polygons/index.jade

@@ -0,0 +1 @@
+extends ../common/templates/index.jade

examples/polygons/main.js

@@ -0,0 +1,68 @@
+/* globals $, geo, utils */
+
+var polygonDebug = {};
+
+// Run after the DOM loads
+$(function () {
+  'use strict';
+
+  var query = utils.getQuery();
+  var map = geo.map({
+    node: '#map',
+    center: {
+      x: -88.0,
+      y: 29
+    },
+    zoom: 4
+  });
+  if (query.map !== 'false') {
+    map.createLayer('osm');
+  }
+  var layer = map.createLayer('feature', {
+    renderer: query.renderer ? (query.renderer === 'html' ? null : query.renderer) : undefined,
+    features: query.renderer ? undefined : ['polygon']
+  });
+  var polygons = layer.createFeature('polygon', {selectionAPI: true});
+  var hoverColor = query.hover || 'blue';
+  var polyColor = query.color ? geo.util.convertColor(query.color) : undefined;
+  $.getJSON(query.url || '../../data/land_polygons.json').done(function (data) {
+    polygons
+      /* This is the default accessor, so we don't have to define it ourselves.
+      .polygon(function (d) {
+        return d;
+      })
+      */
+      .position(function (d) {
+        return {x: d[0], y: d[1]};
+      })
+      .data(data)
+      .style('uniformPolygon', true)
+      .style('fillOpacity', query.opacity ? parseFloat(query.opacity) : 0.5)
+      .style('fillColor', function (d, idx, poly, polyidx) {
+        return poly.hover ? hoverColor : (polyColor ? polyColor : {
+          r: (polyidx % 256) / 255,
+          g: polyidx / (data.length - 1),
+          b: 0.25
+        });
+      })
+      .geoOn(geo.event.feature.mouseover, function (evt) {
+        if (!evt.data.hover) {
+          evt.data.hover = true;
+          this.modified();
+          this.draw();
+        }
+      })
+      .geoOn(geo.event.feature.mouseout, function (evt) {
+        if (evt.data.hover) {
+          evt.data.hover = false;
+          this.modified();
+          this.draw();
+        }
+      })
+      .draw();
+
+    polygonDebug.map = map;
+    polygonDebug.layer = layer;
+    polygonDebug.polygons = polygons;
+  });
+});

src/feature.js

@@ -305,7 +305,7 @@ var feature = function (arg) {
    */
   ////////////////////////////////////////////////////////////////////////////
   this.style.get = function (key) {
-    var tmp, out;
+    var out;
     if (key === undefined) {
       var all = {}, k;
       for (k in m_style) {
@@ -317,10 +317,9 @@ var feature = function (arg) {
     }
     if (key.toLowerCase().match(/color$/)) {
       if (util.isFunction(m_style[key])) {
-        tmp = util.ensureFunction(m_style[key]);
         out = function () {
           return util.convertColor(
-            tmp.apply(this, arguments)
+            m_style[key].apply(this, arguments)
           );
         };
       } else {

src/gl/object.js

@@ -30,7 +30,7 @@ var gl_object = function (arg) {
   */
   ////////////////////////////////////////////////////////////////////////////
   this.draw = function () {
-    m_this._update();
+    m_this._update({mayDelay: true});
     m_this.renderer()._render();
     s_draw();
     return m_this;