new/main/squaremap/web/js/modules/SquaremapTileLayer.js

44 lines
1.9 KiB
JavaScript
Raw Normal View History

export var SquaremapTileLayer = L.TileLayer.extend({
// @method createTile(coords: Object, done?: Function): HTMLElement
// Called only internally, overrides GridLayer's [`createTile()`](#gridlayer-createtile)
// to return an `<img>` HTML element with the appropriate image URL given `coords`. The `done`
// callback is called when the tile has been loaded.
createTile: function (coords, done) {
var tile = document.createElement('img');
L.DomEvent.on(tile, 'load', () => {
//Once image has loaded revoke the object URL as we don't need it anymore
URL.revokeObjectURL(tile.src);
this._tileOnLoad(done, tile)
});
L.DomEvent.on(tile, 'error', L.Util.bind(this._tileOnError, this, done, tile));
if (this.options.crossOrigin || this.options.crossOrigin === '') {
tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
}
tile.alt = '';
tile.setAttribute('role', 'presentation');
//Retrieve image via a fetch instead of just setting the src
//This works around the fact that browsers usually don't make a request for an image that was previously loaded,
//without resorting to changing the URL (which would break caching).
fetch(this.getTileUrl(coords))
.then(res => {
//Call leaflet's error handler if request fails for some reason
if (!res.ok) {
this._tileOnError(done, tile, null);
return;
}
//Get image data and convert into object URL so it can be used as a src
//Leaflet's onload listener will take it from here
res.blob().then(blob => tile.src = URL.createObjectURL(blob));
})
.catch(() => this._tileOnError(done, tile, null));
return tile;
}
});