ghybs / leaflet.tilelayer.fallback

Replaces missing Tiles by scaled lower zoom Tiles

Leaflet.TileLayer.Fallback

Plugin for Leaflet. Replaces missing Tiles (404 error) by scaled lower zoom Tiles.

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

Size: 2 kB minified, < 1 kB gzipped.

Requirements

• Leaflet 1.x
• For Leaflet 0.7, use the v0.1.1 release or the leaflet-0.7 branch

Demo

TileLayer.Fallback demonstration page

Usage instructions

Quick Guide

HTML:

<!-- add TileLayer.Fallback script after Leaflet -->
<script src="leaflet.tilelayer.fallback.js"></script>

JavaScript:

var myTileLayer = L.tileLayer.fallback(url, options);

Now missing tiles will be automatically replaced by scaled up tiles from lower zoom levels.

Installing the plugin

Local copy

1. Download the "leaflet.tilelayer.fallback.js" file from the v1.0.4 release.
2. Place the file alongside your page.
3. Add the script tag (see Quick Guide > HTML) to your page after Leaflet script.

CDN

You can alternatively use the free unpkg CDN service, but keep in mind that it "is a free, best-effort service and cannot provide any uptime or support guarantees".

<!-- After Leaflet script -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.tilelayer.fallback.js"></script>

Creation

Simply use the L.tileLayer.fallback factory instead of your regular L.tileLayer:

var myTileLayer = L.tileLayer.fallback(url, options);

myTileLayer.addTo(map);

API Reference

Creation

Factory	Description
L.tileLayer.fallback( <String> urlTemplate, <TileLayer options> options? )	Instantiates a tile layer object given a URL template and optionally an options object. When tile images return a 404 error, they are replaced by a scaled up tile from lower zoom.

Options

Option	Type	Default	Description
minNativeZoom	Number	0	Minimum zoom number the tiles source has available. If tiles are missing down to that zoom level (included), they will be replaced by the standard Error Tile (specified by errorTileUrl). For zoom lower than minNativeZoom, standard Tile Layer behaviour applies, i.e. tiles are loaded from minNativeZoom and scaled down.

All other TileLayer options are applicable.

Events

Event	Data	Description
tilefallback	TileFallbackEvent	Fired when a tile is being replaced by a scaled up tile of lower zoom.

All other TileLayer events are applicable.

TileFallbackEvent

Property	Type	Description
tile	HTMLElement	The tile element (image).
url	String	The original source URL of the tile (before any fallback is applied).
urlMissing	String	The missing source URL of the tile (possibly after a few fallback attempts).
urlFallback	String	The fallback source URL of the tile (which may turn out to be also missing).

Methods

All regular TileLayer methods are applicable.

Limitations

TileLayer.Fallback plugin tries to replace each missing tile by its immediate lower zoom equivalent, and if that one is also missing, it goes to lower zoom again; and so on until a tile image is returned by the server, or it reaches minNativeZoom.

That means it has to wait for the server to return a 404 error before attempting to replace the tile by a lower zoom equivalent. If several zoom levels are missing, it has to wait as many times as the number of missing zooms. Therefore, the more missing zoom levels, the more time it takes to replace a tile.

License

Leaflet.TileLayer.Fallback is distributed under the Apache 2.0 License.

leaflet.tilelayer.fallback's Issues

Compatibility with Leaflet 1.x

Currently, the plugin only supports Leaflet 0.7
Are there plans to update the plugin for Leaflet 1.0?

Buggy behavior with maxNativeZoom

Take a look at and zoom in:
http://jsbin.com/peratajixi/1/edit?js,output

The map disappears until it loads the wrong tile(s). This issue does not occur if I do not use fallback or when not specifying maxNativeZoom.

Doesn't work with wkWebView

I recently upgraded my ionic app (ios) to use the latest version of [email protected] and [email protected]. The fallback() apparently has stopped working. The tiles turn grey after a certain zoom level on zooming in.

y value out of tileset range for tms

Incorrect tile search for option tms=true.

this._globalTileRange is not updated with subsequent calls to getTileUrl, so it looks for y values that are out of range.

Following Leaflet's _resetGrid function, getTileUrl probably needs to get the bounds for the new zoom layer. So something like this:

 getTileUrl: function (coords) {
        var z = coords.z = coords.fallback ? coords.z : this._getZoomForUrl();

        var data = {
            r: L.Browser.retina ? '@2x' : '',
            s: this._getSubdomain(coords),
            x: coords.x,
            y: coords.y,
            z: z
        };

        if (this._map && !this._map.options.crs.infinite) {
            // these lines are new
            var bounds = this._map.getPixelWorldBounds(z); // get bounds
            if (bounds) {
                var _globalTileRange = this._pxBoundsToTileRange(bounds); // update tile range
                var invertedY = _globalTileRange.max.y - coords.y;
                if (this.options.tms) {
                    data['y'] = invertedY;
                }
                data['-y'] = invertedY;
            }
        }

        return L.Util.template(this._url, L.extend(data, this.options));
    }

Fix UMD wrapper like L.FeatureGroup.SubGroup

Correct the UMD wrapper, as done for Leaflet.FeatureGroup.SubGroup (see for example https://github.com/ghybs/Leaflet.FeatureGroup.SubGroup/releases/tag/v1.0.1)

Greyscale support

In a single project I am trying to use both the Fallback tile layer as well as the Grayscale tile layer (https://github.com/Zverik/leaflet-grayscale). Unfortunately I can't manage to use both at the same time. Does anyone have an idea how to do this?

Missed tile replace not work

Hi,

i have a map in my web app (an angular 2 web app).
I have installed Leaflet 1.0.1 and then the latest version of Leaflet.TileLayer.Fallback

I want to replace the missed tile with a static tile placed in a Content directory (the name of thi tile is no-tile.png).

I set bounds for my map. But i think that is not related to this.

var openstreetmapLayer = new L.tileLayer.fallback("/Content/openstreetmap/{z}/{x}/{y}.png", {errorTileUrl: '/Content/no-tile.png' });

       
 let bounds = new L.LatLngBounds(new L.LatLng(38.83328935686689, 9.9700927734375), new L.LatLng(42.31184652369512, 8.000793457031264));
        this.map = new L.Map(this.el.nativeElement, {
            center: bounds.getCenter(),
            minZoom: 8,
            maxZoom: 18,
            zoomControl:true,
            layers: [
                openstreetmapLayer
            ],
            maxBounds: bounds,
            maxBoundsViscosity: 1.0
        });


        let latlngs = L.rectangle(bounds).getLatLngs();
        L.polyline(latlngs[0].concat(latlngs[0][0])).addTo(this.map);

But i have still this error

Thanks

Add support for leaflet-bing-layer

Is it possible to support this plugin https://github.com/digidem/leaflet-bing-layer with the fallback?

Is this plugin now defunct?

Leaflet has added minNativeZoom in the 1.0.2 release. Does this spell the end of this wonderful plugin?

TypeScript definitions for use in Angular+Ionic project

Is there a way to use this in ionic?
Try to do it but it shows me this error "Property 'Fallback' does not exist on type 'typeof TileLayer'."

Doesn't build

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received an instance of Object
at Object.writeFileSync (fs.js:1460:5)
at Object.exports.build (C:\source\principleworx\blazor\Leaflet.TileLayer.Fallback\build\build.js:106:12)

any idea how use with Angular 5 ?

offset gap between tile and lower zoom tiles

using leaflet 1.3.3
and Leaflet.TileLayer.Fallback 1.0.4

There is a gap to the left between the tile with the appropriate zoom level and the lower zoom tiles.

Did anyone else have this issue?

add retry function for failed request?

For failed tail request, which is not because of 404, can we add retry function?

Incorrect errorTileUrl causes infinite loop

1. Specify an incorrect relative errorTileUrl option.
2. Make so the Tile Layer cannot get some tiles (possibly specifying an incorrect urlTemplate or tampering with the tiles URL as done in the demo).

Similar to Leaflet/Leaflet#5176 and Leaflet/Leaflet#5776, make sure it is solved by PR Leaflet/Leaflet#5783 (is it included in Leaflet v1.2.0?)