LeafletJS: How to flip tiles vertically on the fly?

Question

Background: I created the 1-therapeutic pixel rendering of the Mandelbrot Set and use LeafletJS to zoom and pan interactively. It works great. But since the Mandelbrot set is symmetrical along the real axis, I currently use twice as many tile images as needed.

Question . How can I connect to the LeafletJS listing code (using some callback?) So that whenever the tile is downloaded via HTTP, it either passes unchanged or flips vertically? This would allow me to reduce data by many tens of gigabytes at higher levels of scaling.

Example: Here are four fragments from zoom level 1 (here they are separated by a single pixel). I would like to discard the lower two images of the tiles and load them instead as vertically inverted versions of the two upper fragments. Can this be done on the fly with LeafletJS?

More specifically: if I know the z zoom level and tile coordinates x, y, I would like to flip the tile vertically during loading, when y is less than 2 ^ (z-1). For example, when scaling z = 10, I would like to flip the tiles vertically for all y <512.

, transform, -moz-transform, -o-transform -webkit-transform <img> scaleY(-1) , , filter -ms-filter FlipV, , / LeafletJS.

Answer 1

y L.TileLayer._loadTile method, URL- .

, , , , transform (), transform. transform, -moz-transform .. tile.style.

L.HalfTileLayer = L.TileLayer.extend({
    _loadTile: function (tile, tilePoint) {

        tile._layer  = this;
        tile.onload  = this._tileOnLoad;
        tile.onerror = this._tileOnError;

        this._adjustTilePoint(tilePoint);

        //////////////////
        var limit = Math.pow(2, tilePoint.z - 1),
            y = tilePoint.y;

        if (y >= limit) { // modify for bottom tiles, i.e. higher y
            tilePoint.y = 2 * limit - y - 1; // y starts at 0
            tile.style.transform += " scaleY(-1)"; // append
            // apply more transforms for cross-browser
        }
        /////////////////

        tile.src     = this.getTileUrl(tilePoint);

        this.fire('tileloadstart', {
            tile: tile,
            url: tile.src
        });
    }
});

(new L.HalfTileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png')).addTo(map);

: http://jsfiddle.net/ve2huzxw/73/

, y = 0 , y = 2 ^ z - 1 .