tileserver-gl 3.1.1 → 4.0.0

package/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10-buster AS builder
+FROM node:16-bullseye AS builder
 
 RUN export DEBIAN_FRONTEND=noninteractive \
   && apt-get -qq update \
@@ -11,7 +11,6 @@ RUN export DEBIAN_FRONTEND=noninteractive \
       libcairo2-dev \
       libgles2-mesa-dev \
       libgbm-dev \
-      libllvm7 \
       libprotobuf-dev \
   && apt-get -y --purge autoremove \
   && apt-get clean \
@@ -24,7 +23,7 @@ ENV NODE_ENV="production"
 RUN cd /usr/src/app && npm install --production
 
 
-FROM node:10-buster-slim AS final
+FROM node:16-bullseye-slim AS final
 
 RUN export DEBIAN_FRONTEND=noninteractive \
   && apt-get -qq update \
@@ -33,9 +32,20 @@ RUN export DEBIAN_FRONTEND=noninteractive \
       libegl1 \
       xvfb \
       xauth \
+      libopengl0 \
+      libcurl4 \
+      curl \
+      libuv1-dev \
+      libc6-dev \
+      libcap2-bin \
   && apt-get -y --purge autoremove \
   && apt-get clean \
   && rm -rf /var/lib/apt/lists/*
+  
+RUN curl http://archive.ubuntu.com/ubuntu/pool/main/libj/libjpeg-turbo/libjpeg-turbo8_2.0.3-0ubuntu1_amd64.deb --output libjpeg-turbo8_2.0.3-0ubuntu1_amd64.deb
+RUN apt install ./libjpeg-turbo8_2.0.3-0ubuntu1_amd64.deb
+RUN curl http://archive.ubuntu.com/ubuntu/pool/main/i/icu/libicu66_66.1-2ubuntu2_amd64.deb --output libicu66_66.1-2ubuntu2_amd64.deb
+RUN apt install ./libicu66_66.1-2ubuntu2_amd64.deb
 
 COPY --from=builder /usr/src/app /app
 
@@ -51,5 +61,3 @@ EXPOSE 80
 USER node:node
 
 ENTRYPOINT ["/app/docker-entrypoint.sh"]
-
-CMD ["-p", "80"]

package/Dockerfile_light

@@ -1,4 +1,4 @@
-FROM node:10-stretch
+FROM node:16-bullseye
 
 ENV NODE_ENV="production"
 ENV CHOKIDAR_USEPOLLING=1
@@ -6,8 +6,9 @@ ENV CHOKIDAR_INTERVAL=500
 EXPOSE 80
 VOLUME /data
 WORKDIR /data
-ENTRYPOINT ["node", "/usr/src/app/", "-p", "80"]
+ENTRYPOINT ["/usr/src/app/docker-entrypoint.sh"]
 
 RUN mkdir -p /usr/src/app
 COPY / /usr/src/app
 RUN cd /usr/src/app && npm install --production
+RUN ["chmod", "+x", "/usr/src/app/docker-entrypoint.sh"]

package/Dockerfile_test

@@ -2,7 +2,7 @@
 # Simply run "docker build -f Dockerfile_test ."
 # WARNING: sometimes it fails with a core dumped exception
 
-FROM node:10-stretch
+FROM node:16-bullseye
 
 RUN apt-get -qq update \
 && DEBIAN_FRONTEND=noninteractive apt-get -y install \
@@ -17,6 +17,7 @@ RUN apt-get -qq update \
     libllvm3.9 \
     libprotobuf-dev \
     libxxf86vm-dev \
+    libopengl0 \
     xvfb \
 && apt-get clean
 

package/README.md

@@ -5,44 +5,85 @@
 [![Build Status](https://travis-ci.org/maptiler/tileserver-gl.svg?branch=master)](https://travis-ci.org/maptiler/tileserver-gl)
 [![Docker Hub](https://img.shields.io/badge/docker-hub-blue.svg)](https://hub.docker.com/r/maptiler/tileserver-gl/)
 
-Vector and raster maps with GL styles. Server side rendering by Mapbox GL Native. Map tile server for Mapbox GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
+Vector and raster maps with GL styles. Server-side rendering by MapLibre GL Native. Map tile server for MapLibre GL JS, Android, iOS, Leaflet, OpenLayers, GIS via WMTS, etc.
 
-## Get Started
+Download vector tiles from [OpenMapTiles](https://data.maptiler.com/downloads/planet/).
+## Getting Started with Node
 
-Make sure you have Node.js version **10** installed (running `node -v` it should output something like `v10.17.0`).
+Make sure you have Node.js version **14.20.0** or above installed. Node 16 is recommended. (running `node -v` it should output something like `v16.x.x`). Running without docker requires [Native dependencies](https://tileserver.readthedocs.io/en/latest/installation.html#npm) to be installed first.
 
-Install `tileserver-gl` with server-side raster rendering of vector tiles with npm
+Install `tileserver-gl` with server-side raster rendering of vector tiles with npm. 
 
 ```bash
 npm install -g tileserver-gl
 ```
 
-Now download vector tiles from [OpenMapTiles](https://openmaptiles.org/downloads/).
+Once installed, you can use it like the following examples.
 
+using a mbtiles file
 ```bash
-curl -o zurich_switzerland.mbtiles https://[GET-YOUR-LINK]/extracts/zurich_switzerland.mbtiles
+wget https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/zurich_switzerland.mbtiles
+tileserver-gl --mbtiles zurich_switzerland.mbtiles
+[in your browser, visit http://[server ip]:8080]
 ```
 
-Start `tileserver-gl` with the downloaded vector tiles.
-
+using a config.json + style + mbtiles file
 ```bash
-tileserver-gl zurich_switzerland.mbtiles
+wget https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/test_data.zip
+unzip test_data.zip
+tileserver-gl
+[in your browser, visit http://[server ip]:8080]
 ```
 
-Alternatively, you can use the `tileserver-gl-light` package instead, which is pure javascript (does not have any native dependencies) and can run anywhere, but does not contain rasterization on the server side made with MapBox GL Native.
+Alternatively, you can use the `tileserver-gl-light` npm package instead, which is pure javascript, does not have any native dependencies, and can run anywhere, but does not contain rasterization on the server side made with Maplibre GL Native.
 
-## Using Docker
+## Getting Started with Docker
 
-An alternative to npm to start the packed software easier is to install [Docker](https://www.docker.com/) on your computer and then run in the directory with the downloaded MBTiles the command:
+An alternative to npm to start the packed software easier is to install [Docker](https://www.docker.com/) on your computer and then run from the tileserver-gl directory
 
+Example using a mbtiles file
 ```bash
+wget https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/zurich_switzerland.mbtiles
+docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl --mbtiles zurich_switzerland.mbtiles
+[in your browser, visit http://[server ip]:8080]
+```
+
+Example using a config.json + style + mbtiles file
+```bash
+wget https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/test_data.zip
+unzip test_data.zip
 docker run --rm -it -v $(pwd):/data -p 8080:80 maptiler/tileserver-gl
+[in your browser, visit http://[server ip]:8080]
 ```
 
-This will download and start a ready to use container on your computer and the maps are going to be available in webbrowser on localhost:8080.
+Example using a different path
+```bash
+docker run --rm -it -v /your/local/config/path:/data -p 8080:80 maptiler/tileserver-gl
+```
+replace '/your/local/config/path' with the path to your config file
+
 
-On laptop you can use [Docker Kitematic](https://kitematic.com/) and search "tileserver-gl" and run it, then drop in the 'data' folder the MBTiles.
+Alternatively, you can use the `maptiler/tileserver-gl-light` docker image instead, which is pure javascript, does not have any native dependencies, and can run anywhere, but does not contain rasterization on the server side made with Maplibre GL Native.
+
+## Getting Started with Linux cli
+
+Test from command line
+```bash
+wget https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/test_data.zip
+unzip -q test_data.zip -d test_data
+xvfb-run --server-args="-screen 0 1024x768x24" npm test
+```
+
+Run from command line
+```bash
+xvfb-run --server-args="-screen 0 1024x768x24" node .
+```
 
 ## Documentation
 
-You can read full documentation of this project at https://tileserver.readthedocs.io/.
+You can read the full documentation of this project at https://tileserver.readthedocs.io/.
+
+## Alternative
+
+Discover MapTiler Server if you need a [map server with easy setup and user-friendly interface](https://www.maptiler.com/server/).
+

package/docker-entrypoint.sh

@@ -10,12 +10,24 @@ handle() {
 
 trap handle INT TERM
 
+refresh() {
+	SIGNAL=$(( $? - 128 ))
+	echo "Caught signal ${SIGNAL}, refreshing"
+	kill -s ${SIGNAL} $(pidof node) 2>/dev/null
+}
+
+trap refresh HUP
+
 if ! which -- "${1}"; then
   # first arg is not an executable
-  xvfb-run -a --server-args="-screen 0 1024x768x24" -- node /app/ "$@" &
+  xvfb-run -a --server-args="-screen 0 1024x768x24" -- node /app/ -p 80 "$@" &
 	# Wait exits immediately on signals which have traps set. Store return value and wait
 	# again for all jobs to actually complete before continuing.
 	wait $! || RETVAL=$?
+	while [ ${RETVAL} = 129 ] ; do
+	  # Refressh signal HUP received. Continue waiting for signals.
+	  wait $! || RETVAL=$?
+	done
 	wait
 	exit ${RETVAL}
 fi

package/docker-entrypoint_light.sh

@@ -0,0 +1,35 @@
+#!/bin/sh
+
+set -e
+
+handle() {
+	SIGNAL=$(( $? - 128 ))
+	echo "Caught signal ${SIGNAL}, stopping gracefully"
+	kill -s ${SIGNAL} $(pidof node) 2>/dev/null
+}
+
+trap handle INT TERM
+
+refresh() {
+	SIGNAL=$(( $? - 128 ))
+	echo "Caught signal ${SIGNAL}, refreshing"
+	kill -s ${SIGNAL} $(pidof node) 2>/dev/null
+}
+
+trap refresh HUP
+
+if ! which -- "${1}"; then
+  # first arg is not an executable
+  node /usr/src/app/ -p 80 "$@" &
+	# Wait exits immediately on signals which have traps set. Store return value and wait
+	# again for all jobs to actually complete before continuing.
+	wait $! || RETVAL=$?
+	while [ ${RETVAL} = 129 ] ; do
+	  # Refressh signal HUP received. Continue waiting for signals.
+	  wait $! || RETVAL=$?
+	done
+	wait
+	exit ${RETVAL}
+fi
+
+exec "$@"

package/docs/conf.py

@@ -44,7 +44,7 @@ master_doc = 'index'
 
 # General information about the project.
 project = u'TileServer GL'
-copyright = u'2016, Klokan Technologies GmbH'
+copyright = u'2022, MapTiler.com'
 
 # The version info for the project you're documenting, acts as replacement for
 # |version| and |release|, also used in various other places throughout the
@@ -197,7 +197,7 @@ latex_elements = {
 #  author, documentclass [howto, manual, or own class]).
 latex_documents = [
   ('index', 'TileServerGL.tex', u'TileServer GL Documentation',
-   u'Klokan Technologies GmbH', 'manual'),
+   u'MapTiler.com', 'manual'),
 ]
 
 # The name of an image file (relative to this directory) to place at the top of
@@ -227,7 +227,7 @@ latex_documents = [
 # (source start file, name, description, authors, manual section).
 man_pages = [
     ('index', 'tileservergl', u'TileServer GL Documentation',
-     [u'Klokan Technologies GmbH'], 1)
+     [u'MapTiler.com'], 1)
 ]
 
 # If true, show URL addresses after external links.
@@ -241,7 +241,7 @@ man_pages = [
 #  dir menu entry, description, category)
 texinfo_documents = [
   ('index', 'TileServerGL', u'TileServer GL Documentation',
-   u'Klokan Technologies GmbH', 'TileServerGL', 'One line description of project.',
+   u'MapTiler.com', 'TileServerGL', 'One line description of project.',
    'Miscellaneous'),
 ]
 

package/docs/installation.rst

@@ -26,11 +26,30 @@ Native dependencies
 There are some native dependencies that you need to make sure are installed if you plan to run the TileServer GL natively without docker.
 The precise package names you need to install may differ on various platforms.
 
-These are required on Debian 9:
-  * ``build-essential``
+These are required on Debian 11:
+  * ``libgles2-mesa``
+  * ``libegl1``
+  * ``xvfb``
+  * ``xauth``
+  * ``libopengl0``
+  * ``libcurl4``
+  * ``curl``
+  * ``libuv1-dev``
+  * ``libc6-dev``
+  * ``http://archive.ubuntu.com/ubuntu/pool/main/libj/libjpeg-turbo/libjpeg-turbo8_2.0.3-0ubuntu1_amd64.deb``
+  * ``http://archive.ubuntu.com/ubuntu/pool/main/i/icu/libicu66_66.1-2ubuntu2_amd64.deb``
+
+These are required on Ubuntu 20.04:
   * ``libcairo2-dev``
-  * ``libprotobuf-dev``
-
+  * ``libjpeg8-dev``
+  * ``libpango1.0-dev``
+  * ``libgif-dev``
+  * ``build-essential``
+  * ``g++``
+  * ``xvfb``
+  * ``libgles2-mesa-dev``
+  * ``libgbm-dev``
+  * ``libxxf86vm-dev``
 
 ``tileserver-gl-light`` on npm
 ==============================

package/docs/usage.rst

@@ -29,8 +29,10 @@ Default preview style and configuration
 - If no configuration file is specified, a default preview style (compatible with openmaptiles) is used.
 - If no mbtiles file is specified (and is not found in the current working directory), a sample file is downloaded (showing the Zurich area)
 
-Reloading configuration
+Reloading the configuration
 ======
 
 It is possible to reload the configuration file without restarting the whole process by sending a SIGHUP signal to the node process.
-However, this does not currently work when running the tileserver-gl docker container (the signal is not passed to the subprocess, see https://github.com/maptiler/tileserver-gl/issues/420#issuecomment-597507663).
+
+- The `docker kill -s HUP tileserver-gl` command can be used when running the tileserver-gl docker container.
+- The `docker-compose kill -s HUP tileserver-gl-service-name` can be used when tileserver-gl is run as a docker-compose service.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tileserver-gl",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "description": "Map tile server for JSON GL styles - vector and server side generated raster tiles",
   "main": "src/main.js",
   "bin": "src/main.js",
@@ -10,7 +10,7 @@
   },
   "license": "BSD-2-Clause",
   "engines": {
-    "node": ">=10 <11"
+    "node": ">=14.15.0 <17"
   },
   "scripts": {
     "test": "mocha test/**.js --timeout 10000",
@@ -18,32 +18,32 @@
   },
   "dependencies": {
     "@mapbox/glyph-pbf-composite": "0.0.3",
-    "@mapbox/mapbox-gl-native": "5.0.2",
-    "@mapbox/mapbox-gl-style-spec": "13.12.0",
-    "@mapbox/mbtiles": "0.11.0",
-    "@mapbox/sphericalmercator": "1.1.0",
+    "@maplibre/maplibre-gl-native": "5.0.1-pre.0",
+    "@maplibre/maplibre-gl-style-spec": "17.0.1",
+    "@mapbox/mbtiles": "0.12.1",
+    "@mapbox/sphericalmercator": "1.2.0",
     "@mapbox/vector-tile": "1.3.1",
     "advanced-pool": "0.3.3",
-    "canvas": "2.6.1",
-    "chokidar": "3.3.1",
+    "canvas": "2.10.1",
+    "chokidar": "3.5.3",
     "clone": "2.1.2",
-    "color": "3.1.2",
-    "commander": "4.1.1",
+    "color": "4.2.3",
+    "commander": "9.4.0",
     "cors": "2.8.5",
     "esm": "3.2.25",
-    "express": "4.17.1",
-    "handlebars": "4.7.3",
+    "express": "4.18.1",
+    "handlebars": "4.7.7",
     "http-shutdown": "1.2.2",
-    "morgan": "1.9.1",
+    "morgan": "1.10.0",
     "pbf": "3.2.1",
-    "proj4": "2.6.0",
+    "proj4": "2.8.0",
     "request": "2.88.2",
-    "sharp": "0.26.2",
+    "sharp": "0.31.0",
     "tileserver-gl-styles": "2.0.0"
   },
   "devDependencies": {
-    "mocha": "^7.1.0",
+    "mocha": "^10.0.0",
     "should": "^13.2.3",
-    "supertest": "^4.0.2"
+    "supertest": "^6.2.4"
   }
 }

package/public/resources/L.TileLayer.NoGap.js

@@ -0,0 +1,243 @@
+// @class TileLayer
+
+L.TileLayer.mergeOptions({
+	// @option keepBuffer
+	// The amount of tiles outside the visible map area to be kept in the stitched
+	// `TileLayer`.
+
+	// @option dumpToCanvas: Boolean = true
+	// Whether to dump loaded tiles to a `<canvas>` to prevent some rendering
+	// artifacts. (Disabled by default in IE)
+	dumpToCanvas: L.Browser.canvas && !L.Browser.ie,
+});
+
+L.TileLayer.include({
+	_onUpdateLevel: function(z, zoom) {
+		if (this.options.dumpToCanvas) {
+			this._levels[z].canvas.style.zIndex =
+				this.options.maxZoom - Math.abs(zoom - z);
+		}
+	},
+
+	_onRemoveLevel: function(z) {
+		if (this.options.dumpToCanvas) {
+			L.DomUtil.remove(this._levels[z].canvas);
+		}
+	},
+
+	_onCreateLevel: function(level) {
+		if (this.options.dumpToCanvas) {
+			level.canvas = L.DomUtil.create(
+				"canvas",
+				"leaflet-tile-container leaflet-zoom-animated",
+				this._container
+			);
+			level.ctx = level.canvas.getContext("2d");
+			this._resetCanvasSize(level);
+		}
+	},
+
+	_removeTile: function(key) {
+		if (this.options.dumpToCanvas) {
+			var tile = this._tiles[key];
+			var level = this._levels[tile.coords.z];
+			var tileSize = this.getTileSize();
+
+			if (level) {
+				// Where in the canvas should this tile go?
+				var offset = L.point(tile.coords.x, tile.coords.y)
+					.subtract(level.canvasRange.min)
+					.scaleBy(this.getTileSize());
+
+				level.ctx.clearRect(offset.x, offset.y, tileSize.x, tileSize.y);
+			}
+		}
+
+		L.GridLayer.prototype._removeTile.call(this, key);
+	},
+
+	_resetCanvasSize: function(level) {
+		var buff = this.options.keepBuffer,
+			pixelBounds = this._getTiledPixelBounds(this._map.getCenter()),
+			tileRange = this._pxBoundsToTileRange(pixelBounds),
+			tileSize = this.getTileSize();
+
+		tileRange.min = tileRange.min.subtract([buff, buff]); // This adds the no-prune buffer
+		tileRange.max = tileRange.max.add([buff + 1, buff + 1]);
+
+		var pixelRange = L.bounds(
+				tileRange.min.scaleBy(tileSize),
+				tileRange.max.add([1, 1]).scaleBy(tileSize) // This prevents an off-by-one when checking if tiles are inside
+			),
+			mustRepositionCanvas = false,
+			neededSize = pixelRange.max.subtract(pixelRange.min);
+
+		// Resize the canvas, if needed, and only to make it bigger.
+		if (
+			neededSize.x > level.canvas.width ||
+			neededSize.y > level.canvas.height
+		) {
+			// Resizing canvases erases the currently drawn content, I'm afraid.
+			// To keep it, dump the pixels to another canvas, then display it on
+			// top. This could be done with getImageData/putImageData, but that
+			// would break for tainted canvases (in non-CORS tilesets)
+			var oldSize = { x: level.canvas.width, y: level.canvas.height };
+			// console.info('Resizing canvas from ', oldSize, 'to ', neededSize);
+
+			var tmpCanvas = L.DomUtil.create("canvas");
+			tmpCanvas.style.width = (tmpCanvas.width = oldSize.x) + "px";
+			tmpCanvas.style.height = (tmpCanvas.height = oldSize.y) + "px";
+			tmpCanvas.getContext("2d").drawImage(level.canvas, 0, 0);
+			// var data = level.ctx.getImageData(0, 0, oldSize.x, oldSize.y);
+
+			level.canvas.style.width = (level.canvas.width = neededSize.x) + "px";
+			level.canvas.style.height = (level.canvas.height = neededSize.y) + "px";
+			level.ctx.drawImage(tmpCanvas, 0, 0);
+			// level.ctx.putImageData(data, 0, 0, 0, 0, oldSize.x, oldSize.y);
+		}
+
+		// Translate the canvas contents if it's moved around
+		if (level.canvasRange) {
+			var offset = level.canvasRange.min
+				.subtract(tileRange.min)
+				.scaleBy(this.getTileSize());
+
+			// 			console.info('Offsetting by ', offset);
+
+			if (!L.Browser.safari) {
+				// By default, canvases copy things "on top of" existing pixels, but we want
+				// this to *replace* the existing pixels when doing a drawImage() call.
+				// This will also clear the sides, so no clearRect() calls are needed to make room
+				// for the new tiles.
+				level.ctx.globalCompositeOperation = "copy";
+				level.ctx.drawImage(level.canvas, offset.x, offset.y);
+				level.ctx.globalCompositeOperation = "source-over";
+			} else {
+				// Safari clears the canvas when copying from itself :-(
+				if (!this._tmpCanvas) {
+					var t = (this._tmpCanvas = L.DomUtil.create("canvas"));
+					t.width = level.canvas.width;
+					t.height = level.canvas.height;
+					this._tmpContext = t.getContext("2d");
+				}
+				this._tmpContext.clearRect(
+					0,
+					0,
+					level.canvas.width,
+					level.canvas.height
+				);
+				this._tmpContext.drawImage(level.canvas, 0, 0);
+				level.ctx.clearRect(0, 0, level.canvas.width, level.canvas.height);
+				level.ctx.drawImage(this._tmpCanvas, offset.x, offset.y);
+			}
+
+			mustRepositionCanvas = true; // Wait until new props are set
+		}
+
+		level.canvasRange = tileRange;
+		level.canvasPxRange = pixelRange;
+		level.canvasOrigin = pixelRange.min;
+
+		// console.log('Canvas tile range: ', level, tileRange.min, tileRange.max );
+		// console.log('Canvas pixel range: ', pixelRange.min, pixelRange.max );
+		// console.log('Level origin: ', level.origin );
+
+		if (mustRepositionCanvas) {
+			this._setCanvasZoomTransform(
+				level,
+				this._map.getCenter(),
+				this._map.getZoom()
+			);
+		}
+	},
+
+	/// set transform/position of canvas, in addition to the transform/position of the individual tile container
+	_setZoomTransform: function(level, center, zoom) {
+		L.GridLayer.prototype._setZoomTransform.call(this, level, center, zoom);
+		if (this.options.dumpToCanvas) {
+			this._setCanvasZoomTransform(level, center, zoom);
+		}
+	},
+
+	// This will get called twice:
+	// * From _setZoomTransform
+	// * When the canvas has shifted due to a new tile being loaded
+	_setCanvasZoomTransform: function(level, center, zoom) {
+		// console.log('_setCanvasZoomTransform', level, center, zoom);
+		if (!level.canvasOrigin) {
+			return;
+		}
+		var scale = this._map.getZoomScale(zoom, level.zoom),
+			translate = level.canvasOrigin
+				.multiplyBy(scale)
+				.subtract(this._map._getNewPixelOrigin(center, zoom))
+				.round();
+
+		if (L.Browser.any3d) {
+			L.DomUtil.setTransform(level.canvas, translate, scale);
+		} else {
+			L.DomUtil.setPosition(level.canvas, translate);
+		}
+	},
+
+	_onOpaqueTile: function(tile) {
+		if (!this.options.dumpToCanvas) {
+			return;
+		}
+
+		// Guard against an NS_ERROR_NOT_AVAILABLE (or similar) exception
+		// when a non-image-tile has been loaded (e.g. a WMS error).
+		// Checking for tile.el.complete is not enough, as it has been
+		// already marked as loaded and ready somehow.
+		try {
+			this.dumpPixels(tile.coords, tile.el);
+		} catch (ex) {
+			return this.fire("tileerror", {
+				error: "Could not copy tile pixels: " + ex,
+				tile: tile,
+				coods: tile.coords,
+			});
+		}
+
+		// If dumping the pixels was successful, then hide the tile.
+		// Do not remove the tile itself, as it is needed to check if the whole
+		// level (and its canvas) should be removed (via level.el.children.length)
+		tile.el.style.display = "none";
+	},
+
+	// @section Extension methods
+	// @uninheritable
+
+	// @method dumpPixels(coords: Object, imageSource: CanvasImageSource): this
+	// Dumps pixels from the given `CanvasImageSource` into the layer, into
+	// the space for the tile represented by the `coords` tile coordinates (an object
+	// like `{x: Number, y: Number, z: Number}`; the image source must have the
+	// same size as the `tileSize` option for the layer. Has no effect if `dumpToCanvas`
+	// is `false`.
+	dumpPixels: function(coords, imageSource) {
+		var level = this._levels[coords.z],
+			tileSize = this.getTileSize();
+
+		if (!level.canvasRange || !this.options.dumpToCanvas) {
+			return;
+		}
+
+		// Check if the tile is inside the currently visible map bounds
+		// There is a possible race condition when tiles are loaded after they
+		// have been panned outside of the map.
+		if (!level.canvasRange.contains(coords)) {
+			this._resetCanvasSize(level);
+		}
+
+		// Where in the canvas should this tile go?
+		var offset = L.point(coords.x, coords.y)
+			.subtract(level.canvasRange.min)
+			.scaleBy(this.getTileSize());
+
+		level.ctx.drawImage(imageSource, offset.x, offset.y, tileSize.x, tileSize.y);
+
+		// TODO: Clear the pixels of other levels' canvases where they overlap
+		// this newly dumped tile.
+		return this;
+	},
+});