geojs 1.6.2 → 1.6.6

package/src/trackFeature.js

@@ -10,24 +10,24 @@ var util = require('./util');
  * @extends geo.feature.spec
  * @property {geo.geoPosition|function} [position] Position of the data.
  *   Default is (data).
- * @property {float|function} [time] Time of the data.  Default is `(data).t`.
+ * @property {number|function} [time] Time of the data.  Default is `(data).t`.
  * @property {object|function} [track] Tracks from the data.  Default is
  *   (data).  Typically, the data is an array of tracks, each of which is an
  *   array of points, each of which has a position and time.  The position and
  *   time functions are called for each point as `position(trackPoint,
  *   pointIndex, trackEntry, trackEntryIndex)`.
- * @property {float|null} [startTime=null] Start time.  Used for styling.  If
+ * @property {number|null} [startTime=null] Start time.  Used for styling.  If
  *   `null`, this is the duration before the end time if `duration` is not
  *  `null` and the minimum time in any track if `duration` is `null`.
- * @property {float} [endTime=null] End time.  Used for styling and position of
- *   the track head.  If `null` and either of `startTime` or `duration` are
+ * @property {number} [endTime=null] End time.  Used for styling and position
+ *   of the track head.  If `null` and either of `startTime` or `duration` are
  *   `null`, this is the maximum time in any track.
- * @property {float} [duration=null] Duration between start and end times.
+ * @property {number} [duration=null] Duration between start and end times.
  *   Ignored if both start and end times are specified.
- * @property {float|function} [text] Text to use for the head of the track.  If
- *   specified, the track head is rendered as text.  If `undefined` a marker is
- *   used instead.  If `null` or an empty string (`''`), neither a marker nor
- *   text is used.
+ * @property {number|function} [text] Text to use for the head of the track.
+ *   If specified, the track head is rendered as text.  If `undefined` a marker
+ *   is used instead.  If `null` or an empty string (`''`), neither a marker
+ *   nor text is used.
  * @property {geo.trackFeature.styleSpec} [style] Style object with default
  *   style options.
  * @property {geo.lineFeature.styleSpec} [pastStyle] Style object with
@@ -168,7 +168,7 @@ var trackFeature = function (arg) {
    * Calculate an interpolated position given a time.  If the time is outside
    * the range of a track, the first or last point is returned.
    *
-   * @param {float} time The time to compute a position array for.
+   * @param {number} time The time to compute a position array for.
    * @param {string|geo.transform|null} [gcs] `undefined` to use the feature
    *    gcs, `null` to use the map gcs, or any other transform.  This transform
    *    is used for the interpolation; the results are still in feature gcs.
@@ -275,8 +275,8 @@ var trackFeature = function (arg) {
     m_tracks.textFunc = m_this.style.get('text');
     ['past', 'current', 'future'].forEach(key => {
       m_lineFeatures[key]
-        .style(m_this[key + 'Style']())
         .style(m_this.style())
+        .style(m_this[key + 'Style']())
         .line(m_this.style('track'))
         .gcs(m_this.gcs())
         .data(data)
@@ -571,11 +571,11 @@ var trackFeature = function (arg) {
   /**
    * Get/Set time accessor.
    *
-   * @param {float} [val] If not specified, return the current time accessor.
+   * @param {number} [val] If not specified, return the current time accessor.
    *    If specified, use this for the time accessor and return `this`.  If a
    *    function is given, this is called with `(vertexElement, vertexIndex,
    *    dataElement, dataIndex)`.
-   * @returns {float|function|this} The current time or this feature.
+   * @returns {number|function|this} The current time or this feature.
    */
   this.time = function (val) {
     if (val === undefined) {
@@ -636,8 +636,8 @@ var trackFeature = function (arg) {
   /**
    * Get or set the start time.
    *
-   * @param {float|null} [val] If specified, the new start time.
-   * @returns {float|null|this} If set, the instance.  Otherwise, the current
+   * @param {number|null} [val] If specified, the new start time.
+   * @returns {number|null|this} If set, the instance.  Otherwise, the current
    *    start time value.
    */
   this.startTime = function (val) {
@@ -654,8 +654,8 @@ var trackFeature = function (arg) {
   /**
    * Get or set the end time.
    *
-   * @param {float|null} [val] If specified, the new end time.
-   * @returns {float|null|this} If set, the instance.  Otherwise, the current
+   * @param {number|null} [val] If specified, the new end time.
+   * @returns {number|null|this} If set, the instance.  Otherwise, the current
    *    end time value.
    */
   this.endTime = function (val) {
@@ -672,8 +672,8 @@ var trackFeature = function (arg) {
   /**
    * Get or set the duration.
    *
-   * @param {float|null} [val] If specified, the new duration.
-   * @returns {float|null|this} If set, the instance.  Otherwise, the current
+   * @param {number|null} [val] If specified, the new duration.
+   * @returns {number|null|this} If set, the instance.  Otherwise, the current
    *    duration.
    */
   this.duration = function (val) {

package/src/transform.js

@@ -330,11 +330,12 @@ transform.lookup = function (projection) {
  *
  * @param {string} srcPrj The source projection.
  * @param {string} tgtPrj The destination projection.
- * @param {geoPosition|geoPosition[]|number[]} coordinates An array of
- *      coordinate objects.  These may be in object or array form, or a flat
- *      array.
- * @param {number} numberOfComponents For flat arrays, either 2 or 3.
- * @returns {geoPosition|geoPosition[]|number[]} The transformed coordinates.
+ * @param {geo.geoPosition|geo.geoPosition[]|number[]} coordinates An array of
+ *    coordinate objects.  These may be in object or array form, or a flat
+ *    array.
+ * @param {number} [numberOfComponents] For flat arrays, either 2 or 3.
+ * @returns {geo.geoPosition|geo.geoPosition[]|number[]} The transformed
+ *    coordinates.
  */
 transform.transformCoordinates = function (srcPrj, tgtPrj, coordinates, numberOfComponents) {
   'use strict';
@@ -385,10 +386,10 @@ transform.transformCoordinates = function (srcPrj, tgtPrj, coordinates, numberOf
  * components per coordinate.  The array is modified in place.
  *
  * @param {transform} trans The transformation object.
- * @param {geoPosition[]|number[]} coordinates An array of coordinate
+ * @param {geo.geoPosition[]|number[]} coordinates An array of coordinate
  *      objects or a flat array.
  * @param {number} numberOfComponents For flat arrays, either 2 or 3.
- * @returns {geoPosition[]|number[]} The transformed coordinates
+ * @returns {geo.geoPosition[]|number[]} The transformed coordinates
  */
 transform.transformCoordinatesArray = function (trans, coordinates, numberOfComponents) {
   var i, count, offset, xAcc, yAcc, zAcc, writer, output, projPoint,
@@ -654,8 +655,6 @@ transform.affineInverse = function (def, coords) {
  * @param {object} [ellipsoid=proj4.WGS84] An object with at least `a` and one
  *    of `b`, `f`, or `rf` (1 / `f`) -- this works with  proj4 ellipsoid
  *    definitions.
- * @param {number} [maxIterations=100] Maximum number of iterations to use
- *    to test convergence.
  * @returns {number} The distance in meters (or whatever units the ellipsoid
  *    was specified in.
  */

package/src/typedef.js

@@ -234,3 +234,5 @@
  *
  * @typedef {geo.polygonFlat|geo.polygonObject} geo.polygon
  */
+
+module.exports = {};

package/src/ui/sliderWidget.js

@@ -203,7 +203,7 @@ var sliderWidget = function (arg) {
      * Respond to a mouse event on the widget.
      *
      * @param {d3Event} evt The event on the widget.
-     * @param {boolean} trans Truthy for an animated transition.
+     * @param {boolean} [trans] Truthy for an animated transition.
      */
     function respond(evt, trans) {
       var z = m_yscale.invert(d3.mouse(svg.node())[1]),

package/src/util/clustering.js

@@ -18,7 +18,7 @@ var $ = require('jquery');
  *
  * @param {geo.util.ClusterGroup} group The source cluster group
  * @param {number} zoom The zoom level of the current node
- * @param {object[]} children An array of ClusterTrees or point objects
+ * @param {object[]} [children] An array of ClusterTrees or point objects
  */
 function ClusterTree(group, zoom, children) {
   this._group = group;
@@ -136,8 +136,8 @@ ClusterTree.prototype.coords = function () {
  * @class
  * @alias geo.util.ClusterGroup
  * @param {object} opts An options object
- * @param {number} maxZoom The maximum zoom level to calculate.
- * @param {number} radius Size of clustering at zoom 0 in point gcs.
+ * @param {number} [opts.maxZoom] The maximum zoom level to calculate.
+ * @param {number} [opts.radius] Size of clustering at zoom 0 in point gcs.
  */
 function C(opts) {
 

package/src/util/color.js

@@ -59,7 +59,7 @@ var colorName = require('color-name');
 /**
  * @typedef {object} geo.util.cssColorConversionRecord
  * @property {string} name The name of the color conversion.
- * @property {RegEx} regex A regex that, if it matches the color string, will
+ * @property {RegExp} regex A regex that, if it matches the color string, will
  *      cause the process function to be invoked.
  * @property {function} process A function that takes (`color`, `match`) with
  *      the original color string and the results of matching the regex using

package/src/util/common.js

@@ -128,7 +128,7 @@ var util = {
    * Check if an object an HTMLVideoElement element that is loaded.
    *
    * @param {object} vid An object that might be an HTMLVideoElement.
-   * @param {boolean} [allowFailedVideo] If `true`, an viedo element that has
+   * @param {boolean} [allowFailedVideo] If `true`, an video element that has
    *     a source and has failed to load is also considered 'ready' in the
    *     sense that it isn't expected to change to a better state.
    * @returns {boolean} `true` if this is a video that is ready.
@@ -525,7 +525,7 @@ var util = {
    * var map = geo.map($.extend(results.map, {clampZoom: false}));
    * map.createLayer('osm', results.layer);
    *
-   * @param {string} [node] DOM selector for the map container.
+   * @param {string?} node DOM selector for the map container.
    * @param {number} width Width of the whole map contents in pixels.
    * @param {number} height Height of the whole map contents in pixels.
    * @param {number} [tileWidth] If an osm or tile layer is going to be used,
@@ -758,7 +758,7 @@ var util = {
   /**
    * Determine if two line segments cross.  They are not considered crossing if
    * they share a vertex.  They are crossing if either of one segment's
-   * vertices are colinear with the other segment.
+   * vertices are collinear with the other segment.
    *
    * @param {geo.geoPosition} seg1pt1 One endpoint of the first segment.
    * @param {geo.geoPosition} seg1pt2 The other endpoint of the first segment.
@@ -788,7 +788,7 @@ var util = {
     }
     /* If the lines cross, the signed area of the triangles formed between one
      * segment and the other's vertices will have different signs.  By using
-     * > 0, colinear points are crossing. */
+     * > 0, collinear points are crossing. */
     if (util.triangleTwiceSignedArea2d(seg1pt1, seg1pt2, seg2pt1) *
         util.triangleTwiceSignedArea2d(seg1pt1, seg1pt2, seg2pt2) > 0 ||
         util.triangleTwiceSignedArea2d(seg2pt1, seg2pt2, seg1pt1) *
@@ -834,7 +834,7 @@ var util = {
    * @param {geo.geoPosition[]} pts A list of points forming the line or
    *    polygon.
    * @param {number} tolerance The maximum variation allowed.  A value of zero
-   *    will only remove perfectly colinear points.
+   *    will only remove perfectly collinear points.
    * @param {boolean} [closed] If true, this is a polygon rather than an open
    *    line.  In this case, it is possible to get back a single point.
    * @param {Array.<geo.geoPosition[]>?} [noCrossLines] A falsy value to allow
@@ -967,7 +967,7 @@ var util = {
    */
   escapeUnicodeHTML: function (text) {
     return text.replace(/./g, function (k) {
-      var code = k.charCodeAt();
+      var code = k.charCodeAt(0);
       if (code < 127) {
         return k;
       }
@@ -1026,7 +1026,7 @@ var util = {
    * stored as local base64 urls.
    *
    * @param {string} css The css to parse for urls.
-   * @param {jQuery.selector|DOMElement} styleElem The element that receivs
+   * @param {jQuery.selector|HTMLElement} styleElem The element that receives
    *    the css text after dereferencing or the DOM element that has style
    *    that will be updated.
    * @param {jQuery.Deferred} styleDefer A Deferred to resolve once

package/src/util/throttle.js

@@ -43,7 +43,7 @@
  *    unspecified, callback will be executed one final time after the last
  *    throttled-function call. (After the throttled-function has not been
  *    called for `delay` milliseconds, the internal counter is reset)
- * @param {function} callback A function to be executed after `delay`
+ * @param {function} [callback] A function to be executed after `delay`
  *    milliseconds. The `this` context and all arguments are passed through,
  *    as-is, to `callback` when the throttled-function is executed.
  * @param {function} [accumulator] A function to be executed (synchronously)

package/src/vtkjs/pointFeature.js

@@ -76,7 +76,7 @@ var vtkjs_pointFeature = function (arg) {
    */
   this._init = function () {
     s_init.call(m_this, arg);
-    m_this.renderer().contextRenderer().setLayer(1);
+    m_this.renderer().contextRenderer().setLayer(0);
     m_this._createPipeline();
   };
 

package/src/webgl/index.js

@@ -8,8 +8,10 @@ module.exports = {
   isolineFeature: require('./isolineFeature'),
   layer: require('./layer'),
   lineFeature: require('./lineFeature'),
+  lookupTable2D: require('./lookupTable2D'),
   markerFeature: require('./markerFeature'),
   meshColored: require('./meshColored'),
+  pixelmapFeature: require('./pixelmapFeature'),
   pointFeature: require('./pointFeature'),
   polygonFeature: require('./polygonFeature'),
   quadFeature: require('./quadFeature'),

package/src/webgl/lookupTable2D.js

@@ -0,0 +1,122 @@
+var inherit = require('../inherit');
+var timestamp = require('../timestamp');
+var vgl = require('vgl');
+
+/**
+ * Switch to a specific texture unit.
+ *
+ * @param {vgl.renderState} renderState An object that contains the context
+ *   used for drawing.
+ * @param {number} textureUnit The number of the texture unit [0-15].
+ */
+function activateTextureUnit(renderState, textureUnit) {
+  if (textureUnit >= 0 && textureUnit <= 31) {
+    renderState.m_context.activeTexture(vgl.GL.TEXTURE0 + textureUnit);
+  } else {
+    throw Error('[error] Texture unit ' + textureUnit + ' is not supported');
+  }
+}
+
+/**
+ * Create a new instance of class webgl_lookupTable2D.
+ *
+ * @class
+ * @alias geo.webgl.lookupTable2D
+ * @param {object} arg Options object.
+ * @param {number} [arg.maxWidth] Maximum width to use for the texture.  If the
+ *   number of colors set is less than this, the texture is 1D.  If greater, it
+ *   will be a rectangle of maxWidth x whatever height is necessary.
+ * @param {number[]} [arg.colorTable] Initial color table for the texture.
+ *   This is of the form RGBARGBA... where each value is an integer on the
+ *   scale [0,255].
+ * @extends vgl.texture
+ * @returns {geo.webgl.lookupTable2D}
+ */
+var webgl_lookupTable2D = function (arg) {
+  'use strict';
+
+  if (!(this instanceof webgl_lookupTable2D)) {
+    return new webgl_lookupTable2D(arg);
+  }
+  arg = arg || {};
+  vgl.texture.call(this);
+
+  var m_setupTimestamp = timestamp(),
+      m_maxWidth = arg.maxWidth || 4096,
+      m_colorTable = new Uint8Array([0, 0, 0, 0]),
+      m_colorTableOrig,
+      m_this = this;
+
+  /**
+   * Create lookup table, initialize parameters, and bind data to it.
+   *
+   * @param {vgl.renderState} renderState An object that contains the context
+   *   used for drawing.
+   */
+  this.setup = function (renderState) {
+    activateTextureUnit(renderState, m_this.textureUnit());
+
+    renderState.m_context.deleteTexture(m_this.m_textureHandle);
+    m_this.m_textureHandle = renderState.m_context.createTexture();
+    renderState.m_context.bindTexture(vgl.GL.TEXTURE_2D, m_this.m_textureHandle);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_MIN_FILTER, vgl.GL.NEAREST);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_MAG_FILTER, vgl.GL.NEAREST);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_WRAP_S, vgl.GL.CLAMP_TO_EDGE);
+    renderState.m_context.texParameteri(vgl.GL.TEXTURE_2D, vgl.GL.TEXTURE_WRAP_T, vgl.GL.CLAMP_TO_EDGE);
+    renderState.m_context.pixelStorei(vgl.GL.UNPACK_ALIGNMENT, 1);
+    renderState.m_context.pixelStorei(vgl.GL.UNPACK_FLIP_Y_WEBGL, true);
+
+    renderState.m_context.texImage2D(
+      vgl.GL.TEXTURE_2D, 0, vgl.GL.RGBA, m_this.width, m_this.height, 0,
+      vgl.GL.RGBA, vgl.GL.UNSIGNED_BYTE, m_colorTable);
+
+    renderState.m_context.bindTexture(vgl.GL.TEXTURE_2D, null);
+    m_setupTimestamp.modified();
+  };
+
+  /**
+   * Get/set color table.
+   *
+   * @param {number[]} [val] An array of RGBARGBA... integers on a scale
+   *   of [0, 255].  `undefined` to get the current value.
+   * @returns {number[]|this}
+   */
+  this.colorTable = function (val) {
+    if (val === undefined) {
+      return m_colorTableOrig;
+    }
+    m_colorTableOrig = val;
+    if (val.length < 4) {
+      val = [0, 0, 0, 0];
+    }
+    m_this.width = Math.min(m_maxWidth, val.length / 4);
+    m_this.height = Math.ceil(val.length / 4 / m_maxWidth);
+    if (!(val instanceof Uint8Array) || val.length !== m_this.width * m_this.height * 4) {
+      if (val.length < m_this.width * m_this.height * 4) {
+        val = val.concat(new Array(m_this.width * m_this.height * 4 - val.length).fill(0));
+      }
+      m_colorTable = new Uint8Array(val);
+    } else {
+      m_colorTable = val;
+    }
+    m_this.modified();
+    return m_this;
+  };
+
+  /**
+   * Get maxWidth value.
+   *
+   * @returns {number} The maxWidth of the texture used.
+   */
+  this.maxWidth = function () {
+    return m_maxWidth;
+  };
+
+  this.colorTable(arg.colorTable || []);
+
+  return this;
+};
+
+inherit(webgl_lookupTable2D, vgl.texture);
+
+module.exports = webgl_lookupTable2D;

package/src/webgl/markerFeature.js

@@ -98,7 +98,7 @@ var webgl_markerFeature = function (arg) {
   /**
    * Create and style the data needed to render the markers.
    *
-    @param {boolean} onlyStyle if true, use the existing geometry and just
+    @param {boolean} [onlyStyle] if true, use the existing geometry and just
    *    recalculate the style.
    */
   function createGLMarkers(onlyStyle) {

package/src/webgl/pixelmapFeature.frag

@@ -0,0 +1,47 @@
+/* pixelmapFeature fragment shader */
+
+varying highp vec2 iTextureCoord;
+uniform sampler2D sampler2d;
+uniform sampler2D lutSampler;
+uniform int lutWidth;
+uniform int lutHeight;
+uniform mediump float opacity;
+uniform highp vec2 crop;
+
+void main(void) {
+  if ((crop.s < 1.0 && iTextureCoord.s > crop.s) || (crop.t < 1.0 && 1.0 - iTextureCoord.t > crop.t)) {
+    discard;
+  }
+  // to add anti-aliasing, we would need to know the current pixel size
+  // (probably computed in the vertex shader) and then sample the base image at
+  // multiple points, then average the output color.
+  highp vec4 lutValue = texture2D(sampler2d, iTextureCoord);
+  highp vec2 lutCoord;
+  lutCoord.s = (
+    mod(
+      // add 0.5 to handle float imprecision
+      floor(lutValue.r * 255.0 + 0.5) +
+      floor(lutValue.g * 255.0 + 0.5) * 256.0,
+      float(lutWidth)
+    // center in pixel
+    ) + 0.5) / float(lutWidth);
+  // Our image is top-down, so invert the coordinate
+  lutCoord.t = 1.0 - (
+    floor(
+      (
+        // add 0.5 to handle float imprecision
+        floor(lutValue.r * 255.0 + 0.5) +
+        floor(lutValue.g * 255.0 + 0.5) * 256.0 +
+        floor(lutValue.b * 255.0 + 0.5) * 256.0 * 256.0
+        // We may want an option to use the alpha channel to allow more indices
+      ) / float(lutWidth)
+    // center in pixel
+    ) + 0.5) / float(lutHeight);
+  if (lutCoord.t < 0.0) {
+    discard;
+  }
+  mediump vec4 color = texture2D(lutSampler, lutCoord);
+
+  color.a *= opacity;
+  gl_FragColor = color;
+}

package/src/webgl/pixelmapFeature.js

@@ -0,0 +1,172 @@
+var inherit = require('../inherit');
+var registerFeature = require('../registry').registerFeature;
+var pixelmapFeature = require('../pixelmapFeature');
+var lookupTable2D = require('./lookupTable2D');
+var util = require('../util');
+
+/**
+ * Create a new instance of class webgl.pixelmapFeature.
+ *
+ * @class
+ * @alias geo.webgl.pixelmapFeature
+ * @extends geo.pixelmapFeature
+ * @param {geo.pixelmapFeature.spec} arg
+ * @returns {geo.webgl.pixelmapFeature}
+ */
+var webgl_pixelmapFeature = function (arg) {
+  'use strict';
+
+  if (!(this instanceof webgl_pixelmapFeature)) {
+    return new webgl_pixelmapFeature(arg);
+  }
+  pixelmapFeature.call(this, arg);
+
+  var object = require('./object');
+  object.call(this);
+
+  const vgl = require('vgl');
+  const fragmentShader = require('./pixelmapFeature.frag');
+
+  var m_quadFeature,
+      s_exit = this._exit,
+      m_lookupTable,
+      m_this = this;
+
+  /**
+   * If the specified coordinates are in the rendered quad, use the basis
+   * information from the quad to determine the pixelmap index value so that it
+   * can be included in the `found` results.
+   *
+   * @param {geo.geoPosition} geo Coordinate.
+   * @param {string|geo.transform|null} [gcs] Input gcs.  `undefined` to use
+   *    the interface gcs, `null` to use the map gcs, or any other transform.
+   * @returns {geo.feature.searchResult} An object with a list of features and
+   *    feature indices that are located at the specified point.
+   */
+  this.pointSearch = function (geo, gcs) {
+    if (m_quadFeature && m_this.m_info) {
+      let result = m_quadFeature.pointSearch(geo, gcs);
+      if (result.index.length === 1 &&
+          result.extra && result.extra[result.index[0]].basis &&
+          result.extra[result.index[0]]._quad &&
+          result.extra[result.index[0]]._quad.image) {
+        const img = result.extra[result.index[0]]._quad.image;
+        const basis = result.extra[result.index[0]].basis;
+        const x = Math.floor(basis.x * img.width);
+        const y = Math.floor(basis.y * img.height);
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        const context = canvas.getContext('2d');
+        context.drawImage(img, x, y, 1, 1, 0, 0, 1, 1);
+        const pixel = context.getImageData(0, 0, 1, 1).data;
+        const idx = pixel[0] + pixel[1] * 256 + pixel[2] * 256 * 256;
+        result = {
+          index: [idx],
+          found: [m_this.data()[idx]]
+        };
+        return result;
+      }
+    }
+    return {index: [], found: []};
+  };
+
+  /**
+   * Given the loaded pixelmap image, create a texture for the colors and a
+   * quad that will use it.
+   */
+  this._computePixelmap = function () {
+    var data = m_this.data() || [],
+        colorFunc = m_this.style.get('color');
+
+    if (!m_lookupTable) {
+      m_lookupTable = lookupTable2D();
+      m_lookupTable.setTextureUnit(1);
+    }
+    let clrLen = Math.max(1, data.length);
+    const maxWidth = m_lookupTable.maxWidth();
+    if (clrLen > maxWidth && clrLen % maxWidth) {
+      clrLen += maxWidth - (clrLen % maxWidth);
+    }
+    const colors = new Uint8Array(clrLen * 4);
+    data.forEach((d, i) => {
+      const color = util.convertColor(colorFunc.call(m_this, d, i));
+      colors[i * 4] = color.r * 255;
+      colors[i * 4 + 1] = color.g * 255;
+      colors[i * 4 + 2] = color.b * 255;
+      colors[i * 4 + 3] = color.a === undefined ? 255 : (color.a * 255);
+    });
+    m_this.m_info = {colors: colors};
+    // check if colors haven't changed
+    var oldcolors = m_lookupTable.colorTable();
+    if (oldcolors && oldcolors.length === colors.length) {
+      let idx = 0;
+      for (; idx < colors.length; idx += 1) {
+        if (colors[idx] !== oldcolors[idx]) {
+          break;
+        }
+      }
+      if (idx === colors.length) {
+        return;
+      }
+    }
+    m_lookupTable.colorTable(colors);
+    /* If we haven't made a quad feature, make one now */
+    if (!m_quadFeature) {
+      m_quadFeature = m_this.layer().createFeature('quad', {
+        selectionAPI: false,
+        gcs: m_this.gcs(),
+        visible: m_this.visible(undefined, true)
+      });
+      m_this.dependentFeatures([m_quadFeature]);
+      m_quadFeature.setShader('image_fragment', fragmentShader);
+      m_quadFeature._hookBuild = (prog) => {
+        const lutSampler = new vgl.uniform(vgl.GL.INT, 'lutSampler');
+        lutSampler.set(m_lookupTable.textureUnit());
+        prog.addUniform(lutSampler);
+        const lutWidth = new vgl.uniform(vgl.GL.INT, 'lutWidth');
+        lutWidth.set(m_lookupTable.width);
+        prog.addUniform(lutWidth);
+        const lutHeight = new vgl.uniform(vgl.GL.INT, 'lutHeight');
+        lutHeight.set(m_lookupTable.height);
+        prog.addUniform(lutHeight);
+      };
+      m_quadFeature._hookRenderImageQuads = (renderState, quads) => {
+        quads.forEach((quad) => {
+          if (quad.image && quad.texture && !quad.texture.nearestPixel()) {
+            quad.texture.setNearestPixel(true);
+          }
+        });
+        m_lookupTable.bind(renderState, quads);
+      };
+      m_quadFeature.style({
+        image: m_this.m_srcImage,
+        position: m_this.style.get('position')})
+      .data([{}])
+      .draw();
+    }
+  };
+
+  /**
+   * Destroy.  Deletes the associated quadFeature.
+   *
+   * @returns {this}
+   */
+  this._exit = function () {
+    if (m_quadFeature && m_this.layer()) {
+      m_this.layer().deleteFeature(m_quadFeature);
+      m_quadFeature = null;
+      m_this.dependentFeatures([]);
+    }
+    s_exit();
+    return m_this;
+  };
+
+  this._init(arg);
+  return this;
+};
+
+inherit(webgl_pixelmapFeature, pixelmapFeature);
+
+// Now register it
+registerFeature('webgl', 'pixelmap', webgl_pixelmapFeature);
+module.exports = webgl_pixelmapFeature;

package/src/webgl/pointFeature.js

@@ -78,7 +78,7 @@ var webgl_pointFeature = function (arg) {
   /**
    * Create and style the data needed to render the points.
    *
-   * @param {boolean} onlyStyle if true, use the existing geometry and just
+   * @param {boolean} [onlyStyle] if true, use the existing geometry and just
    *    recalculate the style.
    */
   function createGLPoints(onlyStyle) {