Distance and Ramer–Douglas–Peucker functions.

examples/lines/example.json

@@ -2,7 +2,7 @@
   "title": "Line Feature",
   "exampleCss": ["main.css"],
   "exampleJs": ["main.js"],
-  "thumbquery": "lines=250000",
+  "thumbquery": "lines=250000&lineCap=round&strokeWidth=%7B%22residential%22%3A1%2C%22service%22%3A0.25%2C%22other%22%3A3%7D",
   "about": {
     "text": "This example shows the variations that are available for line features."
   }

examples/lines/index.pug

@@ -36,6 +36,15 @@ block append mainContent
     .form-group(title="Show an OSM map underneath the lines.")
       label(for="showmap") Show Map
       input#showmap(type="checkbox", placeholder="true", checked="checked")
+    .form-group(title="Reduce line complexity based on zoom level.")
+      label(for="simplify") Simplify Lines
+      input#simplify(type="checkbox", placeholder="false")
+      input#simplify_tolerance(placeholder="0.5", title="Maximum change in pixels at the current zoom level")
+      span#simple-lines-shown
+    .form-group(title="When simplification is turned on, update it when zooming the map.")
+      label(for="resimplify") Zoom Resimplifies
+      input#resimplify(type="checkbox", placeholder="false")
+      input#resimplify_delay(placeholder="500", title="Delay in milliseconds before resimplifying lines after a change in zoom level")
     .form-group
       .shortlabel Presets
       button.preset(strokeColor='{"residential":"blue","service":"green","other":"black"}', strokeWidth='{"residential":4,"service":1,"other":8}', lineCap='round', showmap='true', title='Properties based on road category') Categories

examples/lines/main.css

@@ -29,7 +29,7 @@
 #controls #lines {
   width: 100px;
 }
-#controls #lines-loaded,#controls #lines-shown {
+#controls #lines-loaded,#controls #lines-shown,#controls #simple-lines-shown {
   display: inline-block;
   font-size: 11px;
   padding-left: 5px;
@@ -58,3 +58,7 @@
   font-size: 12px;
   color: black;
 }
+#controls #simplify_tolerance,#controls #resimplify_delay {
+  width: 80px;
+}
+

examples/lines/main.js

@@ -4,6 +4,14 @@
 $(function () {
   'use strict';
 
+  function lineAccessor(data, index) {
+    return data.data;
+  }
+
+  function positionAccessor(data, index) {
+    return {x: data[0], y: data[1]};
+  }
+
   // Get query parameters
   var query = utils.getQuery();
 
@@ -16,7 +24,8 @@ $(function () {
     },
     zoom: 11
   });
-  var osm, mapUrl, layer, lineFeature, lines, rawdata, skipdraw;
+  var osm, mapUrl, layer, lineFeature, lines, rawdata, reduceddata, skipdraw,
+      lastSimplifyZoom, resimplifyTimeout;
 
   // By default, use the best renderer that supports lines.  This can be
   // changed on with the 'renderer' query parameter to force a particular
@@ -80,15 +89,23 @@ $(function () {
           lines = ctlvalue = parseInt(value, 10);
         }
         break;
-      case 'showmap':
-        ctlvalue = value !== 'false';
-        break;
       case 'miterLimit':
         value = value.length ? parseFloat(value) : undefined;
         if (!isNaN(value) && value > 0 && value !== undefined) {
           lineOptions.style[key] = ctlvalue = value;
         }
         break;
+      case 'resimplify':
+      case 'showmap':
+      case 'simplify':
+        ctlvalue = value !== 'false';
+        break;
+      case 'resimplify_delay':
+        ctlvalue = value.length ? parseInt(value) : undefined;
+        break;
+      case 'simplify_tolerance':
+        ctlvalue = value.length ? parseFloat(value) : undefined;
+        break;
     }
     if (ctlvalue !== undefined) {
       if ($('#' + ctlkey).is('[type="checkbox"]')) {
@@ -124,11 +141,13 @@ $(function () {
    * Given a set of lines, optionally truncate or expand it, then show it as a
    * lineFeature.
    *
-   * @param {array} rawdata: an array of lines to show.  Each entry contains an
+   * @param {array} rawdata An array of lines to show.  Each entry contains an
    *    object that has a 'data' element which is an array of points that form
    *    the line.
+   * @param {boolean} [simplify] If present, use this as the flag to decide if
+   *    lines should be simplified.
    */
-  function show_lines(rawdata) {
+  function show_lines(rawdata, simplify) {
     $('#map').removeClass('ready').attr('segments', '');
     if (!rawdata) {
       return;
@@ -140,23 +159,96 @@ $(function () {
     for (numlines = 0; numlines < rawdata.length && segments < maxsegments; numlines += 1) {
       segments += rawdata[numlines].data.length - 1;
     }
-    var data = rawdata.slice(0, numlines);
-    lineFeature.data(data);
-    lineFeature.draw();
+    reduceddata = rawdata.slice(0, numlines);
+    if (simplify === undefined) {
+      simplify = query.simplify;
+    }
+    if (!simplify || simplify === 'false') {
+      // set the data, and reset the line and position accessors in case we
+      // changed them with the line simplication
+      lineFeature.data(reduceddata)
+        .line(lineAccessor)
+        .position(positionAccessor);
+      lineFeature.draw();
+      $('#simple-lines-shown').text('').attr('title', '');
+    } else {
+      simplify_lines(reduceddata);
+    }
     var text = 'Shown: ' + segments;
     $('#lines-shown').text(text).attr('title', text);
     map.onIdle(function () {
       $('#map').addClass('ready').attr('segments', maxsegments);
     });
   }
 
+  /**
+   * When the map is zoomed, if resimplifying lines is active, set a timer to
+   * do so after the currently specified delay.
+   *
+   * @param {geo.event} evt geojs event that triggered this call.
+   */
+  function resimplifyOnZoom(evt) {
+    if (resimplifyTimeout) {
+      window.cancelTimeout(resimplifyTimeout);
+      resimplifyTimeout = null;
+    }
+    if (!query.simplify || query.simplify === 'false' ||
+        !query.resimplify || query.resimplify === 'false') {
+      return;
+    }
+    window.setTimeout(function () {
+      resimplifyTimeout = null;
+      if (map.zoom() !== lastSimplifyZoom) {
+        simplify_lines(reduceddata);
+      }
+    }, parseInt(query.resimplify_delay, 10) || 500);
+  }
+
+  /**
+   * Simplify lines based on the current zoom level.
+   *
+   * @param {array} data The data to simplify.
+   * @param {number} [tolerance=query.simplify_tolerance] The tolerance in
+   *    pixels at the current map zoom level.
+   */
+  function simplify_lines(data, tolerance) {
+    if (!data) {
+      return;
+    }
+    lastSimplifyZoom = map.zoom();
+    if (resimplifyTimeout) {
+      window.cancelTimeout(resimplifyTimeout);
+      resimplifyTimeout = null;
+    }
+    tolerance = parseFloat(tolerance !== undefined ? tolerance : query.simplify_tolerance || 0.5);
+    lineFeature.rdpSimplifyData(
+      data,
+      map.unitsPerPixel(map.zoom()) * tolerance,
+      positionAccessor,
+      lineAccessor);
+    lineFeature.draw();
+    var segments = 0,
+        lineFunc = lineFeature.line();
+    lineFeature.data().forEach(function (d, i) {
+      var len = lineFunc(d, i).length;
+      segments += len >= 2 ? len - 1 : 0;
+    });
+    var text = 'Shown: ' + segments;
+    $('#simple-lines-shown').text(text).attr('title', text);
+    text = $('#lines-shown').text();
+    if (text.indexOf('Shown') === 0) {
+      text = 'Used' + text.substr(5);
+      $('#lines-shown').text(text).attr('title', text);
+    }
+  }
+
   /**
    * For styles that can vary, parse the string and either return a simple
    * string or a function that computes the value.
    *
-   * @param {string} key: the property key.  Used to get a default value if
+   * @param {string} key the property key.  Used to get a default value if
    *    needed.
-   * @param {string} value: the string form of the value.  If this has a { in
+   * @param {string} value the string form of the value.  If this has a { in
    *    it, it is parsed as a JSON dictionary, and expects to be a list of
    *    category names which are used to determine the values.  These values
    *    applied uniformly per line.  Otherwise, if this has a , in it, it is a
@@ -204,7 +296,7 @@ $(function () {
   /**
    * Handle changes to our controls.
    *
-   * @param {object} evt jquery evt that triggered this call.
+   * @param {object} evt jquery event that triggered this call.
    */
   function change_controls(evt) {
     var ctl = $(evt.target),
@@ -257,9 +349,6 @@ $(function () {
         lines = parseInt(value);
         show_lines(rawdata);
         break;
-      case 'showmap':
-        set_osm_url(value);
-        break;
       case 'miterLimit':
         value = value.length ? parseFloat(value) : undefined;
         if (isNaN(value) || value <= 0 || value === undefined) {
@@ -271,6 +360,30 @@ $(function () {
           lineFeature.draw();
         }
         break;
+      case 'showmap':
+        set_osm_url(value);
+        break;
+      case 'simplify':
+        if (!processedValue) {
+          show_lines(rawdata, false);
+        } else {
+          simplify_lines(reduceddata);
+        }
+        break;
+      case 'simplify_tolerance':
+        processedValue = value.length ? parseFloat(value) : undefined;
+        if (query.simplify) {
+          simplify_lines(reduceddata, processedValue);
+        }
+        break;
+      case 'resimplify':
+        if (processedValue && query.simplify && query.simplify !== 'false' &&
+            map.zoom() !== lastSimplifyZoom) {
+          simplify_lines(reduceddata);
+        }
+        break;
+      case 'resimplify_delay':
+        break;
     }
     // Update the url to reflect the changes
     query[param] = value;
@@ -286,7 +399,7 @@ $(function () {
   /**
    * Handle selecting a preset button.
    *
-   * @param {object} evt: jquery event with the triggered button.
+   * @param {object} evt jquery event with the triggered button.
    */
   function select_preset(evt) {
     var update;
@@ -315,7 +428,7 @@ $(function () {
   /**
    * Set the map to either use the original default url or a blank white image.
    *
-   * @param {string} value: 'false' to use a white image, anything else to use
+   * @param {string} value 'false' to use a white image, anything else to use
    *    the original url.
    */
   function set_osm_url(value) {
@@ -341,12 +454,8 @@ $(function () {
       'hidden');
   // Ceate a line feature
   lineFeature = layer.createFeature('line', lineOptions)
-    .line(function (d) {
-      return d.data;
-    })
-    .position(function (d) {
-      return {x: d[0], y: d[1]};
-    })
+    .line(lineAccessor)
+    .position(positionAccessor)
     // add hover events -- use mouseon and mouseoff, since we only show one
     // tootip.  If we showed one tooltip per item we were over, use mouseover
     // and mouseout.
@@ -361,7 +470,8 @@ $(function () {
     })
     .geoOn(geo.event.feature.mouseoff, function (evt) {
       tooltipElem.addClass('hidden');
-    });
+    })
+    .geoOn(geo.event.zoom, resimplifyOnZoom);
 
   // Make some values available in the global context so curious people can
   // play with them.

examples/polygons/main.js

@@ -26,6 +26,7 @@ $(function () {
   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) {
+    polygonDebug.data = data;
     polygons
       /* This is the default accessor, so we don't have to define it ourselves.
       .polygon(function (d) {

src/gl/polygonFeature.js

@@ -128,6 +128,9 @@ var gl_polygonFeature = function (arg) {
           return;
         }
         outer = polygon.outer || (Array.isArray(polygon) ? polygon : []);
+        if (outer.length < 3) {
+          return;
+        }
 
         /* expand to an earcut polygon geometry.  We had been using a map call,
          * but using loops is much faster in Chrome (4 versus 33 ms for one
@@ -144,6 +147,9 @@ var gl_polygonFeature = function (arg) {
 
         if (polygon.inner) {
           polygon.inner.forEach(function (hole) {
+            if (hole.length < 3) {
+              return;
+            }
             original = original.concat(hole);
             geometry.holes.push(d3 / 3);
             for (i = 0; i < hole.length; i += 1, d3 += 3) {