Source: tileLayer.js

var inherit = require('./inherit');
var featureLayer = require('./featureLayer');

/**
 * Object specification for a tile layer.
 *
 * @typedef {geo.layer.spec} geo.tileLayer.spec
 * @extends {geo.layer.spec}
 * @property {number} [minLevel=0] The minimum zoom level available.
 * @property {number} [maxLevel=18] The maximum zoom level available.
 * @property {object} [tileOverlap] Pixel overlap between tiles.
 * @property {number} [tileOverlap.x] Horizontal overlap.
 * @property {number} [tileOverlap.y] Vertical overlap.
 * @property {number} [tileWidth=256] The tile width without overlap.
 * @property {number} [tileHeight=256] The tile height without overlap.
 * @property {function} [tilesAtZoom=null] A function that is given a zoom
 *   level and returns `{x: (num), y: (num)}` with the number of tiles at that
 *   zoom level.
 * @property {number} [cacheSize=600] The maximum number of tiles to cache.
 *   The default is 200 if keepLower is false.
 * @property {geo.fetchQueue} [queue] A fetch queue to use.  If unspecified, a
 *   new queue is created.
 * @property {number} [queueSize=6] The queue size.  Most browsers make at most
 *   6 requests to any domain, so this should be no more than 6 times the
 *   number of subdomains used.
 * @property {number} [initialQueueSize=0] The initial queue size.  `0` to use
 *   the queue size.  When querying a tile server that needs to load
 *   information before serving the first tile, having an initial queue size of
 *   1 can reduce the load on the tile server.  After the initial queue of
 *   tiles are loaded, the `queueSize` is used for all additional queries
 *   unless the `initialQueueSize` is set again or the tile cache is reset.
 * @property {boolean} [keepLower=true] When truthy, keep lower zoom level
 *   tiles when showing high zoom level tiles.  This uses more memory but
 *   results in smoother transitions.
 * @property {boolean} [wrapX=true] Wrap in the x-direction.
 * @property {boolean} [wrapY=false] Wrap in the y-direction.
 * @property {string|function} [url=null] A function taking the current tile
 *   indices `(x, y, level, subdomains)` and returning a URL or jquery ajax
 *   config to be passed to the {geo.tile} constructor.  Example:
 *   ```
 *   (x, y, z, subdomains) => "http://example.com/z/y/x.png"
 *   ```
 *   If this is a string, a template url with {x}, {y}, {z}, and {s} as
 *   template variables.  {s} picks one of the subdomains parameter and may
 *   contain a comma-separated list of subdomains.
 * @property {string|string[]} [subdomains="abc"] Subdomains to use in template
 *   url strings.  If a string, this is converted to a list before being passed
 *   to a url function.
 * @property {string} [baseUrl=null]  If defined, use the old-style base url
 *   instead of the url parameter.  This is functionally the same as using a
 *   url of `baseUrl/{z}/{x}/{y}.(imageFormat || png)`.  If the specified
 *   string does not end in a slash, one is added.
 * @property {string} [imageFormat='png'] This is only used if a `baseUrl` is
 *   specified, in which case it determines the image name extension used in
 *   the url.
 * @property {number} [animationDuration=0] The number of milliseconds for the
 *   tile loading animation to occur.  Only some renderers support this.
 * @property {string} [attribution] An attribution to display with the layer
 *   (accepts HTML).
 * @property {function} [tileRounding=Math.round] This function determines
 *   which tiles will be loaded when the map is at a non-integer zoom.  For
 *   example, `Math.floor`, will use tile level 2 when the map is at zoom 2.9.
 * @property {function} [tileOffset] This function takes a zoom level argument
 *   and returns, in units of pixels, the coordinates of the point (0, 0) at
 *   the given zoom level relative to the bottom left corner of the domain.
 * @property {function} [tilesMaxBounds=null] This function takes a zoom level
 *   argument and returns an object with `x` and `y` in pixels which is used to
 *   crop the last row and column of tiles.  Note that if tiles wrap, only
 *   complete tiles in the wrapping direction(s) are supported, and this max
 *   bounds will probably not behave properly.
 * @property {boolean} [topDown=false]  True if the gcs is top-down, false if
 *   bottom-up (the ingcs does not matter, only the gcs coordinate system).
 *   When falsy, this inverts the gcs y-coordinate when calculating local
 *   coordinates.
 * @property {string} [idleAfter='view'] Consider the layer as idle once a
 *   specific set of tiles is loaded.  'view' is when all tiles in view are
 *   loaded.  'all' is when tiles in view and tiles that were once requested
 *   have been loaded (this corresponds to having all network activity
 *   finished).
 * @property {object} [baseQuad] A quad feature element to draw before below
 *   any tile layers.  If specified, this uses the quad defaults, so this is a
 *   ``geo.quadFeature.position`` object with, typically, an ``image`` property
 *   added to it.  The quad positions are in the map gcs coordinates.
 * @property {boolean|number} [nearestPixel] If true, image quads are
 *   rendered with near-neighbor sampling.  If false, with interpolated
 *   sampling.  If a number, interpolate at that zoom level or below and
 *   nearest neighbor at that zoom level or above.
 */

/**
 * Standard modulo operator where the output is in [0, b) for all inputs.
 * @private
 * @param {number} a Any finite number.
 * @param {number} b A positive number.
 * @returns {number} The positive version of `a % b`.
 */
function modulo(a, b) {
  return ((a % b) + b) % b;
}

/**
 * Pick a subdomain from a list of subdomains based on a the tile location.
 *
 * @param {number} x The x tile coordinate.
 * @param {number} y The y tile coordinate.
 * @param {number} z The tile layer.
 * @param {string[]} subdomains The list of known subdomains.
 * @returns {string} A subdomain based on the location.
 */
function m_getTileSubdomain(x, y, z, subdomains) {
  return subdomains[modulo(x + y + z, subdomains.length)];
}

/**
 * Returns an OSM tile server formatting function from a standard format
 * string. Replaces `{s}`, `{z}`, `{x}`, and `{y}`.  These may be any case
 * and may be prefixed with `$` (e.g., `${X}` is the same as `{x}`).  The
 * subdomain can be specified by a string of characters, listed as a range,
 * or as a comma-separated list (e.g., `{s:abc}`, `{a-c}`, `{a,b,c}` are
 * all equivalent.  The comma-separated list can have subdomains that are of
 * any length; the string and range both use one-character subdomains.
 *
 * @param {string} base The tile format string
 * @returns {function} A conversion function.
 * @private.
 */
function m_tileUrlFromTemplate(base) {
  var xPattern = /\$?\{[xX]\}/g,
      yPattern = /\$?\{[yY]\}/g,
      zPattern = /\$?\{[zZ]\}/g,
      sPattern = /\$?\{(s|S|[sS]:[^{}]+|[^-{}]-[^-{}]|([^,{}]+,)+[^,{}]+)\}/;
  var url = base
      .replace(new RegExp(sPattern, 'g'), '{s}')
      .replace(xPattern, '{x}')
      .replace(yPattern, '{y}')
      .replace(zPattern, '{z}');
  var urlSubdomains;
  var sMatch = base.match(sPattern);
  if (sMatch) {
    if (sMatch[2]) {
      urlSubdomains = sMatch[1].split(',');
    } else if (sMatch[1][1] === ':') {
      urlSubdomains = sMatch[1].substr(2).split('');
    } else if (sMatch[1][1] === '-') {
      urlSubdomains = [];
      var start = sMatch[1].charCodeAt(0),
          end = sMatch[1].charCodeAt(2);
      for (var i = Math.min(start, end); i <= Math.max(start, end); i += 1) {
        urlSubdomains.push(String.fromCharCode(i));
      }
    }
  }

  return function (x, y, z, subdomains) {
    return url
      .replace(/\{s\}/g, m_getTileSubdomain(x, y, z, urlSubdomains || subdomains))
      .replace(/\{x\}/g, x)
      .replace(/\{y\}/g, y)
      .replace(/\{z\}/g, z);
  };
}

/**
 * This method defines a tileLayer, an abstract class defining a layer
 * divided into tiles of arbitrary data.  Notably, this class provides the
 * core functionality of {@link geo.osmLayer}, but hooks exist to render
 * tiles more generically.  When multiple zoom levels are present in a given
 * dataset, this class assumes that the space occupied by tile `(i, j)` at
 * level `z` is covered by a 2x2 grid of tiles at zoom level `z + 1`:
 * ```
 *   (2i, 2j),     (2i, 2j + 1)
 *   (2i + 1, 2j), (2i + 1, 2j + 1)
 * ```
 * The higher level tile set should represent a 2x increase in resolution.
 *
 * @class
 * @alias geo.tileLayer
 * @extends geo.featureLayer
 * @param {geo.tileLayer.spec} [arg] Specification for the layer.
 * @returns {geo.tileLayer}
 */
var tileLayer = function (arg) {
  'use strict';
  if (!(this instanceof tileLayer)) {
    return new tileLayer(arg);
  }
  featureLayer.call(this, arg);

  var $ = require('jquery');
  var geo_event = require('./event');
  var transform = require('./transform');
  var tileCache = require('./tileCache');
  var fetchQueue = require('./fetchQueue');
  var adjustLayerForRenderer = require('./registry').adjustLayerForRenderer;
  var Tile = require('./tile');

  arg = $.extend(true, {}, this.constructor.defaults, arg || {});
  if (!arg.cacheSize) {
    // this size should be sufficient for a 4k display
    // where display size is (w, h), minimum tile dimension is ts, and total
    // number of levels is ml, this is roughly
    // sum([(math.ceil((w**2+h**2)**0.5 / (ts*2**l)) + 1) *
    //      (math.ceil(min(w, h) / (ts*2**l)) + 1) for l in range(ml)])
    arg.cacheSize = arg.keepLower ? 600 : 200;
  }
  if ($.type(arg.subdomains) === 'string') {
    arg.subdomains = arg.subdomains.split('');
  }
  /* We used to call the url option baseUrl.  If a baseUrl is specified, use
   * it instead of url, interpreting it as before. */
  if (arg.baseUrl) {
    var url = arg.baseUrl;
    if (url && url.charAt(url.length - 1) !== '/') {
      url += '/';
    }
    arg.url = url + '{z}/{x}/{y}.' + (arg.imageFormat || 'png');
  }
  /* Save the original url so that we can return it if asked */
  arg.originalUrl = arg.url;
  if ($.type(arg.url) === 'string') {
    arg.url = m_tileUrlFromTemplate(arg.url);
  }

  var s_init = this._init,
      s_exit = this._exit,
      s_visible = this.visible,
      m_queueSize = arg.queueSize || 6,
      m_initialQueueSize = arg.initialQueueSize || 0,
      m_lastTileSet = [],
      m_promisedTiles = {},
      m_maxBounds = [],
      m_reference,
      m_exited,
      m_lastBaseQuad,
      m_nearestPixel = arg.nearestPixel,
      m_this = this;

  // copy the options into a private variable
  this._options = $.extend(true, {}, arg);

  // set the layer attribution text
  this.attribution(arg.attribution);

  // initialize the object that keeps track of actively drawn tiles
  this._activeTiles = {};

  // initialize the object that stores active tile regions in a
  // tree-like structure providing quick queries to determine
  // if tiles are completely obscured or not.
  this._tileTree = {};

  // initialize the in memory tile cache
  this._cache = tileCache({size: arg.cacheSize});

  // initialize the tile fetch queue
  this._queue = arg.queue || fetchQueue({
    // this should probably be 6 * subdomains.length if subdomains are used
    size: m_queueSize,
    initialSize: m_initialQueueSize,
    // if track is the same as the cache size, then neither processing time
    // nor memory will be wasted.  Larger values will use more memory,
    // smaller values will do needless computations.
    track: arg.cacheSize,
    needed: function (tile) {
      if (this._tileLayers && this._tileLayers.length) {
        return this._tileLayers.some((tl) => tile === tl.cache.get(tile.toString(), true));
      }
      return tile === m_this.cache.get(tile.toString(), true);
    }
  });
  this._queue._tileLayers = this._queue._tileLayers || [];
  this._queue._tileLayers.push(m_this);
  if (this._queue.initialTrack && this._queue.track) {
    this._queue.track = this._queue.initialTrack * this._queue._tileLayers.length;
  }

  var m_tileOffsetValues = {};

  /**
   * Readonly accessor to the options object.
   * @property {object} options A copy of the options object.
   * @name geo.tileLayer#options
   */
  Object.defineProperty(this, 'options', {get: function () {
    return $.extend({}, m_this._options);
  }});

  /**
   * Readonly accessor to the tile cache object.
   * @property {geo.tileCache} cache The tile cache object.
   * @name geo.tileLayer#cache
   */
  Object.defineProperty(this, 'cache', {get: function () {
    return m_this._cache;
  }});

  /**
   * Readonly accessor to the active tile mapping.  This is an object
   * containing all currently drawn tiles (hash(tile) => tile).
   *
   * @property {object} activeTiles The keys are `hash(tile)` and the values
   *    are tiles.
   * @name geo.tileLayer#activeTiles
   */
  Object.defineProperty(this, 'activeTiles', {get: function () {
    return $.extend({}, m_this._activeTiles); // copy on output
  }});

  /**
   * Get/set the queue object.
   * @property {geo.fetchQueue} queue The current queue.
   * @name geo.tileLayer#queue
   */
  Object.defineProperty(this, 'queue', {
    get: function () { return m_this._queue; },
    set: function (queue) {
      /* The queue's needed function determines if a tile is still needed. A
       * tile in the queue is needed if it is needed by at least one layer that
       * is using it.  _tileLayers tracks the layers that share the queue to
       * allow walking through the layers and check if any layer needs a tile.
       * When the queue is set, maintain the list of joined tile layers. */
      if (m_this._queue !== queue) {
        if (this._queue && this._queue._tileLayers && this._queue._tileLayers.indexOf(m_this) >= 0) {
          this._queue._tileLayers.splice(this._queue._tileLayers.indexOf(m_this), 1);
          if (this._queue.initialTrack && this._queue.track && this._queue._tileLayers.length) {
            this._queue.track = this._queue.initialTrack * this._queue._tileLayers.length;
          }
        }
        m_this._queue = queue;
        m_this._queue._tileLayers = m_this._queue._tileLayers || [];
        m_this._queue._tileLayers.push(m_this);
        if (m_this._queue.initialTrack && m_this._queue.track) {
          m_this._queue.track = m_this._queue.initialTrack * m_this._queue._tileLayers.length;
        }
      }
    }
  });

  /**
   * Get/set the queue size.
   * @property {number} size The queue size.
   * @name geo.tileLayer#queueSize
   */
  Object.defineProperty(this, 'queueSize', {
    get: function () { return m_queueSize; },
    set: function (n) {
      m_queueSize = n;
      m_this._queue.size = n;
    }
  });

  /**
   * Get/set the initial queue size.
   * @property {number} size The initial queue size.  `0` to use the queue
   *    size.
   * @name geo.tileLayer#queueSize
   */
  Object.defineProperty(this, 'initialQueueSize', {
    get: function () { return m_initialQueueSize; },
    set: function (n) {
      m_initialQueueSize = n || 0;
      m_this._queue.initialSize = n || m_queueSize;
    }
  });

  /**
   * Get/set the tile reference value.
   * @property {string} reference A reference value to distinguish tiles on
   *    this layer.
   * @name geo.tileLayer#reference
   */
  Object.defineProperty(this, 'reference', {
    get: function () { return '' + m_this.id() + '_' + (m_reference || 0); },
    set: function (reference) {
      m_reference = reference;
    },
    configurable: true
  });

  /**
   * The number of tiles at the given zoom level.  The default implementation
   * just returns `Math.pow(2, z)`.
   *
   * @param {number} level A zoom level.
   * @returns {object} The number of tiles in each axis in the form
   *     `{x: nx, y: ny}`.
   */
  this.tilesAtZoom = function (level) {
    if (m_this._options.tilesAtZoom) {
      return m_this._options.tilesAtZoom.call(m_this, level);
    }
    var s = Math.pow(2, level);
    return {x: s, y: s};
  };

  /**
   * The maximum tile bounds at the given zoom level, or null if no special
   * tile bounds.
   *
   * @param {number} level A zoom level.
   * @returns {object} The maximum tile bounds in pixels for the specified
   *    level, or null if none specified (`{x: width, y: height}`).
   */
  this.tilesMaxBounds = function (level) {
    if (m_this._options.tilesMaxBounds) {
      return m_this._options.tilesMaxBounds.call(m_this, level);
    }
    return null;
  };

  /**
   * Get the crop values for a tile based on the tilesMaxBounds function.
   * Returns undefined if the tile should not be cropped.
   *
   * @param {object} tile The tile to compute crop values for.
   * @returns {object} Either `undefined` or an object with `x` and `y` values
   *      which is the size in pixels for the tile.
   */
  this.tileCropFromBounds = function (tile) {
    if (!m_this._options.tilesMaxBounds) {
      return;
    }
    var level = tile.index.level,
        bounds = m_this._tileBounds(tile);
    if (m_maxBounds[level] === undefined) {
      m_maxBounds[level] = m_this.tilesMaxBounds(level) || null;
    }
    if (m_maxBounds[level] && (bounds.right > m_maxBounds[level].x ||
        bounds.bottom > m_maxBounds[level].y)) {
      return {
        x: Math.max(0, Math.min(m_maxBounds[level].x, bounds.right) - bounds.left),
        y: Math.max(0, Math.min(m_maxBounds[level].y, bounds.bottom) - bounds.top)
      };
    }
  };

  /**
   * Returns `true` if the given tile index is valid:
   * - min level <= level <= max level
   * - 0 <= x <= 2^level - 1
   * - 0 <= y <= 2^level - 1
   * If the layer wraps, the x and y values may be allowed to extend beyond
   * these values.
   *
   * @param {object} index The tile index.
   * @param {number} index.x
   * @param {number} index.y
   * @param {number} index.level
   * @returns {boolean}
   */
  this.isValid = function (index) {
    if (!(m_this._options.minLevel <= index.level &&
         index.level <= m_this._options.maxLevel)) {
      return false;
    }
    if (!(m_this._options.wrapX || (
      0 <= index.x && index.x <= m_this.tilesAtZoom(index.level).x - 1))) {
      return false;
    }
    if (!(m_this._options.wrapY || (
      0 <= index.y && index.y <= m_this.tilesAtZoom(index.level).y - 1))) {
      return false;
    }
    return true;
  };

  /**
   * Returns the current origin tile and offset at the given zoom level.
   * This is intended to be cached in the future to optimize coordinate
   * transformations.
   *
   * @protected
   * @param {number} level The target zoom level.
   * @returns {object} The origin and offset in the form
   *   `{index: {x, y}, offset: {x, y}}`.
   */
  this._origin = function (level) {
    var origin = m_this.toLevel(m_this.toLocal(m_this.map().origin()), level),
        o = m_this._options,
        index, offset;

    // get the tile index
    index = {
      x: Math.floor(origin.x / o.tileWidth),
      y: Math.floor(origin.y / o.tileHeight)
    };

    // get the offset inside the tile (in pixels)
    // This computation should contain the only numerically unstable
    // subtraction in this class.  All other methods will assume
    // coordinates are given relative to the map origin.
    offset = {
      x: origin.x - o.tileWidth * index.x,
      y: origin.y - o.tileHeight * index.y
    };
    return {index: index, offset: offset};
  };

  /**
   * Returns a tile's bounds in its level coordinates.
   *
   * @param {geo.tile} tile The tile to check.
   * @returns {object} The tile's bounds with `left`, `top`, `right`,
   *   `bottom`.
   */
  this._tileBounds = function (tile) {
    var origin = m_this._origin(tile.index.level);
    return tile.bounds(origin.index, origin.offset);
  };

  /**
   * Returns the tile indices at the given point.
   *
   * @param {object} point The coordinates in pixels relative to the map
   *   origin.
   * @param {number} point.x
   * @param {number} point.y
   * @param {number} level The target zoom level.
   * @returns {object} The tile indices.  This has `x` and `y` properties.
   */
  this.tileAtPoint = function (point, level) {
    var o = m_this._origin(level);
    var map = m_this.map();
    point = m_this.displayToLevel(map.gcsToDisplay(point, null), level);
    if (isNaN(point.x)) { point.x = 0; }
    if (isNaN(point.y)) { point.y = 0; }
    var to = m_this._tileOffset(level);
    if (to) {
      point.x += to.x;
      point.y += to.y;
    }
    var tile = {
      x: Math.floor(
        o.index.x + (o.offset.x + point.x) / m_this._options.tileWidth
      ),
      y: Math.floor(
        o.index.y + (o.offset.y + point.y) / m_this._options.tileHeight
      )
    };
    return tile;
  };

  /**
   * Returns a tile's bounds in a gcs.
   *
   * @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.
   * @returns {object} The tile bounds in the specified gcs.
   */
  this.gcsTileBounds = function (indexOrTile, gcs) {
    var tile = (indexOrTile.index ? indexOrTile : Tile({
      index: indexOrTile,
      size: {x: m_this._options.tileWidth, y: m_this._options.tileHeight},
      url: ''
    }));
    var to = m_this._tileOffset(tile.index.level),
        bounds = tile.bounds({x: 0, y: 0}, to),
        map = m_this.map(),
        unit = map.unitsPerPixel(tile.index.level);
    var coord = [{
      x: bounds.left * unit, y: m_this._topDown() * bounds.top * unit
    }, {
      x: bounds.right * unit, y: m_this._topDown() * bounds.bottom * unit
    }];
    gcs = (gcs === null ? map.gcs() : (
      gcs === undefined ? map.ingcs() : gcs));
    if (gcs !== map.gcs()) {
      coord = transform.transformCoordinates(map.gcs(), gcs, coord);
    }
    return {
      left: coord[0].x,
      top: coord[0].y,
      right: coord[1].x,
      bottom: coord[1].y
    };
  };

  /**
   * Returns an instantiated tile 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 Tile({
      index: index,
      size: {x: m_this._options.tileWidth, y: m_this._options.tileHeight},
      queue: m_this._queue,
      url: m_this._options.url.call(
        m_this, urlParams.x, urlParams.y, urlParams.level || 0,
        m_this._options.subdomains)
    });
  };

  /**
   * Returns an instantiated tile object with the given indices.  This
   * method is similar to `_getTile`, but checks the cache before
   * generating a new tile.
   *
   * @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
   * @param {boolean} delayPurge If true, don't purge tiles from the cache.
   * @returns {geo.tile}
   */
  this._getTileCached = function (index, source, delayPurge) {
    var tile = m_this.cache.get(m_this._tileHash(index));
    if (tile === null) {
      tile = m_this._getTile(index, source);
      m_this.cache.add(tile, m_this.remove, delayPurge);
    }
    return tile;
  };

  /**
   * Returns a string representation of the tile at the given index.
   *
   * Note: This method **must** return the same string as:
   * ```
   *   tile({index: index}).toString();
   * ```
   * This method is used as a hashing function for the caching layer.
   *
   * @param {object} index The tile index
   * @param {number} index.x
   * @param {number} index.y
   * @param {number} [index.level]
   * @param {number} [index.reference]
   * @returns {string}
   */
  this._tileHash = function (index) {
    return [index.level || 0, index.y, index.x, index.reference || 0].join('_');
  };

  /**
   * Returns the optimal starting and ending tile indices (inclusive)
   * necessary to fill the given viewport.
   *
   * @param {number} level The zoom level
   * @param {geo.geoBounds} bounds The map bounds in world coordinates.
   * @returns {object} The tile range with a `start`  and `end` record, each
   *      with `x` and `y` tile indices.
   */
  this._getTileRange = function (level, bounds) {
    var corners = [
      m_this.tileAtPoint({x: bounds.left, y: bounds.top}, level),
      m_this.tileAtPoint({x: bounds.right, y: bounds.top}, level),
      m_this.tileAtPoint({x: bounds.left, y: bounds.bottom}, level),
      m_this.tileAtPoint({x: bounds.right, y: bounds.bottom}, level)
    ];
    return {
      start: {
        x: Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x),
        y: Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y)
      },
      end: {
        x: Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x),
        y: Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y)
      }
    };
  };

  /**
   * Returns a list of tiles necessary to fill the screen at the given
   * zoom level, center point, and viewport size.  The list is optionally
   * ordered by loading priority (center tiles first).
   *
   * @protected
   * @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
   *     (even if their desired order has), return undefined instead of an
   *     array of tiles.
   * @returns {geo.tile[]} An array of tile objects
   */
  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 :
            Math.min(Math.max(maxLevel, m_this._options.minLevel), m_this._options.maxLevel));
    if (maxLevel < minLevel) {
      maxLevel = minLevel;
    }

    /* Generate a list of the tiles that we want to create.  This is done
     * before sorting, because we want to actually generate the tiles in
     * the sort order. */
    for (level = minLevel; level <= maxLevel; level += 1) {
      // get the tile range to fetch
      indexRange = m_this._getTileRange(level, bounds);
      start = indexRange.start;
      end = indexRange.end;
      // total number of tiles existing at m_this level
      nTilesLevel = m_this.tilesAtZoom(level);

      if (!m_this._options.wrapX) {
        start.x = Math.min(Math.max(start.x, 0), nTilesLevel.x - 1);
        end.x = Math.min(Math.max(end.x, 0), nTilesLevel.x - 1);
        if (level === minLevel && m_this._options.keepLower) {
          start.x = 0;
          end.x = nTilesLevel.x - 1;
        }
      }
      if (!m_this._options.wrapY) {
        start.y = Math.min(Math.max(start.y, 0), nTilesLevel.y - 1);
        end.y = Math.min(Math.max(end.y, 0), nTilesLevel.y - 1);
        if (level === minLevel && m_this._options.keepLower) {
          start.y = 0;
          end.y = nTilesLevel.y - 1;
        }
      }
      /* If we are reprojecting tiles, we need a check to not use all levels
       * if the number of tiles is excessive. */
      if (m_this._options.gcs && m_this._options.gcs !== m_this.map().gcs() &&
          level !== minLevel &&
          (end.x + 1 - start.x) * (end.y + 1 - start.y) >
          (m_this.map().size().width * m_this.map().size().height /
          m_this._options.tileWidth / m_this._options.tileHeight) * 16) {
        break;
      }

      // loop over the tile range
      for (i = start.x; i <= end.x; i += 1) {
        for (j = start.y; j <= end.y; j += 1) {
          index = {level: level, x: i, y: j, reference: m_this.reference};
          source = {level: level, x: i, y: j, reference: m_this.reference};
          if (m_this._options.wrapX) {
            source.x = modulo(source.x, nTilesLevel.x);
          }
          if (m_this._options.wrapY) {
            source.y = modulo(source.y, nTilesLevel.y);
          }
          if (m_this.isValid(source)) {
            if (onlyIfChanged && tiles.length < m_lastTileSet.length) {
              old = m_lastTileSet[tiles.length];
              changed = changed || (index.level !== old.level ||
                  index.x !== old.x || index.y !== old.y);
            }
            tiles.push({index: index, source: source});
          }
        }
      }
    }

    if (onlyIfChanged) {
      if (!changed && tiles.length === m_lastTileSet.length) {
        return;
      }
      m_lastTileSet.splice(0, m_lastTileSet.length);
      $.each(tiles, function (idx, tile) {
        m_lastTileSet.push(tile.index);
      });
    }

    if (sorted) {
      center = {
        x: (start.x + end.x) / 2,
        y: (start.y + end.y) / 2,
        level: maxLevel,
        bottomLevel: maxLevel
      };
      var numTiles = Math.max(end.x - start.x, end.y - start.y) + 1;
      for (; numTiles >= 1; numTiles /= 2) {
        center.bottomLevel -= 1;
      }
      tiles.sort(m_this._loadMetric(center));
      /* If we are using a fetch queue, start a new batch */
      if (m_this._queue) {
        m_this._queue.batch(true);
      }
    }
    if (m_this.cache.size < tiles.length) {
      console.log('Increasing cache size to ' + tiles.length);
      m_this.cache.size = tiles.length;
    }
    /* Actually get the tiles. */
    for (i = 0; i < tiles.length; i += 1) {
      tiles[i] = m_this._getTileCached(tiles[i].index, tiles[i].source, true);
    }
    m_this.cache.purge(m_this.remove);
    return tiles;
  };

  /**
   * Get or set the layer gcs.  This defaults to the map's gcs.
   *
   * @param {string} [arg] If `undefined`, return the current gcs.  Otherwise,
   *    a new value for the gcs.  If `null`, use the map's gcs.
   * @returns {string|this} A string used by {@link geo.transform}.
   */
  this.gcs = function (arg) {
    if (arg === undefined) {
      return m_this._options.gcs || m_this.map().gcs();
    }
    var previous = m_this.gcs();
    if (arg === null) {
      delete m_this._options.gcs;
    } else {
      m_this._options.gcs = arg;
    }
    if (m_this.gcs() !== previous) {
      m_this.clear();
      m_this.gcsFeatures(m_this.gcs());
      m_this.modified();
      m_this._update();
    }
    return m_this;
  };

  /**
   * Prefetches tiles up to a given zoom level around a given bounding box.
   *
   * @param {number} level The zoom level.
   * @param {geo.geoBounds} bounds The map bounds.
   * @returns {jQuery.Deferred} resolves when all of the tiles are fetched.
   */
  this.prefetch = function (level, bounds) {
    var tiles;
    tiles = m_this._getTiles(level, bounds, true);
    return $.when.apply($, tiles.map(function (tile) {
      return tile.fetch();
    }));
  };

  /**
   * This method returns a metric that determines tile loading order.  The
   * default implementation prioritizes tiles that are closer to the center,
   * or at a lower zoom level.
   *
   * @protected
   * @param {object} center The center tile.
   * @param {number} center.x
   * @param {number} center.y
   * @returns {function} A function accepted by `Array.prototype.sort`.
   */
  this._loadMetric = function (center) {
    return function (a, b) {
      var a0, b0, dx, dy, cx, cy, scale;

      a = a.index || a;
      b = b.index || b;
      // shortcut if zoom level differs
      if (a.level !== b.level) {
        if (center.bottomLevel && ((a.level >= center.bottomLevel) !==
                                   (b.level >= center.bottomLevel))) {
          return a.level >= center.bottomLevel ? -1 : 1;
        }
        return a.level - b.level;
      }

      /* compute the center coordinates relative to a.level.  Since we really
       * care about the center of the tiles, use an offset */
      scale = Math.pow(2, a.level - center.level);
      cx = (center.x + 0.5) * scale - 0.5;
      cy = (center.y + 0.5) * scale - 0.5;

      // calculate distances to the center squared
      dx = a.x - cx;
      dy = a.y - cy;
      a0 = dx * dx + dy * dy;

      dx = b.x - cx;
      dy = b.y - cy;
      b0 = dx * dx + dy * dy;

      // return negative if a < b, or positive if a > b
      return a0 - b0;
    };
  };

  /**
   * Convert a coordinate from pixel coordinates at the given zoom
   * level to world coordinates.
   *
   * @param {object} coord
   * @param {number} coord.x The offset in pixels (level 0) from the left
   *      edge.
   * @param {number} coord.y The offset in pixels (level 0) from the bottom
   *      edge.
   * @param {number} level The zoom level of the source coordinates.
   * @returns {object} World coordinates with `x` and `y`.
   */
  this.fromLevel = function (coord, level) {
    var s = Math.pow(2, -level);
    return {
      x: coord.x * s,
      y: coord.y * s
    };
  };

  /**
   * Convert a coordinate from layer coordinates to pixel coordinates at the
   * given zoom level.
   *
   * @param {object} coord
   * @param {number} coord.x The offset in pixels (level 0) from the left
   *      edge.
   * @param {number} coord.y The offset in pixels (level 0) from the bottom
   *      edge.
   * @param {number} level The zoom level of the new coordinates.
   * @returns {object} The pixel coordinates with `x` and `y`.
   */
  this.toLevel = function (coord, level) {
    var s = Math.pow(2, level);
    return {
      x: coord.x * s,
      y: coord.y * s
    };
  };

  /**
   * Draw the given tile on the active canvas
   *.
   * @param {geo.tile} tile The tile to draw.
   */
  this.drawTile = function (tile) {
    var hash = tile.toString();

    if (m_this._activeTiles.hasOwnProperty(hash)) {
      // the tile is already drawn, move it to the top
      m_this._moveToTop(tile);
    } else {
      // pass to the rendering implementation
      m_this._drawTile(tile);
    }

    // add the tile to the active cache
    m_this._activeTiles[hash] = tile;
  };

  /**
   * Render the tile on the canvas.  This implementation draws the tiles
   * directly on the DOM using <img> tags.  Derived classes should override
   * this method to draw the tile on a renderer specific context.
   *
   * @protected
   * @param {geo.tile} tile The tile to draw.
   */
  this._drawTile = function (tile) {
    // Make sure this method is not called when there is
    // a renderer attached.
    if (m_this.renderer() !== null) {
      throw new Error('This draw method is not valid on renderer managed layers.');
    }

    // get the layer node
    var level = tile.index.level,
        div = $(m_this._getSubLayer(level)),
        bounds = m_this._tileBounds(tile),
        duration = m_this._options.animationDuration,
        container = $('<div class="geo-tile-container"/>').attr(
          'tile-reference', tile.toString()),
        crop;

    // apply a transform to place the image correctly
    container.append(tile.image);
    container.css({
      left: (bounds.left - parseInt(div.attr('offsetx') || 0, 10)) + 'px',
      top: (bounds.top - parseInt(div.attr('offsety') || 0, 10)) + 'px'
    });

    crop = m_this.tileCropFromBounds(tile);
    if (crop) {
      container.addClass('crop').css({
        width: crop.x + 'px',
        height: crop.y + 'px'
      });
    }

    // apply fade in animation
    if (duration > 0) {
      tile.fadeIn(duration);
    }

    // append the image element
    div.append(container);

    // add an error handler
    tile.catch(function () {
      // May want to do something special here later
      console.warn('Could not load tile at ' + tile.toString());
      m_this._remove(tile);
    });
  };

  /**
   * Remove the given tile from the canvas and the active cache.
   *
   * @param {geo.tile|string} tile The tile (or hash) to remove.
   * @returns {geo.tile} The tile removed from the active layer.
   */
  this.remove = function (tile) {
    var hash = tile.toString();
    var value = m_this._activeTiles[hash];

    if (value instanceof Tile) {
      m_this._remove(value);
    }

    delete m_this._activeTiles[hash];
    return value;
  };

  /**
   * Remove the given tile from the canvas.  This implementation just
   * finds and removes the <img> element created for the tile.
   *
   * @param {geo.tile|string} tile The tile object to remove.
   */
  this._remove = function (tile) {
    if (tile.image) {
      if (tile.image.parentElement) {
        $(tile.image.parentElement).remove();
      } else {
        /* This shouldn't happen, but sometimes does.  Originally it happened
         * when a tile was removed from the cache before it was finished
         * being used; there is still some much rarer condition that can
         * cause it.  Log that it happened until we can figure out how to fix
         * the issue. */
        console.log('No parent element to remove ' + tile.toString(), tile);
      }
      $(tile.image).remove();
    }
  };

  /**
   * Move the given tile to the top on the canvas.
   *
   * @param {geo.tile} tile The tile object to move.
   */
  this._moveToTop = function (tile) {
    $.noop(tile);
  };

  /**
   * Query the attached map for the current bounds and return them as pixels
   *      at the current zoom level.
   *
   * @returns {object} Bounds object with `left`, `right`, `top`, `bottom`,
   *      `scale`, and `level` keys.
   */
  this._getViewBounds = function () {
    var map = m_this.map(),
        mapZoom = map.zoom(),
        zoom = m_this._options.tileRounding(mapZoom),
        scale = Math.pow(2, mapZoom - zoom),
        size = map.size();
    var ul = m_this.displayToLevel({x: 0, y: 0}),
        ur = m_this.displayToLevel({x: size.width, y: 0}),
        ll = m_this.displayToLevel({x: 0, y: size.height}),
        lr = m_this.displayToLevel({x: size.width, y: size.height});
    return {
      level: zoom,
      scale: scale,
      left: Math.min(ul.x, ur.x, ll.x, lr.x),
      right: Math.max(ul.x, ur.x, ll.x, lr.x),
      top: Math.min(ul.y, ur.y, ll.y, lr.y),
      bottom: Math.max(ul.y, ur.y, ll.y, lr.y)
    };
  };

  /**
   * Remove all inactive tiles from the display.  An inactive tile is one
   * that is no longer visible either because it was panned out of the active
   * view or the zoom has changed.
   *
   * @protected
   * @param {number} zoom Tiles in bounds at this zoom level will be kept.
   * @param {boolean} doneLoading If true, allow purging additional tiles.
   * @param {geo.geoBounds} bounds View bounds.  If not specified, this is
   *   obtained from _getViewBounds().
   * @returns {this}
   */
  this._purge = function (zoom, doneLoading, bounds) {
    var tile, hash;

    // Don't purge tiles in an active update
    if (m_this._updating) {
      return m_this;
    }

    // get the view bounds
    if (!bounds) {
      bounds = m_this._getViewBounds();
    }

    for (hash in m_this._activeTiles) {

      tile = m_this._activeTiles[hash];
      if (m_this._canPurge(tile, bounds, zoom, doneLoading)) {
        m_this.remove(tile);
      }
    }
    return m_this;
  };

  /**
   * Remove all active tiles from the canvas.
   *
   * @returns {geo.tile[]} The array of tiles removed.
   */
  this.clear = function () {
    var tiles = [], tile;

    // ignoring the warning here because m_this is a privately
    // controlled object with simple keys
    for (tile in m_this._activeTiles) {
      tiles.push(m_this.remove(tile));
    }

    // clear out the tile coverage tree
    m_this._tileTree = {};

    m_lastTileSet = [];

    return tiles;
  };

  /**
   * Reset the layer to the initial state, clearing the canvas and resetting
   * the tile cache.
   *
   * @returns {this}
   */
  this.reset = function () {
    m_this.clear();
    m_this._cache.clear();
    m_this._queue.initialSize = m_initialQueueSize;
    return m_this;
  };

  /**
   * Compute local coordinates from the given world coordinates.  The tile
   * layer uses units of pixels relative to the world space coordinate
   * origin.
   *
   * @param {object} pt A point in world space coordinates with `x` and `y`.
   * @param {number} [zoom] If unspecified, use the map zoom.
   * @returns {object} Local coordinates with `x` and `y`.
   */
  this.toLocal = function (pt, zoom) {
    var map = m_this.map(),
        unit = map.unitsPerPixel(zoom === undefined ? map.zoom() : zoom);
    return {
      x: pt.x / unit,
      y: m_this._topDown() * pt.y / unit
    };
  };

  /**
   * Compute world coordinates from the given local coordinates.  The tile
   * layer uses units of pixels relative to the world space coordinate
   * origin.
   *
   * @param {object} pt A point in world space coordinates with `x` and `y`.
   * @param {number|undefined} zoom If unspecified, use the map zoom.
   * @returns {object} Local coordinates with `x` and `y`.
   */
  this.fromLocal = function (pt, zoom) {
    // these need to always use the *layer* unitsPerPixel, or possibly
    // convert tile space using a transform
    var map = m_this.map(),
        unit = map.unitsPerPixel(zoom === undefined ? map.zoom() : zoom);
    return {
      x: pt.x * unit,
      y: m_this._topDown() * pt.y * unit
    };
  };

  /**
   * Return a factor for inverting the y units as appropriate.
   *
   * @returns {number} Either 1 to not invert y, or -1 to invert it.
   */
  this._topDown = function () {
    return m_this._options.topDown ? 1 : -1;
  };

  /**
   * Return the DOM element containing a level specific layer.  This will
   * create the element if it doesn't already exist.
   *
   * @param {number} level The zoom level of the layer to fetch.
   * @returns {HTMLElement} The layer's DOM element.
   */
  this._getSubLayer = function (level) {
    if (!m_this.canvas()) {
      return;
    }
    var node = m_this.canvas()
      .find('div[data-tile-layer=' + level.toFixed() + ']').get(0);
    if (!node) {
      node = $(
        '<div class=geo-tile-layer data-tile-layer="' + level.toFixed() + '"/>'
      ).get(0);
      m_this.canvas().append(node);
    }
    return node;
  };

  /**
   * Set sublayer transforms to align them with the given zoom level.
   *
   * @param {number} level The target zoom level.
   * @param {geo.geoBounds} view The view bounds.  The top and left are used
   *      to adjust the offset of tile layers.
   * @returns {object} The `x` and `y` offsets for the current level.
   */
  this._updateSubLayers = function (level, view) {
    var canvas = m_this.canvas(),
        lastlevel = parseInt(canvas.attr('lastlevel'), 10),
        lastx = parseInt(canvas.attr('lastoffsetx') || 0, 10),
        lasty = parseInt(canvas.attr('lastoffsety') || 0, 10);
    if (lastlevel === level && Math.abs(lastx - view.left) < 65536 &&
        Math.abs(lasty - view.top) < 65536) {
      return {x: lastx, y: lasty};
    }
    var map = m_this.map(),
        to = m_this._tileOffset(level),
        x = parseInt((view.left + view.right - map.size().width) / 2 + to.x, 10),
        y = parseInt((view.top + view.bottom - map.size().height) / 2 + to.y, 10);
    canvas.find('.geo-tile-layer').each(function (idx, el) {
      var $el = $(el),
          layer = parseInt($el.data('tileLayer'), 10);
      $el.css(
        'transform',
        'scale(' + Math.pow(2, level - layer) + ')'
      );
      var layerx = parseInt(x / Math.pow(2, level - layer), 10),
          layery = parseInt(y / Math.pow(2, level - layer), 10),
          dx = layerx - parseInt($el.attr('offsetx') || 0, 10),
          dy = layery - parseInt($el.attr('offsety') || 0, 10);
      $el.attr({offsetx: layerx, offsety: layery});
      $el.find('.geo-tile-container').each(function (tileidx, tileel) {
        $(tileel).css({
          left: (parseInt($(tileel).css('left'), 10) - dx) + 'px',
          top: (parseInt($(tileel).css('top'), 10) - dy) + 'px'
        });
      });
    });
    canvas.attr({lastoffsetx: x, lastoffsety: y, lastlevel: level});
    return {x: x, y: y};
  };

  /**
   * Update the view according to the map/camera.
   *
   * @param {geo.event} evt The event that triggered the change.  Zoom and
   *      rotate events do nothing, since they are always followed by a pan
   *      event which will cause appropriate action.
   * @returns {this}
   */
  this._update = function (evt) {
    /* Ignore zoom and rotate events, as they are ALWAYS followed by a pan
     * event */
    if (evt && evt.event && (evt.event.event === geo_event.zoom ||
        evt.event.event === geo_event.rotate)) {
      return m_this;
    }
    if (!m_this.visible()) {
      return m_this;
    }
    var map = m_this.map(),
        bounds = map.bounds(undefined, null),
        mapZoom = map.zoom(),
        zoom = m_this._options.tileRounding(mapZoom),
        tiles;
    if (m_this._updateSubLayers) {
      var view = m_this._getViewBounds();
      // Update the transform for the local layer coordinates
      var offset = m_this._updateSubLayers(zoom, view) || {x: 0, y: 0};

      var to = m_this._tileOffset(zoom);
      if (m_this.renderer() === null) {
        var scale = Math.pow(2, mapZoom - zoom),
            rotation = map.rotation(),
            rx = -to.x + -(view.left + view.right) / 2 + offset.x,
            ry = -to.y + -(view.bottom + view.top) / 2 + offset.y,
            dx = (rx + map.size().width / 2),
            dy = (ry + map.size().height / 2);

        m_this.canvas().css({
          'transform-origin': '' +
              -rx + 'px ' +
              -ry + 'px'
        });
        var transform = 'translate(' + dx + 'px' + ',' + dy + 'px' + ')' +
            'scale(' + scale + ')';
        if (rotation) {
          transform += 'rotate(' + (rotation * 180 / Math.PI) + 'deg)';
        }
        m_this.canvas().css('transform', transform);
      }
      /* Set some attributes that can be used by non-css based viewers.  This
       * doesn't include the map center, as that may need to be handled
       * differently from the view center. */
      m_this.canvas().attr({
        scale: Math.pow(2, mapZoom - zoom),
        dx: -to.x + -(view.left + view.right) / 2,
        dy: -to.y + -(view.bottom + view.top) / 2,
        offsetx: offset.x,
        offsety: offset.y,
        rotation: map.rotation()
      });
    }

    tiles = m_this._getTiles(
      zoom, bounds, true, true
    );

    if (tiles === undefined) {
      return m_this;
    }

    // reset the tile coverage tree
    m_this._tileTree = {};

    tiles.forEach(function (tile) {
      if (tile.fetched()) {
        delete m_promisedTiles[tile.toString()];
        /* if we have already fetched the tile, we know we can just draw it,
         * as the bounds won't have changed since the call to _getTiles. */
        m_this.drawTile(tile);

        // mark the tile as covered
        m_this._setTileTree(tile);
      } else {
        if (!tile._queued) {
          tile.then(function () {
            if (m_exited) {
              /* If we have disconnected the renderer, do nothing.  This
               * happens when the layer is being deleted. */
              return;
            }
            if (tile !== m_this.cache.get(tile.toString())) {
              /* If the tile has fallen out of the cache, don't draw it -- it
               * is untracked.  This may be an indication that a larger cache
               * should have been used. */
              return;
            }
            /* Check if a tile is still desired.  Don't draw it if it
             * isn't. */
            var mapZoom = map.zoom(),
                zoom = m_this._options.tileRounding(mapZoom),
                view = m_this._getViewBounds();
            if (m_this._canPurge(tile, view, zoom)) {
              m_this.remove(tile);
              return;
            }

            m_this.drawTile(tile);

            // mark the tile as covered
            m_this._setTileTree(tile);
          });

          tile._queued = true;
        } else {
          /* If we are using a fetch queue, tell the queue so this tile can
           * be reprioritized. */
          var pos = m_this._queue ? m_this._queue.get(tile) : -1;
          if (pos >= 0) {
            m_this._queue.add(tile);
          }
        }
        m_this.addPromise(tile);
        m_promisedTiles[tile.toString()] = tile;
      }
    });
    // purge all old tiles when the new tiles are loaded (successfully or not)
    $.when.apply($, tiles)
      .done(// called on success and failure
        function () {
          var map = m_this.map(),
              mapZoom = map.zoom(),
              zoom = m_this._options.tileRounding(mapZoom);
          m_this._purge(zoom, true);
        }
      );
    // for tiles that aren't in view, remove them from the list of tiles that
    // are needed to be loaded to be considered idle.
    if (m_this._options.idleAfter !== 'all') {
      for (const hash in m_promisedTiles) {
        const tile = m_promisedTiles[hash];
        if (tiles.indexOf(tile) < 0) {
          m_this.removePromise(tile);
          delete m_promisedTiles[hash];
        }
      }
    }
    return m_this;
  };

  /**
   * Set a value in the tile tree object indicating that the given area of
   * the canvas is covered by the tile.
   *
   * @protected
   * @param {geo.tile} tile The tile to add.
   */
  this._setTileTree = function (tile) {
    if (m_this._options.keepLower) {
      return;
    }
    var index = tile.index;
    m_this._tileTree[index.level] = m_this._tileTree[index.level] || {};
    m_this._tileTree[index.level][index.x] = m_this._tileTree[index.level][index.x] || {};
    m_this._tileTree[index.level][index.x][index.y] = tile;
  };

  /**
   * Get a value in the tile tree object if it exists or return `null`.
   * @protected
   * @param {object} index A tile index object
   * @param {object} index.level
   * @param {object} index.x
   * @param {object} index.y
   * @returns {geo.tile|null}
   */
  this._getTileTree = function (index) {
    return (
      (m_this._tileTree[index.level] || {})[index.x] || {}
    )[index.y] || null;
  };

  /**
   * Returns true if the tile is completely covered by other tiles on the
   * canvas.  Currently this method only checks layers +/- 1 away from
   * `tile`.  If the zoom level is allowed to change by 2 or more in a single
   * update step, this method will need to be refactored to make a more
   * robust check.  Returns an array of tiles covering it or null if any
   * part of the tile is exposed.
   *
   * @protected
   * @param {geo.tile} tile The tile to check.
   * @returns {geo.tile[]|null}
   */
  this._isCovered = function (tile) {
    var level = tile.index.level,
        x = tile.index.x,
        y = tile.index.y,
        tiles = [];

    // Check one level up
    tiles = m_this._getTileTree({
      level: level - 1,
      x: Math.floor(x / 2),
      y: Math.floor(y / 2)
    });
    if (tiles) {
      return [tiles];
    }

    // Check one level down
    tiles = [
      m_this._getTileTree({
        level: level + 1,
        x: 2 * x,
        y: 2 * y
      }),
      m_this._getTileTree({
        level: level + 1,
        x: 2 * x + 1,
        y: 2 * y
      }),
      m_this._getTileTree({
        level: level + 1,
        x: 2 * x,
        y: 2 * y + 1
      }),
      m_this._getTileTree({
        level: level + 1,
        x: 2 * x + 1,
        y: 2 * y + 1
      })
    ];
    if (tiles.every(function (t) { return t !== null; })) {
      return tiles;
    }

    return null;
  };

  /**
   * Returns true if the provided tile is outside of the current view bounds
   * and can be removed from the canvas.
   * @protected
   * @param {geo.tile} tile The tile to check.
   * @param {geo.geoBounds} bounds The view bounds.
   * @returns {boolean}
   */
  this._outOfBounds = function (tile, bounds) {
    /* We may want to add an (n) tile edge buffer so we appear more
     * responsive */
    var to = m_this._tileOffset(tile.index.level);
    var scale = 1;
    if (tile.index.level !== bounds.level) {
      scale = Math.pow(2, (bounds.level || 0) - (tile.index.level || 0));
    }
    return (tile.bottom - to.y) * scale < bounds.top ||
           (tile.left - to.x) * scale > bounds.right ||
           (tile.top - to.y) * scale > bounds.bottom ||
           (tile.right - to.x) * scale < bounds.left;
  };

  /**
   * Returns true if the provided tile can be purged from the canvas.  This
   * method will return `true` if the tile is completely covered by one or
   * more other tiles or it is outside of the active view bounds.  This
   * method returns the logical and of `_isCovered` and `_outOfBounds`.
   * @protected
   * @param {geo.tile} tile The tile to check.
   * @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.
   * @returns {boolean}
   */
  this._canPurge = function (tile, bounds, zoom, doneLoading) {
    if (m_this._options.keepLower) {
      zoom = zoom || 0;
      if (zoom < tile.index.level &&
          tile.index.level !== m_this._options.minLevel) {
        return true;
      }
      if (tile.index.level === m_this._options.minLevel &&
          !m_this._options.wrapX && !m_this._options.wrapY) {
        return false;
      }
    } else {
      /* 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 &&
          (zoom >= m_this._options.minLevel || tile.index.level !== m_this._options.minLevel) &&
          (zoom < m_this._options.maxLevel || tile.index.level !== m_this._options.maxLevel)
      ) {
        return true;
      }
    }
    if (bounds) {
      return m_this._outOfBounds(tile, bounds);
    }
    return false;
  };

  /**
   * Convert display pixel coordinates (where (0,0) is the upper left) to
   * layer pixel coordinates (typically (0,0) is the center of the map and
   * the upper-left has the most negative values).
   * By default, this is done at the current base zoom level.
   *
   * @param {object} [pt] The point to convert with `x` and `y`.  If
   *      `undefined`, use the center of the display.
   * @param {number} [zoom] If specified, the zoom level to use.
   * @returns {object} The point in level coordinates with `x` and `y`.
   */
  this.displayToLevel = function (pt, zoom) {
    var map = m_this.map(),
        mapzoom = map.zoom(),
        roundzoom = m_this._options.tileRounding(mapzoom),
        unit = map.unitsPerPixel(zoom === undefined ? roundzoom : zoom),
        gcsPt;
    if (pt === undefined) {
      var size = map.size();
      pt = {x: size.width / 2, y: size.height / 2};
    }
    /* displayToGcs can fail under certain projections.  If this happens,
     * just return the origin. */
    try {
      gcsPt = map.displayToGcs(pt, m_this._options.gcs || null);
    } catch (err) {
      gcsPt = {x: 0, y: 0};
    }
    /* Reverse the y coordinate, since we expect the gcs coordinate system
     * to be right-handed and the level coordinate system to be
     * left-handed. */
    var lvlPt = {x: gcsPt.x / unit, y: m_this._topDown() * gcsPt.y / unit};
    return lvlPt;
  };

  /**
   * Get or set the tile url string or function.  If changed, load the new
   * tiles.
   *
   * @param {string|function} [url] The new tile url.
   * @returns {string|function|this}
   */
  this.url = function (url) {
    if (url === undefined) {
      return m_this._options.originalUrl;
    }
    if (url === m_this._options.originalUrl) {
      return m_this;
    }
    m_this._options.originalUrl = url;
    if ($.type(url) === 'string') {
      url = m_tileUrlFromTemplate(url);
    }
    m_this._options.url = url;
    m_this.reset();
    m_this.map().draw();
    return m_this;
  };

  /**
   * Get or set the subdomains used for templating.
   *
   * @param {string|string[]} [subdomains] A comma-separated list, a string of
   *      single character subdomains, or a list.
   * @returns {string|string[]|this}
   */
  this.subdomains = function (subdomains) {
    if (subdomains === undefined) {
      return m_this._options.subdomains;
    }
    if (subdomains) {
      if ($.type(subdomains) === 'string') {
        if (subdomains.indexOf(',') >= 0) {
          subdomains = subdomains.split(',');
        } else {
          subdomains = subdomains.split('');
        }
      }
      m_this._options.subdomains = subdomains;
      m_this.reset();
      m_this.map().draw();
    }
    return m_this;
  };

  /**
   * Return a value from the tileOffset function, caching it for different
   * levels.
   *
   * @param {number} level The level to pass to the tileOffset function.
   * @returns {object} A tile offset object with `x` and `y` properties.
   */
  this._tileOffset = function (level) {
    if (m_tileOffsetValues[level] === undefined) {
      m_tileOffsetValues[level] = m_this._options.tileOffset(level);
    }
    return m_tileOffsetValues[level];
  };

  /**
   * Get/Set visibility of the layer.
   *
   * @param {boolean} [val] If unspecified, return the visibility, otherwise
   *    set it.
   * @returns {boolean|this} Either the visibility (if getting) or the layer
   *    (if setting).
   */
  this.visible = function (val) {
    if (val === undefined) {
      return s_visible();
    }
    if (m_this.visible() !== val) {
      s_visible(val);

      if (val) {
        m_this._update();
      }
    }
    return m_this;
  };

  /**
   * Get/Set nearestPixel value.
   *
   * @param {boolean|number} [val] If not specified, return the current value.
   *    If true, image quads are rendered with near-neighbor sampling.  If
   *    false, with interpolated sampling.  If a number, interpolate at that
   *    zoom level or below and nearest neighbor at that zoom level or above.
   * @param {boolean} [skipUpdate] If specifying val and this value is truthy,
   *    don't update the layer or mark it as modified.
   * @returns {boolean|number|this}
   */
  this.nearestPixel = function (val, skipUpdate) {
    if (val === undefined) {
      return m_nearestPixel;
    }
    if (m_nearestPixel !== val) {
      m_nearestPixel = val;
      if (!skipUpdate) {
        m_this.modified();
        m_this._update();
      }
    }
    return m_this;
  };

  /**
   * Get/set the baseQuad.
   *
   * @property {object} [baseQuad] A quad feature element to draw below any
   *   tile layers.  If specified, this uses the quad defaults, so this is a
   *   ``geo.quadFeature.position`` object with, typically, an ``image``
   *   property added to it.  The quad positions are in the map gcs
   *   coordinates.
   * @name geo.tileLayer.baseQuad
   */
  Object.defineProperty(this, 'baseQuad', {
    get: function () { return m_this._options.baseQuad; },
    set: function (baseQuad) {
      m_this._options.baseQuad = baseQuad;
      m_this._update();
    }
  });

  this._addBaseQuadToTiles = function (quadFeature, tiles) {
    if (quadFeature) {
      if (this.baseQuad !== m_lastBaseQuad) {
        if (m_lastBaseQuad) {
          tiles.splice(0, 1);
        }
        m_lastBaseQuad = this.baseQuad;
        if (m_lastBaseQuad) {
          tiles.splice(0, 0, this.baseQuad);
          quadFeature.cacheUpdate(0);
        }
        quadFeature.data(tiles);
      }
      quadFeature._update();
    }
  };

  /**
   * Initialize after the layer is added to the map.
   *
   * @returns {this}
   */
  this._init = function () {
    var sublayer;

    // call super method
    s_init.apply(m_this, arguments);

    if (m_this.renderer() === null) {
      // Initialize sublayers in the correct order
      for (sublayer = 0; sublayer <= m_this._options.maxLevel; sublayer += 1) {
        m_this._getSubLayer(sublayer);
      }
    }
    return m_this;
  };

  /**
   * Clean up the layer.
   *
   * @returns {this}
   */
  this._exit = function () {
    m_this.reset();
    // call super method
    s_exit.apply(m_this, arguments);
    m_exited = true;
    if (this._queue && this._queue._tileLayers && this._queue._tileLayers.indexOf(m_this) >= 0) {
      this._queue._tileLayers.splice(this._queue._tileLayers.indexOf(m_this), 1);
      if (this._queue.initialTrack && this._queue.track && this._queue._tileLayers.length) {
        this._queue.track = this._queue.initialTrack * this._queue._tileLayers.length;
      }
    }
    return m_this;
  };

  adjustLayerForRenderer('tile', this);

  return this;
};

/**
 * This object contains the default options used to initialize the tileLayer.
 */
tileLayer.defaults = {
  minLevel: 0,
  maxLevel: 18,
  tileOverlap: {x: 0, y: 0},
  tileWidth: 256,
  tileHeight: 256,
  wrapX: true,
  wrapY: false,
  url: null,
  subdomains: 'abc',
  tileOffset: function (level) {
    return {x: 0, y: 0};
  },
  tilesMaxBounds: null,
  topDown: false,
  keepLower: true,
  idleAfter: 'view',
  // cacheSize: 600,  // set depending on keepLower
  tileRounding: Math.round,
  attribution: '',
  animationDuration: 0
};

inherit(tileLayer, featureLayer);

module.exports = tileLayer;