geojs 1.6.3 → 1.7.0

package/src/polygonFeature.js

@@ -565,9 +565,9 @@ var polygonFeature = function (arg) {
    *
    * @param {array} data A new data array.
    * @param {number} [tolerance] The maximum variation allowed in map.gcs
-   *    units.  A value of zero will only remove perfectly colinear points.  If
-   *    not specified, this is set to a half display pixel at the map's current
-   *    zoom level.
+   *    units.  A value of zero will only remove perfectly collinear points.
+   *    If not specified, this is set to a half display pixel at the map's
+   *    current zoom level.
    * @param {function} [posFunc=this.style.get('position')] The function to
    *    get the position of each vertex.
    * @param {function} [polyFunc=this.style.get('polygon')] The function to

package/src/quadFeature.js

@@ -232,7 +232,7 @@ var quadFeature = function (arg) {
             coordbasis.y = 1 - coordbasis.y;
           }
           if (coordbasis) {
-            extra[quad.idx] = {basis: coordbasis};
+            extra[quad.idx] = {basis: coordbasis, _quad: quad};
           }
         }
       });

package/src/registry.js

@@ -60,7 +60,7 @@ util.registerRenderer = function (name, func) {
  * @param {geo.layer} layer The layer associated with the renderer.
  * @param {HTMLCanvasElement} [canvas] A canvas object to share between
  *      renderers.
- * @param {object} options Options for the new renderer.
+ * @param {object} [options] Options for the new renderer.
  * @returns {geo.renderer|null} The new renderer or null if no such name is
  *      registered.
  */
@@ -83,7 +83,7 @@ util.createRenderer = function (name, layer, canvas, options) {
  *
  * @alias geo.checkRenderer
  * @param {string|null} name Name of the desired renderer.
- * @param {boolean} noFallback If truthy, don't recommend a fallback.
+ * @param {boolean} [noFallback] If truthy, don't recommend a fallback.
  * @returns {string|null|false} The name of the renderer that should be used
  *      or false if no valid renderer can be determined.
  */

package/src/svg/svgRenderer.js

@@ -484,10 +484,10 @@ var svgRenderer = function (arg) {
    * Create a new feature element from an object that describes the feature
    * attributes.  To be called from feature classes only.
    *
-   * @param {object} arg Options for the features.
+   * @param {object} arg
    * @param {string} arg.id A unique string identifying the feature.
    * @param {array} arg.data Array of data objects used in a d3 data method.
-   * @param {function} [aeg.dataIndex] A function that returns a unique id for
+   * @param {function} [arg.dataIndex] A function that returns a unique id for
    *    each data element.  This is passed to the data access function.
    * @param {object} arg.style An object with style values or functions.
    * @param {object} arg.attributes An object containing element attributes.
@@ -500,7 +500,7 @@ var svgRenderer = function (arg) {
    *    attributes and styles set when new.  If falsy, features always have
    *    attributes and styles updated.
    * @param {boolean} [arg.sortByZ] If truthy, sort features by the `d.zIndex`.
-   * @param {string} [parentId] If set, the group ID of the parent element.
+   * @param {string} [arg.parentId] If set, the group ID of the parent element.
    * @returns {this}
    */
   this._drawFeatures = function (arg) {

package/src/tileCache.js

@@ -55,7 +55,7 @@ var tileCache = function (options) {
    * Remove a tile from the cache.
    *
    * @param {string|geo.tile} tile The tile or its hash.
-   * @returns {booliean} `true` if a tile was removed.
+   * @returns {boolean} `true` if a tile was removed.
    */
   this.remove = function (tile) {
     var hash = typeof tile === 'string' ? tile : tile.toString();

package/src/tileLayer.js

@@ -525,7 +525,7 @@ var tileLayer = function (arg) {
   /**
    * Returns a tile's bounds in a gcs.
    *
-   * @param {object|tile} indexOrTile Either a tile or an object with
+   * @param {object|geo.tile} indexOrTile Either a tile or an object with
    *    {x, y, level}` specifying a tile.
    * @param {string|geo.transform|null} [gcs] `undefined` to use the
    *    interface gcs, `null` to use the map gcs, or any other transform.
@@ -668,7 +668,7 @@ var tileLayer = function (arg) {
    * @param {number} maxLevel The zoom level
    * @param {geo.geoBounds} bounds The map bounds
    * @param {boolean} sorted Return a sorted list
-   * @param {boolean} onlyIfChanged If the set of tiles have not changed
+   * @param {boolean} [onlyIfChanged] If the set of tiles have not changed
    *     (even if their desired order has), return undefined instead of an
    *     array of tiles.
    * @returns {geo.tile[]} An array of tile objects
@@ -676,7 +676,7 @@ var tileLayer = function (arg) {
   this._getTiles = function (maxLevel, bounds, sorted, onlyIfChanged) {
     var i, j, tiles = [], index, nTilesLevel,
         start, end, indexRange, source, center, changed = false, old, level,
-        minLevel = (m_this._options.keepLower ? m_this._options.minLevel : maxLevel);
+        minLevel = (m_this._options.keepLower ? m_this._options.minLevel : Math.max(maxLevel, m_this._options.minLevel));
     if (maxLevel < minLevel) {
       maxLevel = minLevel;
     }
@@ -1134,7 +1134,7 @@ var tileLayer = function (arg) {
    * origin.
    *
    * @param {object} pt A point in world space coordinates with `x` and `y`.
-   * @param {number|undefined} zoom If unspecified, use the map zoom.
+   * @param {number} [zoom] If unspecified, use the map zoom.
    * @returns {object} Local coordinates with `x` and `y`.
    */
   this.toLocal = function (pt, zoom) {
@@ -1180,7 +1180,7 @@ var tileLayer = function (arg) {
    * create the element if it doesn't already exist.
    *
    * @param {number} level The zoom level of the layer to fetch.
-   * @returns {DOM} The layer's DOM element.
+   * @returns {HTMLElement} The layer's DOM element.
    */
   this._getSubLayer = function (level) {
     if (!m_this.canvas()) {
@@ -1512,8 +1512,8 @@ var tileLayer = function (arg) {
    * @param {geo.geoBounds} [bounds] The view bounds (if unspecified, assume
    *      global bounds)
    * @param {number} bounds.level The zoom level the bounds are given as.
-   * @param {number} zoom Keep in bound tile at this zoom level.
-   * @param {boolean} doneLoading If true, allow purging additional tiles.
+   * @param {number} [zoom] Keep in bound tile at this zoom level.
+   * @param {boolean} [doneLoading] If true, allow purging additional tiles.
    * @returns {boolean}
    */
   this._canPurge = function (tile, bounds, zoom, doneLoading) {
@@ -1532,7 +1532,8 @@ var tileLayer = function (arg) {
        * finished, purge all but the current layer.  This is important for
        * semi-transparent layers. */
       if ((doneLoading || m_this._isCovered(tile)) &&
-          zoom !== tile.index.level) {
+          zoom !== tile.index.level &&
+          (zoom >= m_this._options.minLevel || tile.index.level !== m_this._options.minLevel)) {
         return true;
       }
     }
@@ -1604,9 +1605,9 @@ var tileLayer = function (arg) {
   /**
    * Get or set the subdomains used for templating.
    *
-   * @param {string|list} [subdomains] A comma-separated list, a string of
+   * @param {string|string[]} [subdomains] A comma-separated list, a string of
    *      single character subdomains, or a list.
-   * @returns {string|list|this}
+   * @returns {string|string[]|this}
    */
   this.subdomains = function (subdomains) {
     if (subdomains === undefined) {
@@ -1644,8 +1645,8 @@ var tileLayer = function (arg) {
   /**
    * Get/Set visibility of the layer.
    *
-   * @param {boolean|undefined} val If unspecified, return the visibility,
-   *    otherwise set it.
+   * @param {boolean} [val] If unspecified, return the visibility, otherwise
+   *    set it.
    * @returns {boolean|this} Either the visibility (if getting) or the layer
    *    (if setting).
    */

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/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;
+}