feat: Add a patterns to polygons

Author: manthey

src/markerFeature.js

@@ -18,7 +18,7 @@ var pointFeature = require('./pointFeature');
  *
  * @typedef {geo.feature.styleSpec} geo.markerFeature.styleSpec
  * @extends geo.feature.styleSpec
- * @property {number|Function} [radius=5] Radius of each marker in pixels.
+ * @property {number|Function} [radius=6.25] Radius of each marker in pixels.
  *   This includes the stroke width if `strokeOffset` is -1, excludes it if
  *   `strokeOffset` is 1, and includes half the stroke width if `strokeOffset`
  *    is 0.  Note that is `radiusIncludesStroke` is `false`, this never

src/polygonFeature.js

@@ -15,6 +15,46 @@ var transform = require('./transform');
  *   style options.
  */
 
+/**
+ * Style specification for a polygon pattern.
+ *
+ * @typedef {geo.polygonPattern} geo.polygonPattern
+ * @property {geo.geoColor} [fillColor] RGBA fill color.  Default is polygon
+ *   fillColor and fillOpacity.
+ * @property {geo.geoColor} [strokeColor] RGBA stroke color.  Default is
+ *   polygon strokeColor and strokeOpacity.
+ * @property {number} [strokeWidth=1.25] The weight of the pattern marker's
+ *   stroke in pixels.  Set this or A on strokeFill to zero to not have a
+ *   stroke.
+ * @property {number} [strokeOffset=-1] The position of the stroke compared to
+ *   the pattern radius.  This can only be -1, 0, or 1 (the sign of the value
+ *   is used).
+ * @property {boolean} [radiusIncludesStroke=true] If truthy or undefined, the
+ *   `radius` includes the `strokeWidth` based on the `strokeOffset`.  If
+ *   defined and falsy, the radius does not include the `strokeWidth`.
+ * @property {number} [symbol=0] One of the predefined symbol numbers.  This is
+ *   one of `geo.markerFeature.symbols`.
+ * @property {number|number[]} [symbolValue=0] A value the affects the
+ *   appearance of the symbol.  Some symbols can take an array of numbers.
+ * @property {number} [rotation=0] The rotation of the symbol in clockwise
+ *   radians.
+ * @property {geo.markerFeature.scaleMode} [scaleWithZoom='none'] This
+ *   determines if the fill, stroke, or both scale with zoom.  If set, the
+ *   values for radius and strokeWidth are the values at zoom-level zero.
+ * @property {boolean} [rotateWithMap=false] If truthy, rotate symbols with the
+ *   map.  If falsy, symbol orientation is absolute.
+ * @property {number} [radius=6.25] Radius of each marker in pixels.   This
+ *   includes the stroke width if `strokeOffset` is -1, excludes it if
+ *   `strokeOffset` is 1, and includes half the stroke width if `strokeOffset`
+ *   is 0.  Note that is `radiusIncludesStroke` is `false`, this never
+ *   includes the stroke width.
+ * @property {number} [spacing=20] Spacing in pixels between pattern symbols;
+ *   scaled if either radius or strokeWidth is scaled.  If positive, patterns
+ *   are on a square grid.  If negative, patterns are on a triangular grid.
+ * @property {number[]} [origin=[0, 0]] Origin of the pattern.
+ * TODO: define what a zero origin even means.
+ */
+
 /**
  * Style specification for a polygon feature.
  *
@@ -35,6 +75,9 @@ var transform = require('./transform');
  *   function, this is passed an array of items, each of which has a vertices
  *   property that is a single continuous array in map gcs coordinates.  It
  *   defaults to the first polygon's first vertex's position.
+ * @property {geo.polygonPattern|Function} [pattern] Pattern to apply to each
+ *   polygon.  Each polygon can be distinct, but the pattern is uniform across
+ *   any one polygon.
  */
 
 /**

src/util/common.js

@@ -1506,6 +1506,27 @@ var util = {
     return d;
   },
 
+  /**
+   * Pack an array of three numbers and one boolean into a single float.  Each
+   * numerical value is either undefined or on the scale of [0, 1] and is
+   * mapped to an integer range of [0, 250].
+   *
+   * @param {number|number[]} value A single value or an array of up to four
+   *    values where the first three values are numbers and the last is a
+   *    boolean.
+   * @returns {number} A packed number.
+   */
+  packFloats: function (value) {
+    if (!value.length) {
+      return value === undefined ? 0 : Math.floor(Math.abs(value) * 250) + 1;
+    }
+    return (
+      (value[0] === undefined ? 0 : Math.floor(Math.abs(value[0]) * 250) + 1) +
+      (value[1] === undefined ? 0 : Math.floor(Math.abs(value[1]) * 250) + 1) * 252 +
+      (value[2] === undefined ? 0 : Math.floor(Math.abs(value[2]) * 250) + 1) * 252 * 252
+    ) * (value[3] ? -1 : 1);
+  },
+
   ///////////////////////////////////////////////////////////////////////////
   /*
    * Utility member properties.

src/webgl/markerFeature.js

@@ -74,27 +74,6 @@ var webgl_markerFeature = function (arg) {
     return shader;
   }
 
-  /**
-   * Pack an array of three numbers and one boolean into a single float.  Each
-   * numerical value is either undefined or on the scale of [0, 1] and is
-   * mapped to an integer range of [0, 250].
-   *
-   * @param {number|number[]} value A single value or an array of up to four
-   *    values where the first three values are numbers and the last is a
-   *    boolean.
-   * @returns {number} A packed number.
-   */
-  function packFloats(value) {
-    if (!value.length) {
-      return value === undefined ? 0 : Math.floor(Math.abs(value) * 250) + 1;
-    }
-    return (
-      (value[0] === undefined ? 0 : Math.floor(Math.abs(value[0]) * 250) + 1) +
-      (value[1] === undefined ? 0 : Math.floor(Math.abs(value[1]) * 250) + 1) * 252 +
-      (value[2] === undefined ? 0 : Math.floor(Math.abs(value[2]) * 250) + 1) * 252 * 252
-    ) * (value[3] ? -1 : 1);
-  }
-
   /**
    * Create and style the data needed to render the markers.
    *
@@ -195,7 +174,7 @@ var webgl_markerFeature = function (arg) {
         ((Math.sign(styleVal.radiusIncludesStroke !== undefined && styleVal.radiusIncludesStroke ? styleVal.strokeOffset : 1) + 1) * 16) +
         styleVal.symbol * 64);
       if (styleVal.symbolValue && styleVal.symbol >= markerFeature.symbols.arrow && styleVal.symbol < markerFeature.symbols.arrow + markerFeature.symbols.arrowMax) {
-        styleVal.symbolValue = packFloats(styleVal.symbolValue);
+        styleVal.symbolValue = util.packFloats(styleVal.symbolValue);
       }
       for (j = 0; j < vpf; j += 1, ivpf += 1, ivpf3 += 3) {
         if (!onlyStyle) {