geojs 1.6.6 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # GeoJS Change Log
 
+## Version 1.7.0
+
+### Features
+
+- Support tiled pixelmaps ([#1153](../../pull/1153))
+
+## Version 1.6.6
+
+### Improvements
+
+- Add support for webgl pixelmaps ([#1152](../../pull/1152))
+
 ## Version 1.6.5
 
 ### Bug Fixes

package/geo.js

@@ -6364,6 +6364,25 @@ var pixelmapFeature = __webpack_require__(6374);
 var geo_event = __webpack_require__(5108);
 
 var util = __webpack_require__(4634);
+/**
+ * Pixelmap feature information record.
+ *
+ * @typedef {object} geo.pixelmapFeature.info
+ * @property {number} width The width of the source image.
+ * @property {number} height The width of the source image.
+ * @property {CanvasRenderingContext2D} context The HTMLCanvasElement context
+ *    used for handling the pixelmap.
+ * @property {ImageData} imageData The context's image data.
+ * @property {number[]} indices An array, one per pixel, of the index value in
+ *    the image.  This decodes the pixel value to the corresponding integer.
+ * @property number} area The number of pixels in the image.  This is
+ *    `width * height`.
+ * @property {object[]} mappedColors This has one entry for each distinct index
+ *    value.  Each entry has `first` and `last` with the first and last pixel
+ *    locations where that index occurs.  Note that last is the inclusive value
+ *    of the location (so its maximum possible value is `size - 1`).
+ */
+
 /**
  * Create a new instance of class pixelmapFeature.
  *
@@ -6501,6 +6520,8 @@ var canvas_pixelmapFeature = function canvas_pixelmapFeature(arg) {
         prepared;
 
     if (!m_this.m_info) {
+      m_this.indexModified(undefined, 'clear');
+
       if (!m_this._preparePixelmap()) {
         return;
       }
@@ -6508,6 +6529,7 @@ var canvas_pixelmapFeature = function canvas_pixelmapFeature(arg) {
       prepared = true;
     }
 
+    m_this.indexModified(undefined, 'clear');
     mappedColors = m_this.m_info.mappedColors;
     updateFirst = m_this.m_info.area;
 
@@ -12252,6 +12274,7 @@ module.exports = $.extend({
   polygonFeature: __webpack_require__(4343),
   quadFeature: __webpack_require__(5017),
   pixelmapFeature: __webpack_require__(6374),
+  pixelmapLayer: __webpack_require__(809),
   renderer: __webpack_require__(3234),
   sceneObject: __webpack_require__(5358),
   textFeature: __webpack_require__(9757),
@@ -22228,25 +22251,6 @@ var util = __webpack_require__(4634);
  *   transformations for those two triangles.
  */
 
-/**
- * Pixelmap feature information record.
- *
- * @typedef {object} geo.pixelmapFeature.info
- * @property {number} width The width of the source image.
- * @property {number} height The width of the source image.
- * @property {context} context The HTMLCanvasElement context used for handling
- *    the pixelmap.
- * @property {ImageData} imageData The context's image data.
- * @property {number[]} indices An array, one per pixel, of the index value in
- *    the image.  This decodes the pixel value to the corresponding integer.
- * @property number} area The number of pixels in the image.  This is
- *    `width * height`.
- * @property {object[]} mappedColors This has one entry for each distinct index
- *    value.  Each entry has `first` and `last` with the first and last pixel
- *    locations where that index occurs.  Note that last is the inclusive value
- *    of the location (so its maximum possible value is `size - 1`).
- */
-
 /**
  * Create a new instance of class pixelmapFeature
  *
@@ -22273,6 +22277,7 @@ var pixelmapFeature = function pixelmapFeature(arg) {
 
   var m_this = this,
       s_update = this._update,
+      m_modifiedIndexRange,
       s_init = this._init;
   this.featureType = 'pixelmap';
   /**
@@ -22338,6 +22343,50 @@ var pixelmapFeature = function pixelmapFeature(arg) {
 
     return m_this;
   };
+  /**
+   * Mark that an index's data value (and hence its color) has changed without
+   * marking all of the data array as changed.  If this function is called
+   * without any parameters, it clears the tracked changes.
+   *
+   * @param {number} [idx] The lowest data index that has changed.  If
+   *    `undefined`, return the current tracked changed range.
+   * @param {number|'clear'} [idx2] If an index was specified in `idx` and
+   *    this is specified, the highest index (inclusive) that has changed.  If
+   *    returning the tracked changed range and this is `clear`, clear the
+   *    tracked range.
+   * @returns {this|number[]} When returning a range, this is the lowest and
+   *    highest index values that have changed (inclusive), so their range is
+   *    `[0, data.length)`.
+   */
+
+
+  this.indexModified = function (idx, idx2) {
+    if (idx === undefined) {
+      var range = m_modifiedIndexRange;
+
+      if (idx2 === 'clear') {
+        m_modifiedIndexRange = undefined;
+      }
+
+      return range;
+    }
+
+    m_this.modified();
+
+    if (m_modifiedIndexRange === undefined) {
+      m_modifiedIndexRange = [idx, idx];
+    }
+
+    if (idx < m_modifiedIndexRange[0]) {
+      m_modifiedIndexRange[0] = idx;
+    }
+
+    if ((idx2 || idx) > m_modifiedIndexRange[1]) {
+      m_modifiedIndexRange[1] = idx2 || idx;
+    }
+
+    return m_this;
+  };
   /**
    * Update.
    *
@@ -22402,8 +22451,6 @@ var pixelmapFeature = function pixelmapFeature(arg) {
      * drawing a quad, which can trigger a full layer update, which in turn
      * checks if this feature is built.  Setting the build time avoids calling
      * this a second time. */
-    m_this.buildTime().modified();
-
     if (!m_this.m_srcImage) {
       var src = m_this.style.get('url')();
 
@@ -22468,6 +22515,7 @@ var pixelmapFeature = function pixelmapFeature(arg) {
       m_this._computePixelmap();
     }
 
+    m_this.buildTime().modified();
     return m_this;
   };
   /**
@@ -22509,6 +22557,13 @@ var pixelmapFeature = function pixelmapFeature(arg) {
 
     m_this.style(style);
     m_this.dataTime().modified();
+
+    if (arg.quadFeature) {
+      m_this.m_srcImage = true;
+
+      m_this._computePixelmap();
+    }
+
     return m_this;
   };
 
@@ -22534,13 +22589,182 @@ pixelmapFeature.create = function (layer, spec) {
 
 pixelmapFeature.capabilities = {
   /* core feature name -- support in any manner */
-  feature: 'pixelmap'
+  feature: 'pixelmap',
+
+  /* support for image-based lookup */
+  lookup: 'pixelmap.lookup'
 };
 inherit(pixelmapFeature, feature);
 module.exports = pixelmapFeature;
 
 /***/ }),
 
+/***/ 809:
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var $ = __webpack_require__(5638);
+
+var inherit = __webpack_require__(5699);
+
+var tileLayer = __webpack_require__(1940);
+
+var registry = __webpack_require__(4647);
+
+var quadFeature = __webpack_require__(5017);
+
+var pixelmapFeature = __webpack_require__(6374);
+/**
+ * Object specification for a pixelmap layer.
+ *
+ * @typedef {geo.tileLayer.spec} geo.pixelmapLayer.spec
+ * @extends {geo.tileLayer.spec}
+ * @property {geo.geoColor|function} [color] The color that should be used
+ *   for each data element.  Data elements correspond to the indices in the
+ *   pixel map. If an index is larger than the number of data elements, it will
+ *   be transparent.  If there is more data than there are indices, it is
+ *   ignored.
+ * @property {object} [style] An optional style object that could contain
+ *   `color` or other style values.
+ * @property {array} [data] A new data array.
+ * @property {string} [crossDomain='anonymous'] Image CORS attribute.  This is
+ *   used for the `crossorigin` property when loading images.
+ */
+
+/**
+ * Create a new instance of pixelmapLayer.  This is a {@link geo.tileLayer} with
+ * an OSM url and attribution defaults and with the tiles centered on the
+ * origin.
+ *
+ * @class
+ * @alias geo.pixelmapLayer
+ * @extends geo.tileLayer
+ *
+ * @param {geo.pixelmapLayer.spec} [arg] Specification for the layer.
+ */
+
+
+var pixelmapLayer = function pixelmapLayer(arg) {
+  var imageTile = __webpack_require__(4665);
+
+  if (!(this instanceof pixelmapLayer)) {
+    return new pixelmapLayer(arg);
+  }
+
+  arg = arg || {};
+  arg = $.extend(true, {}, this.constructor.defaults, arg);
+  tileLayer.call(this, arg);
+  var s_init = this._init,
+      m_pixelmapFeature,
+      m_this = this;
+  /**
+   * Returns an instantiated imageTile object with the given indices.  This
+   * method always returns a new tile object.  Use `_getTileCached` to use
+   * the caching layer.
+   *
+   * @param {object} index The tile index.
+   * @param {number} index.x
+   * @param {number} index.y
+   * @param {number} index.level
+   * @param {object} source The tile index used for constructing the url.
+   * @param {number} source.x
+   * @param {number} source.y
+   * @param {number} source.level
+   * @returns {geo.tile}
+   */
+
+  this._getTile = function (index, source) {
+    var urlParams = source || index;
+    return imageTile({
+      index: index,
+      size: {
+        x: m_this._options.tileWidth,
+        y: m_this._options.tileHeight
+      },
+      queue: m_this._queue,
+      overlap: m_this._options.tileOverlap,
+      scale: m_this._options.tileScale,
+      url: m_this._options.url.call(m_this, urlParams.x, urlParams.y, urlParams.level || 0, m_this._options.subdomains),
+      crossDomain: m_this._options.crossDomain
+    });
+  };
+  /**
+   * Initialize.
+   *
+   * @returns {this} The current layer.
+   */
+
+
+  this._init = function () {
+    // Call super class init
+    s_init.apply(m_this, arguments);
+    var pixelmapArgs = {
+      quadFeature: m_this.features()[0]
+    };
+
+    if (arg.style) {
+      pixelmapArgs.style = arg.style;
+    }
+
+    if (arg.color) {
+      pixelmapArgs.color = arg.color;
+    }
+
+    m_pixelmapFeature = m_this.createFeature('pixelmap', pixelmapArgs);
+
+    if (arg.data) {
+      m_pixelmapFeature.data(arg.data);
+    }
+
+    m_this.style = m_pixelmapFeature.style;
+    m_this.data = m_pixelmapFeature.data;
+    m_this.indexModified = m_pixelmapFeature.indexModified;
+    var s_dataTimeModified = m_this.dataTime().modified;
+
+    m_this.dataTime().modified = function () {
+      m_pixelmapFeature.dataTime().modified();
+      return s_dataTimeModified();
+    };
+
+    ['modified', 'geoOn', 'geoOff', 'geoOnce'].forEach(function (funcName) {
+      var superFunc = m_this[funcName];
+
+      m_this[funcName] = function () {
+        m_pixelmapFeature[funcName].apply(this, arguments);
+        return superFunc.apply(this, arguments);
+      };
+    });
+    return m_this;
+  };
+
+  return m_this;
+};
+/**
+ * This object contains the default options used to initialize the
+ * pixelmapLayer.
+ */
+
+
+pixelmapLayer.defaults = $.extend({}, tileLayer.defaults, {
+  features: [quadFeature.capabilities.image, pixelmapFeature.capabilities.lookup],
+  tileOffset: function tileOffset(level) {
+    var s = Math.pow(2, level - 1) * 256;
+    return {
+      x: s,
+      y: s
+    };
+  },
+  url: ''
+});
+inherit(pixelmapLayer, tileLayer);
+/* By default, ask to support image quads.  If the user needs full
+ * reprojection, they will need to require the
+ * quadFeature.capabilities.imageFull feature */
+
+registry.registerLayer('pixelmap', pixelmapLayer, [quadFeature.capabilities.image]);
+module.exports = pixelmapLayer;
+
+/***/ }),
+
 /***/ 2557:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
@@ -26028,7 +26252,7 @@ module.exports = sceneObject;
  * @constant
  * @type {string}
  */
-module.exports = "c554b05bdeb079f7ebd7d317e44a885f9a93710f";
+module.exports = "1d12f116c34ea5a1423ecb767df24b2291e53b06";
 
 /***/ }),
 
@@ -29623,7 +29847,7 @@ var tileLayer = function tileLayer(arg) {
         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;
@@ -30563,7 +30787,7 @@ var tileLayer = function tileLayer(arg) {
       /* For tile layers that should only keep one layer, if loading is
        * finished, purge all but the current layer.  This is important for
        * semi-transparent layers. */
-      if ((doneLoading || m_this._isCovered(tile)) && zoom !== tile.index.level) {
+      if ((doneLoading || m_this._isCovered(tile)) && zoom !== tile.index.level && (zoom >= m_this._options.minLevel || tile.index.level !== m_this._options.minLevel)) {
         return true;
       }
     }
@@ -38492,7 +38716,7 @@ module.exports = vectorFeature;
  * @constant
  * @type {string}
  */
-module.exports = "1.6.6";
+module.exports = "1.7.0";
 
 /***/ }),
 
@@ -41321,6 +41545,7 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
   var fragmentShader = __webpack_require__(3953);
 
   var m_quadFeature,
+      m_quadFeatureInit,
       s_exit = this._exit,
       m_lookupTable,
       m_this = this;
@@ -41338,24 +41563,29 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
 
   this.pointSearch = function (geo, gcs) {
     if (m_quadFeature && m_this.m_info) {
-      var 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) {
-        var img = result.extra[result.index[0]]._quad.image;
-        var basis = result.extra[result.index[0]].basis;
-        var x = Math.floor(basis.x * img.width);
-        var y = Math.floor(basis.y * img.height);
-        var canvas = document.createElement('canvas');
-        canvas.width = canvas.height = 1;
-        var context = canvas.getContext('2d');
-        context.drawImage(img, x, y, 1, 1, 0, 0, 1, 1);
-        var pixel = context.getImageData(0, 0, 1, 1).data;
-        var idx = pixel[0] + pixel[1] * 256 + pixel[2] * 256 * 256;
-        result = {
-          index: [idx],
-          found: [m_this.data()[idx]]
-        };
-        return result;
+      var result = m_quadFeature.pointSearch(geo, gcs); // use the last index by preference, since for tile layers, this is the
+      // topmosttile
+
+      var idxIdx = result.index.length - 1;
+
+      for (; idxIdx >= 0; idxIdx -= 1) {
+        if (result.extra[result.index[idxIdx]]._quad && result.extra[result.index[idxIdx]]._quad.image) {
+          var img = result.extra[result.index[idxIdx]]._quad.image;
+          var basis = result.extra[result.index[idxIdx]].basis;
+          var x = Math.floor(basis.x * img.width);
+          var y = Math.floor(basis.y * img.height);
+          var canvas = document.createElement('canvas');
+          canvas.width = canvas.height = 1;
+          var context = canvas.getContext('2d');
+          context.drawImage(img, x, y, 1, 1, 0, 0, 1, 1);
+          var pixel = context.getImageData(0, 0, 1, 1).data;
+          var idx = pixel[0] + pixel[1] * 256 + pixel[2] * 256 * 256;
+          result = {
+            index: [idx],
+            found: [m_this.data()[idx]]
+          };
+          return result;
+        }
       }
     }
 
@@ -41373,10 +41603,13 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
   this._computePixelmap = function () {
     var data = m_this.data() || [],
         colorFunc = m_this.style.get('color');
+    var indexRange = m_this.indexModified(undefined, 'clear');
+    var fullUpdate = m_this.dataTime().timestamp() >= m_this.buildTime().timestamp() || indexRange === undefined;
 
     if (!m_lookupTable) {
       m_lookupTable = lookupTable2D();
       m_lookupTable.setTextureUnit(1);
+      fullUpdate = true;
     }
 
     var clrLen = Math.max(1, data.length);
@@ -41386,14 +41619,29 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
       clrLen += maxWidth - clrLen % maxWidth;
     }
 
-    var colors = new Uint8Array(clrLen * 4);
-    data.forEach(function (d, i) {
+    var colors;
+
+    if (!fullUpdate) {
+      colors = m_lookupTable.colorTable();
+      fullUpdate = colors.length !== clrLen * 4;
+      indexRange[0] = Math.max(0, indexRange[0]);
+      indexRange[1] = Math.min(data.length, indexRange[1] + 1);
+    }
+
+    if (fullUpdate) {
+      colors = new Uint8Array(clrLen * 4);
+      indexRange = [0, data.length];
+    }
+
+    for (var i = indexRange[0]; i < indexRange[1]; i += 1) {
+      var d = data[i];
       var 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
@@ -41401,15 +41649,15 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
     var oldcolors = m_lookupTable.colorTable();
 
     if (oldcolors && oldcolors.length === colors.length) {
-      var idx = 0;
+      var idx = indexRange[0] * 4;
 
-      for (; idx < colors.length; idx += 1) {
+      for (; idx < indexRange[1] * 4; idx += 1) {
         if (colors[idx] !== oldcolors[idx]) {
           break;
         }
       }
 
-      if (idx === colors.length) {
+      if (idx === indexRange[1] * 4) {
         return;
       }
     }
@@ -41423,6 +41671,10 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
         gcs: m_this.gcs(),
         visible: m_this.visible(undefined, true)
       });
+      m_quadFeatureInit = false;
+    }
+
+    if (!m_quadFeatureInit) {
       m_this.dependentFeatures([m_quadFeature]);
       m_quadFeature.setShader('image_fragment', fragmentShader);
 
@@ -41447,10 +41699,14 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
         m_lookupTable.bind(renderState, quads);
       };
 
-      m_quadFeature.style({
-        image: m_this.m_srcImage,
-        position: m_this.style.get('position')
-      }).data([{}]).draw();
+      if (m_quadFeatureInit === false) {
+        m_quadFeature.style({
+          image: m_this.m_srcImage,
+          position: m_this.style.get('position')
+        }).data([{}]).draw();
+      }
+
+      m_quadFeatureInit = true;
     }
   };
   /**
@@ -41471,6 +41727,10 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
     return m_this;
   };
 
+  if (arg.quadFeature) {
+    m_quadFeature = arg.quadFeature;
+  }
+
   this._init(arg);
 
   return this;
@@ -41478,7 +41738,9 @@ var webgl_pixelmapFeature = function webgl_pixelmapFeature(arg) {
 
 inherit(webgl_pixelmapFeature, pixelmapFeature); // Now register it
 
-registerFeature('webgl', 'pixelmap', webgl_pixelmapFeature);
+var capabilities = {};
+capabilities[pixelmapFeature.capabilities.lookup] = true;
+registerFeature('webgl', 'pixelmap', webgl_pixelmapFeature, capabilities);
 module.exports = webgl_pixelmapFeature;
 
 /***/ }),
@@ -43078,9 +43340,10 @@ var webgl_quadFeature = function webgl_quadFeature(arg) {
         return;
       }
 
-      quad.texture.bind(renderState);
+      quad.texture.bind(renderState); // only check if the context is out of memory when using modestly large
+      // textures.  The check is slow.
 
-      if (context.getError() === context.OUT_OF_MEMORY) {
+      if ((quad.image.width > 4096 || quad.image.height > 4096 || quad.image.width * quad.image.height > 4194304) && context.getError() === context.OUT_OF_MEMORY) {
         console.log('Insufficient GPU memory for texture');
       }