ltf

leaflet.tilelayer.fallback

Replaces missing Tiles by scaled lower zoom Tiles

Showing:

Popularity

Downloads/wk

54

GitHub Stars

27

Maintenance

Last Commit

4yrs ago

Contributors

4

Package

Dependencies

0

License

Apache-2.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

GitHub releases npm

Size: 2 kB minified, < 1 kB gzipped.

Requirements

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/leaflet.tilelayer.fallback@1.0.4/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

FactoryDescription
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

OptionTypeDefaultDescription
minNativeZoomNumber0Minimum 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

EventDataDescription
tilefallbackTileFallbackEventFired when a tile is being replaced by a scaled up tile of lower zoom.

All other TileLayer events are applicable.

TileFallbackEvent

PropertyTypeDescription
tileHTMLElementThe tile element (image).
urlStringThe original source URL of the tile (before any fallback is applied).
urlMissingStringThe missing source URL of the tile (possibly after a few fallback attempts).
urlFallbackStringThe 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

license

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial