var MinedMapLayer = L.GridLayer.extend({ initialize: function (mipmaps, layer) { this._mipmaps = mipmaps; this._layer = layer; this.options.attribution = 'Generated by MinedMap'; if (!L.Browser.android) { this.on('tileunload', this._onTileRemove); } }, createTile: function (coords, done) { var tile = document.createElement('img'); tile.onload = L.bind(this._tileOnLoad, this, done, tile); tile.onerror = L.bind(this._tileOnError, this, done, tile); tile.alt = ''; var z = -coords.z; if (z < 0) z = 0; var mipmap = this._mipmaps[z]; if (coords.x >= mipmap.info.minX && coords.x <= mipmap.info.maxX && coords.y >= mipmap.info.minZ && coords.y <= mipmap.info.maxZ && mipmap.regions[coords.y-mipmap.info.minZ][coords.x-mipmap.info.minX]) tile.src = 'data/'+this._layer+'/'+z+'/r.'+coords.x+'.'+coords.y+'.png'; if (coords.z >= 0) L.DomUtil.addClass(tile, 'overzoomed'); return tile; }, _tileOnLoad: function (done, tile) { done(null, tile); }, _tileOnError: function (done, tile, e) { done(e, tile); }, _getTileSize: function () { var map = this._map, zoom = map.getZoom(); if (zoom > 0) return Math.round(map.getZoomScale(map.getZoom(), 0) * 512); else return 512; }, _onTileRemove: function (e) { e.tile.onload = null; e.tile.src = L.Util.emptyImageUrl; }, _abortLoading: function () { var i, tile; for (i in this._tiles) { 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); } } } }); window.createMap = function () { var xhr = new XMLHttpRequest(); xhr.onload = function () { var res = JSON.parse(this.responseText), mipmaps = res.mipmaps, spawn = res.spawn; var map = L.map('map', { center: [-spawn.z, spawn.x], zoom: 0, minZoom: -(mipmaps.length-1), maxZoom: 3, crs: L.CRS.Simple, maxBounds: [ [-512*(mipmaps[0].info.maxZ+1), 512*mipmaps[0].info.minX], [-512*mipmaps[0].info.minZ, 512*(mipmaps[0].info.maxX+1)], ], }); var mapLayer = new MinedMapLayer(mipmaps, 'map'); var lightLayer = new MinedMapLayer(mipmaps, 'light'); mapLayer.addTo(map); var overlayMaps = { "Illumination": lightLayer, }; L.control.layers({}, overlayMaps).addTo(map); }; xhr.open('GET', 'data/info.json', true); xhr.send(); }