diff --git a/viewer/MinedMap.js b/viewer/MinedMap.js index 8cd4d67..1288dc9 100644 --- a/viewer/MinedMap.js +++ b/viewer/MinedMap.js @@ -17,103 +17,47 @@ function contains(array, elem) { return false; } -const MinedMapLayer = L.GridLayer.extend({ +const MinedMapLayer = L.TileLayer.extend({ initialize: function (mipmaps, layer) { + L.TileLayer.prototype.initialize.call(this, '', { + detectRetina: true, + tileSize: 512, + zoomReverse: true, + minZoom: -(mipmaps.length-1), + maxZoom: 0, + attribution: 'Generated by MinedMap', + }); + + this.options.maxNativeZoom = this.options.maxZoom; + this.options.maxZoom = undefined; + this.mipmaps = mipmaps; this.layer = layer; - - this.zoomOffset = L.Browser.retina ? 1 : 0; - - this.options.tileSize = L.Browser.retina ? 256 : 512; - this.options.attribution = 'Generated by MinedMap'; - - this.options.minZoom = -(mipmaps.length-1 + this.zoomOffset); - this.options.maxNativeZoom = -this.zoomOffset; - - // for https://github.com/Leaflet/Leaflet/issues/137 - if (!L.Browser.android) { - this.on('tileunload', this._onTileRemove); - } }, createTile: function (coords, done) { - const tile = document.createElement('img'); + const tile = L.TileLayer.prototype.createTile.call(this, coords, done); - tile.onload = L.bind(this._tileOnLoad, this, done, tile); - tile.onerror = L.bind(this._tileOnError, this, done, tile); - - /* - Alt tag is set to empty string to keep screen readers from reading URL and for compliance reasons - http://www.w3.org/TR/WCAG20-TECHS/H67 - */ - tile.alt = ''; - - /* - Set role="presentation" to force screen readers to ignore this - https://www.w3.org/TR/wai-aria/roles#textalternativecomputation - */ - tile.setAttribute('role', 'presentation'); - - let z = -(coords.z + this.zoomOffset); - if (z < 0) - z = 0; - - const mipmap = this.mipmaps[z]; - - if (coords.x >= mipmap.bounds.minX && coords.x <= mipmap.bounds.maxX && - coords.y >= mipmap.bounds.minZ && coords.y <= mipmap.bounds.maxZ && - contains(mipmap.regions[coords.y] || [], coords.x)) - tile.src = 'data/'+this.layer+'/'+z+'/r.'+coords.x+'.'+coords.y+'.png'; - - if (z === 0) + if (coords.z - this.options.zoomOffset >= 0) L.DomUtil.addClass(tile, 'overzoomed'); return tile; }, - _tileOnLoad: function (done, tile) { - if (L.Browser.ielt9) - setTimeout(Util.bind(done, this, null, tile), 0); - else - done(null, tile); - }, + getTileUrl: function (coords) { + let z = -coords.z + this.options.zoomOffset; + if (z < 0) + z = 0; - _tileOnError: function (done, tile, e) { - done(e, tile); - }, + const mipmap = this.mipmaps[z]; - _onTileRemove: function (e) { - e.tile.onload = null; - }, + if (coords.x < mipmap.bounds.minX || coords.x > mipmap.bounds.maxX || + coords.y < mipmap.bounds.minZ || coords.y > mipmap.bounds.maxZ || + !contains(mipmap.regions[coords.y] || [], coords.x)) + return L.Util.emptyImageUrl; - _abortLoading: function () { - for (const i in this._tiles) { - if (this._tiles[i].coords.z !== this._tileZoom) { - const tile = this._tiles[i].el; - tile.onload = L.Util.falseFn; - tile.onerror = L.Util.falseFn; - - if (!tile.complete) { - tile.src = L.Util.emptyImageUrl; - L.DomUtil.remove(tile); - } - } - } - }, - - _removeTile: function (key) { - const tile = this._tiles[key]; - if (!tile) { return; } - - // Cancels any pending http requests associated with the tile - // unless we're on Android's stock browser, - // see https://github.com/Leaflet/Leaflet/issues/137 - if (!L.Browser.androidStock) { - tile.el.setAttribute('src', L.Util.emptyImageUrl); - } - - return L.GridLayer.prototype._removeTile.call(this, key); + return 'data/'+this.layer+'/'+z+'/r.'+coords.x+'.'+coords.y+'.png'; }, }); diff --git a/viewer/index.html b/viewer/index.html index 20b71b1..df57cb6 100644 --- a/viewer/index.html +++ b/viewer/index.html @@ -4,8 +4,8 @@ MinedMap - - + +