L.TileLayer.Canvas

Render Leaflet's tiles as <canvas> elements.

Why?

If your project has a lot of layers, sometimes performance issues related to GPU may occurred. In our case the easiest way to avoid them is displaying map's tiles not as <img> elements, but draw their on the <canvas>. Just look:

How to use it?

You can install it via package manager:

npm install tilelayer-canvas

or

yarn add tilelayer-canvas

or just copy index.min.js from this repository and include it by <script> tag:

<script src="./path/to/index.min.js"></script>

Then in your project use L.tileLayer.canvas instead of L.tileLayer. That's it! See an example.

Options

Name	Required	Default value	Description
timeout	No	undefined	Zoom debounce time.
doubleSize	No	undefined	Set to true if tiles are 2x.

Changelog

1.1.5 - 19/03/2024

• Run _tileOnError if tile load fails. (@HandyMenny in #14)

1.1.4 - 06/03/2024

• Fixed aborting of loading tiles. (@kradziko in #14)

1.1.3 - 23/09/2020

• Fixed sending tile requests with NaN zoom value for layers with delay defined.

1.1.2 - 29/07/2020

• Cancelation of unfinished delays after zoom change.
• Added Babel to transform code to support older browsers.

1.1.1 - 27/07/2020

• Added clearTimeout for delays.

1.1.0 - 24/07/2020

• Added canvas charging delay support.
• Added options:

timeout: Number - delay time (ms)

1.0.2 - 09/06/2020

• Added complete attribute to <canvas> element (fixed blinked zoom issue).

1.0.1 - 06/05/2020

• Fixed npm package name.

License

MIT