tileserver-gl-light 4.1.2 → 4.2.1

package/src/serve_rendered.js

@@ -7,19 +7,19 @@ import url from 'url';
 import util from 'util';
 import zlib from 'zlib';
 import sharp from 'sharp'; // sharp has to be required before node-canvas. see https://github.com/lovell/sharp/issues/371
-import {createCanvas, Image} from 'canvas';
+import { createCanvas, Image } from 'canvas';
 import clone from 'clone';
 import Color from 'color';
 import express from 'express';
-import sanitize from "sanitize-filename";
+import sanitize from 'sanitize-filename';
 import SphericalMercator from '@mapbox/sphericalmercator';
 import mlgl from '@maplibre/maplibre-gl-native';
 import MBTiles from '@mapbox/mbtiles';
 import proj4 from 'proj4';
 import request from 'request';
-import {getFontsPbf, getTileUrls, fixTileJSONCenter} from './utils.js';
+import { getFontsPbf, getTileUrls, fixTileJSONCenter } from './utils.js';
 
-const FLOAT_PATTERN = '[+-]?(?:\\d+|\\d+\.?\\d+)';
+const FLOAT_PATTERN = '[+-]?(?:\\d+|\\d+.?\\d+)';
 const httpTester = /^(http(s)?:)?\/\//;
 
 const mercator = new SphericalMercator();
@@ -38,7 +38,7 @@ const extensionToFormat = {
   '.jpg': 'jpeg',
   '.jpeg': 'jpeg',
   '.png': 'png',
-  '.webp': 'webp'
+  '.webp': 'webp',
 };
 
 /**
@@ -46,18 +46,19 @@ const extensionToFormat = {
  * string is for unknown or unsupported formats.
  */
 const cachedEmptyResponses = {
-  '': Buffer.alloc(0)
+  '': Buffer.alloc(0),
 };
 
 /**
  * Create an appropriate mlgl response for http errors.
+ *
  * @param {string} format The format (a sharp format or 'pbf').
  * @param {string} color The background color (or empty string for transparent).
  * @param {Function} callback The mlgl callback.
  */
 function createEmptyResponse(format, color, callback) {
   if (!format || format === 'pbf') {
-    callback(null, {data: cachedEmptyResponses['']});
+    callback(null, { data: cachedEmptyResponses[''] });
     return;
   }
 
@@ -71,7 +72,7 @@ function createEmptyResponse(format, color, callback) {
   const cacheKey = `${format},${color}`;
   const data = cachedEmptyResponses[cacheKey];
   if (data) {
-    callback(null, {data: data});
+    callback(null, { data: data });
     return;
   }
 
@@ -83,21 +84,25 @@ function createEmptyResponse(format, color, callback) {
     raw: {
       width: 1,
       height: 1,
-      channels: channels
-    }
-  }).toFormat(format).toBuffer((err, buffer, info) => {
-    if (!err) {
-      cachedEmptyResponses[cacheKey] = buffer;
-    }
-    callback(null, {data: buffer});
-  });
+      channels: channels,
+    },
+  })
+    .toFormat(format)
+    .toBuffer((err, buffer, info) => {
+      if (!err) {
+        cachedEmptyResponses[cacheKey] = buffer;
+      }
+      callback(null, { data: buffer });
+    });
 }
 
 /**
  * Parses coordinate pair provided to pair of floats and ensures the resulting
  * pair is a longitude/latitude combination depending on lnglat query parameter.
+ *
  * @param {List} coordinatePair Coordinate pair.
- * @param {Object} query Request query parameters.
+ * @param coordinates
+ * @param {object} query Request query parameters.
  */
 const parseCoordinatePair = (coordinates, query) => {
   const firstCoordinate = parseFloat(coordinates[0]);
@@ -119,8 +124,9 @@ const parseCoordinatePair = (coordinates, query) => {
 
 /**
  * Parses a coordinate pair from query arguments and optionally transforms it.
+ *
  * @param {List} coordinatePair Coordinate pair.
- * @param {Object} query Request query parameters.
+ * @param {object} query Request query parameters.
  * @param {Function} transformer Optional transform function.
  */
 const parseCoordinates = (coordinatePair, query, transformer) => {
@@ -134,10 +140,10 @@ const parseCoordinates = (coordinatePair, query, transformer) => {
   return parsedCoordinates;
 };
 
-
 /**
  * Parses paths provided via query into a list of path objects.
- * @param {Object} query Request query parameters.
+ *
+ * @param {object} query Request query parameters.
  * @param {Function} transformer Optional transform function.
  */
 const extractPathsFromQuery = (query, transformer) => {
@@ -180,9 +186,8 @@ const extractPathsFromQuery = (query, transformer) => {
 
     // Extend list of paths with current path if it contains coordinates
     if (currentPath.length) {
-      paths.push(currentPath)
+      paths.push(currentPath);
     }
-
   }
   return paths;
 };
@@ -192,8 +197,9 @@ const extractPathsFromQuery = (query, transformer) => {
  * on marker object.
  * Options adhere to the following format
  * [optionName]:[optionValue]
+ *
  * @param {List[String]} optionsList List of option strings.
- * @param {Object} marker Marker object to configure.
+ * @param {object} marker Marker object to configure.
  */
 const parseMarkerOptions = (optionsList, marker) => {
   for (const options of optionsList) {
@@ -207,7 +213,7 @@ const parseMarkerOptions = (optionsList, marker) => {
       // Scale factor to up- or downscale icon
       case 'scale':
         // Scale factors must not be negative
-        marker.scale = Math.abs(parseFloat(optionParts[1]))
+        marker.scale = Math.abs(parseFloat(optionParts[1]));
         break;
       // Icon offset as positive or negative pixel value in the following
       // format [offsetX],[offsetY] where [offsetY] is optional
@@ -226,8 +232,9 @@ const parseMarkerOptions = (optionsList, marker) => {
 
 /**
  * Parses markers provided via query into a list of marker objects.
- * @param {Object} query Request query parameters.
- * @param {Object} options Configuration options.
+ *
+ * @param {object} query Request query parameters.
+ * @param {object} options Configuration options.
  * @param {Function} transformer Optional transform function.
  */
 const extractMarkersFromQuery = (query, options, transformer) => {
@@ -240,8 +247,9 @@ const extractMarkersFromQuery = (query, options, transformer) => {
 
   // Check if multiple markers have been provided and mimic a list if it's a
   // single maker.
-  const providedMarkers = Array.isArray(query.marker) ?
-    query.marker : [query.marker];
+  const providedMarkers = Array.isArray(query.marker)
+    ? query.marker
+    : [query.marker];
 
   // Iterate through provided markers which can have one of the following
   // formats
@@ -266,7 +274,7 @@ const extractMarkersFromQuery = (query, options, transformer) => {
     if (!(iconURI.startsWith('http://') || iconURI.startsWith('https://'))) {
       // Sanitize URI with sanitize-filename
       // https://www.npmjs.com/package/sanitize-filename#details
-      iconURI = sanitize(iconURI)
+      iconURI = sanitize(iconURI);
 
       // If the selected icon is not part of available icons skip it
       if (!options.paths.availableIcons.includes(iconURI)) {
@@ -275,7 +283,7 @@ const extractMarkersFromQuery = (query, options, transformer) => {
 
       iconURI = path.resolve(options.paths.icons, iconURI);
 
-    // When we encounter a remote icon check if the configuration explicitly allows them.
+      // When we encounter a remote icon check if the configuration explicitly allows them.
     } else if (options.allowRemoteMarkerIcons !== true) {
       continue;
     }
@@ -298,15 +306,15 @@ const extractMarkersFromQuery = (query, options, transformer) => {
 
     // Add marker to list
     markers.push(marker);
-
   }
   return markers;
 };
 
 /**
  * Transforms coordinates to pixels.
+ *
  * @param {List[Number]} ll Longitude/Latitude coordinate pair.
- * @param {Number} zoom Map zoom level.
+ * @param {number} zoom Map zoom level.
  */
 const precisePx = (ll, zoom) => {
   const px = mercator.px(ll, 20);
@@ -316,12 +324,13 @@ const precisePx = (ll, zoom) => {
 
 /**
  * Draws a marker in cavans context.
- * @param {Object} ctx Canvas context object.
- * @param {Object} marker Marker object parsed by extractMarkersFromQuery.
- * @param {Number} z Map zoom level.
+ *
+ * @param {object} ctx Canvas context object.
+ * @param {object} marker Marker object parsed by extractMarkersFromQuery.
+ * @param {number} z Map zoom level.
  */
 const drawMarker = (ctx, marker, z) => {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     const img = new Image();
     const pixelCoords = precisePx(marker.location, z);
 
@@ -340,15 +349,15 @@ const drawMarker = (ctx, marker, z) => {
       // scaled as well. Additionally offsets are provided as either positive or
       // negative values so we always add them
       if (marker.offsetX) {
-        xCoordinate = xCoordinate + (marker.offsetX * scale);
+        xCoordinate = xCoordinate + marker.offsetX * scale;
       }
       if (marker.offsetY) {
-        yCoordinate = yCoordinate + (marker.offsetY * scale);
+        yCoordinate = yCoordinate + marker.offsetY * scale;
       }
 
       return {
-        'x': xCoordinate,
-        'y': yCoordinate
+        x: xCoordinate,
+        y: yCoordinate,
       };
     };
 
@@ -375,19 +384,22 @@ const drawMarker = (ctx, marker, z) => {
     };
 
     img.onload = drawOnCanvas;
-    img.onerror = err => { throw err };
+    img.onerror = (err) => {
+      throw err;
+    };
     img.src = marker.icon;
   });
-}
+};
 
 /**
  * Draws a list of markers onto a canvas.
  * Wraps drawing of markers into list of promises and awaits them.
  * It's required because images are expected to load asynchronous in canvas js
  * even when provided from a local disk.
- * @param {Object} ctx Canvas context object.
+ *
+ * @param {object} ctx Canvas context object.
  * @param {List[Object]} markers Marker objects parsed by extractMarkersFromQuery.
- * @param {Number} z Map zoom level.
+ * @param {number} z Map zoom level.
  */
 const drawMarkers = async (ctx, markers, z) => {
   const markerPromises = [];
@@ -399,14 +411,15 @@ const drawMarkers = async (ctx, markers, z) => {
 
   // Await marker drawings before continuing
   await Promise.all(markerPromises);
-}
+};
 
 /**
  * Draws a list of coordinates onto a canvas and styles the resulting path.
- * @param {Object} ctx Canvas context object.
+ *
+ * @param {object} ctx Canvas context object.
  * @param {List[Number]} path List of coordinates.
- * @param {Object} query Request query parameters.
- * @param {Number} z Map zoom level.
+ * @param {object} query Request query parameters.
+ * @param {number} z Map zoom level.
  */
 const drawPath = (ctx, path, query, z) => {
   if (!path || path.length < 2) {
@@ -422,8 +435,10 @@ const drawPath = (ctx, path, query, z) => {
   }
 
   // Check if first coordinate matches last coordinate
-  if (path[0][0] === path[path.length - 1][0] &&
-    path[0][1] === path[path.length - 1][1]) {
+  if (
+    path[0][0] === path[path.length - 1][0] &&
+    path[0][1] === path[path.length - 1][1]
+  ) {
     ctx.closePath();
   }
 
@@ -434,14 +449,15 @@ const drawPath = (ctx, path, query, z) => {
   }
 
   // Get line width from query and fall back to 1 if not provided
-  const lineWidth = query.width !== undefined ?
-    parseFloat(query.width) : 1;
+  const lineWidth = query.width !== undefined ? parseFloat(query.width) : 1;
 
   // Ensure line width is valid
   if (lineWidth > 0) {
     // Get border width from query and fall back to 10% of line width
-    const borderWidth = query.borderwidth !== undefined ?
-      parseFloat(query.borderwidth) : lineWidth * 0.1;
+    const borderWidth =
+      query.borderwidth !== undefined
+        ? parseFloat(query.borderwidth)
+        : lineWidth * 0.1;
 
     // Set rendering style for the start and end points of the path
     // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
@@ -456,7 +472,7 @@ const drawPath = (ctx, path, query, z) => {
     if (query.border !== undefined && borderWidth > 0) {
       // We need to double the desired border width and add it to the line width
       // in order to get the desired border on each side of the line.
-      ctx.lineWidth = lineWidth + (borderWidth * 2);
+      ctx.lineWidth = lineWidth + borderWidth * 2;
       // Set border style as rgba
       ctx.strokeStyle = query.border;
       ctx.stroke();
@@ -466,9 +482,21 @@ const drawPath = (ctx, path, query, z) => {
     ctx.strokeStyle = query.stroke || 'rgba(0,64,255,0.7)';
     ctx.stroke();
   }
-}
+};
 
-const renderOverlay = async (z, x, y, bearing, pitch, w, h, scale, paths, markers, query) => {
+const renderOverlay = async (
+  z,
+  x,
+  y,
+  bearing,
+  pitch,
+  w,
+  h,
+  scale,
+  paths,
+  markers,
+  query,
+) => {
   if ((!paths || paths.length === 0) && (!markers || markers.length === 0)) {
     return null;
   }
@@ -479,7 +507,7 @@ const renderOverlay = async (z, x, y, bearing, pitch, w, h, scale, paths, marker
   const maxEdge = center[1] + h / 2;
   const minEdge = center[1] - h / 2;
   if (maxEdge > mapHeight) {
-    center[1] -= (maxEdge - mapHeight);
+    center[1] -= maxEdge - mapHeight;
   } else if (minEdge < 0) {
     center[1] -= minEdge;
   }
@@ -489,7 +517,7 @@ const renderOverlay = async (z, x, y, bearing, pitch, w, h, scale, paths, marker
   ctx.scale(scale, scale);
   if (bearing) {
     ctx.translate(w / 2, h / 2);
-    ctx.rotate(-bearing / 180 * Math.PI);
+    ctx.rotate((-bearing / 180) * Math.PI);
     ctx.translate(-center[0], -center[1]);
   } else {
     // optimized path
@@ -510,18 +538,18 @@ const renderOverlay = async (z, x, y, bearing, pitch, w, h, scale, paths, marker
 const calcZForBBox = (bbox, w, h, query) => {
   let z = 25;
 
-  const padding = query.padding !== undefined ?
-    parseFloat(query.padding) : 0.1;
+  const padding = query.padding !== undefined ? parseFloat(query.padding) : 0.1;
 
   const minCorner = mercator.px([bbox[0], bbox[3]], z);
   const maxCorner = mercator.px([bbox[2], bbox[1]], z);
   const w_ = w / (1 + 2 * padding);
   const h_ = h / (1 + 2 * padding);
 
-  z -= Math.max(
+  z -=
+    Math.max(
       Math.log((maxCorner[0] - minCorner[0]) / w_),
-      Math.log((maxCorner[1] - minCorner[1]) / h_)
-  ) / Math.LN2;
+      Math.log((maxCorner[1] - minCorner[1]) / h_),
+    ) / Math.LN2;
 
   z = Math.max(Math.log(Math.max(w, h) / 256) / Math.LN2, Math.min(25, z));
 
@@ -563,14 +591,36 @@ export const serve_rendered = {
 
     const app = express().disable('x-powered-by');
 
-    const respondImage = (item, z, lon, lat, bearing, pitch, width, height, scale, format, res, next, opt_overlay, opt_mode='tile') => {
-      if (Math.abs(lon) > 180 || Math.abs(lat) > 85.06 ||
-        lon !== lon || lat !== lat) {
+    const respondImage = (
+      item,
+      z,
+      lon,
+      lat,
+      bearing,
+      pitch,
+      width,
+      height,
+      scale,
+      format,
+      res,
+      next,
+      opt_overlay,
+      opt_mode = 'tile',
+    ) => {
+      if (
+        Math.abs(lon) > 180 ||
+        Math.abs(lat) > 85.06 ||
+        lon !== lon ||
+        lat !== lat
+      ) {
         return res.status(400).send('Invalid center');
       }
-      if (Math.min(width, height) <= 0 ||
+      if (
+        Math.min(width, height) <= 0 ||
         Math.max(width, height) * scale > (options.maxSize || 2048) ||
-        width !== width || height !== height) {
+        width !== width ||
+        height !== height
+      ) {
         return res.status(400).send('Invalid size');
       }
       if (format === 'png' || format === 'webp') {
@@ -594,7 +644,7 @@ export const serve_rendered = {
           bearing: bearing,
           pitch: pitch,
           width: width,
-          height: height
+          height: height,
         };
         if (z === 0) {
           params.width *= 2;
@@ -611,7 +661,10 @@ export const serve_rendered = {
           pool.release(renderer);
           if (err) {
             console.error(err);
-            return res.status(500).send(err);
+            return res
+              .status(500)
+              .header('Content-Type', 'text/plain')
+              .send(err);
           }
 
           // Fix semi-transparent outlines on raw, premultiplied input
@@ -634,18 +687,21 @@ export const serve_rendered = {
             raw: {
               width: params.width * scale,
               height: params.height * scale,
-              channels: 4
-            }
+              channels: 4,
+            },
           });
 
           if (z > 2 && tileMargin > 0) {
             const [_, y] = mercator.px(params.center, z);
-            let yoffset = Math.max(Math.min(0, y - 128 - tileMargin), y + 128 + tileMargin - Math.pow(2, z + 8));
+            let yoffset = Math.max(
+              Math.min(0, y - 128 - tileMargin),
+              y + 128 + tileMargin - Math.pow(2, z + 8),
+            );
             image.extract({
               left: tileMargin * scale,
               top: (tileMargin + yoffset) * scale,
               width: width * scale,
-              height: height * scale
+              height: height * scale,
             });
           }
 
@@ -655,7 +711,7 @@ export const serve_rendered = {
           }
 
           if (opt_overlay) {
-            image.composite([{input: opt_overlay}]);
+            image.composite([{ input: opt_overlay }]);
           }
           if (item.watermark) {
             const canvas = createCanvas(scale * width, scale * height);
@@ -668,17 +724,17 @@ export const serve_rendered = {
             ctx.fillStyle = 'rgba(0,0,0,.4)';
             ctx.fillText(item.watermark, 5, height - 5);
 
-            image.composite([{input: canvas.toBuffer()}]);
+            image.composite([{ input: canvas.toBuffer() }]);
           }
 
           const formatQuality = (options.formatQuality || {})[format];
 
           if (format === 'png') {
-            image.png({adaptiveFiltering: false});
+            image.png({ adaptiveFiltering: false });
           } else if (format === 'jpeg') {
-            image.jpeg({quality: formatQuality || 80});
+            image.jpeg({ quality: formatQuality || 80 });
           } else if (format === 'webp') {
-            image.webp({quality: formatQuality || 90});
+            image.webp({ quality: formatQuality || 90 });
           }
           image.toBuffer((err, buffer, info) => {
             if (!buffer) {
@@ -687,7 +743,7 @@ export const serve_rendered = {
 
             res.set({
               'Last-Modified': item.lastModified,
-              'Content-Type': `image/${format}`
+              'Content-Type': `image/${format}`,
             });
             return res.status(200).send(buffer);
           });
@@ -695,80 +751,144 @@ export const serve_rendered = {
       });
     };
 
-    app.get(`/:id/:z(\\d+)/:x(\\d+)/:y(\\d+):scale(${scalePattern})?.:format([\\w]+)`, (req, res, next) => {
-      const item = repo[req.params.id];
-      if (!item) {
-        return res.sendStatus(404);
-      }
-
-      const modifiedSince = req.get('if-modified-since'); const cc = req.get('cache-control');
-      if (modifiedSince && (!cc || cc.indexOf('no-cache') === -1)) {
-        if (new Date(item.lastModified) <= new Date(modifiedSince)) {
-          return res.sendStatus(304);
-        }
-      }
-
-      const z = req.params.z | 0;
-      const x = req.params.x | 0;
-      const y = req.params.y | 0;
-      const scale = getScale(req.params.scale);
-      const format = req.params.format;
-      if (z < 0 || x < 0 || y < 0 ||
-        z > 22 || x >= Math.pow(2, z) || y >= Math.pow(2, z)) {
-        return res.status(404).send('Out of bounds');
-      }
-      const tileSize = 256;
-      const tileCenter = mercator.ll([
-        ((x + 0.5) / (1 << z)) * (256 << z),
-        ((y + 0.5) / (1 << z)) * (256 << z)
-      ], z);
-      return respondImage(item, z, tileCenter[0], tileCenter[1], 0, 0, tileSize, tileSize, scale, format, res, next);
-    });
-
-    if (options.serveStaticMaps !== false) {
-      const staticPattern =
-        `/:id/static/:raw(raw)?/%s/:width(\\d+)x:height(\\d+):scale(${scalePattern})?.:format([\\w]+)`;
-
-      const centerPattern =
-        util.format(':x(%s),:y(%s),:z(%s)(@:bearing(%s)(,:pitch(%s))?)?',
-            FLOAT_PATTERN, FLOAT_PATTERN, FLOAT_PATTERN,
-            FLOAT_PATTERN, FLOAT_PATTERN);
-
-      app.get(util.format(staticPattern, centerPattern), async (req, res, next) => {
+    app.get(
+      `/:id/:z(\\d+)/:x(\\d+)/:y(\\d+):scale(${scalePattern})?.:format([\\w]+)`,
+      (req, res, next) => {
         const item = repo[req.params.id];
         if (!item) {
           return res.sendStatus(404);
         }
-        const raw = req.params.raw;
-        const z = +req.params.z;
-        let x = +req.params.x;
-        let y = +req.params.y;
-        const bearing = +(req.params.bearing || '0');
-        const pitch = +(req.params.pitch || '0');
-        const w = req.params.width | 0;
-        const h = req.params.height | 0;
+
+        const modifiedSince = req.get('if-modified-since');
+        const cc = req.get('cache-control');
+        if (modifiedSince && (!cc || cc.indexOf('no-cache') === -1)) {
+          if (new Date(item.lastModified) <= new Date(modifiedSince)) {
+            return res.sendStatus(304);
+          }
+        }
+
+        const z = req.params.z | 0;
+        const x = req.params.x | 0;
+        const y = req.params.y | 0;
         const scale = getScale(req.params.scale);
         const format = req.params.format;
-
-        if (z < 0) {
-          return res.status(404).send('Invalid zoom');
+        if (
+          z < 0 ||
+          x < 0 ||
+          y < 0 ||
+          z > 22 ||
+          x >= Math.pow(2, z) ||
+          y >= Math.pow(2, z)
+        ) {
+          return res.status(404).send('Out of bounds');
         }
+        const tileSize = 256;
+        const tileCenter = mercator.ll(
+          [
+            ((x + 0.5) / (1 << z)) * (256 << z),
+            ((y + 0.5) / (1 << z)) * (256 << z),
+          ],
+          z,
+        );
+        return respondImage(
+          item,
+          z,
+          tileCenter[0],
+          tileCenter[1],
+          0,
+          0,
+          tileSize,
+          tileSize,
+          scale,
+          format,
+          res,
+          next,
+        );
+      },
+    );
 
-        const transformer = raw ?
-          mercator.inverse.bind(mercator) : item.dataProjWGStoInternalWGS;
+    if (options.serveStaticMaps !== false) {
+      const staticPattern = `/:id/static/:raw(raw)?/%s/:width(\\d+)x:height(\\d+):scale(${scalePattern})?.:format([\\w]+)`;
+
+      const centerPattern = util.format(
+        ':x(%s),:y(%s),:z(%s)(@:bearing(%s)(,:pitch(%s))?)?',
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+      );
+
+      app.get(
+        util.format(staticPattern, centerPattern),
+        async (req, res, next) => {
+          const item = repo[req.params.id];
+          if (!item) {
+            return res.sendStatus(404);
+          }
+          const raw = req.params.raw;
+          const z = +req.params.z;
+          let x = +req.params.x;
+          let y = +req.params.y;
+          const bearing = +(req.params.bearing || '0');
+          const pitch = +(req.params.pitch || '0');
+          const w = req.params.width | 0;
+          const h = req.params.height | 0;
+          const scale = getScale(req.params.scale);
+          const format = req.params.format;
+
+          if (z < 0) {
+            return res.status(404).send('Invalid zoom');
+          }
 
-        if (transformer) {
-          const ll = transformer([x, y]);
-          x = ll[0];
-          y = ll[1];
-        }
+          const transformer = raw
+            ? mercator.inverse.bind(mercator)
+            : item.dataProjWGStoInternalWGS;
 
-        const paths = extractPathsFromQuery(req.query, transformer);
-        const markers = extractMarkersFromQuery(req.query, options, transformer);
-        const overlay = await renderOverlay(z, x, y, bearing, pitch, w, h, scale, paths, markers, req.query);
+          if (transformer) {
+            const ll = transformer([x, y]);
+            x = ll[0];
+            y = ll[1];
+          }
 
-        return respondImage(item, z, x, y, bearing, pitch, w, h, scale, format, res, next, overlay, 'static');
-      });
+          const paths = extractPathsFromQuery(req.query, transformer);
+          const markers = extractMarkersFromQuery(
+            req.query,
+            options,
+            transformer,
+          );
+          const overlay = await renderOverlay(
+            z,
+            x,
+            y,
+            bearing,
+            pitch,
+            w,
+            h,
+            scale,
+            paths,
+            markers,
+            req.query,
+          );
+
+          return respondImage(
+            item,
+            z,
+            x,
+            y,
+            bearing,
+            pitch,
+            w,
+            h,
+            scale,
+            format,
+            res,
+            next,
+            overlay,
+            'static',
+          );
+        },
+      );
 
       const serveBounds = async (req, res, next) => {
         const item = repo[req.params.id];
@@ -776,11 +896,17 @@ export const serve_rendered = {
           return res.sendStatus(404);
         }
         const raw = req.params.raw;
-        const bbox = [+req.params.minx, +req.params.miny, +req.params.maxx, +req.params.maxy];
+        const bbox = [
+          +req.params.minx,
+          +req.params.miny,
+          +req.params.maxx,
+          +req.params.maxy,
+        ];
         let center = [(bbox[0] + bbox[2]) / 2, (bbox[1] + bbox[3]) / 2];
 
-        const transformer = raw ?
-          mercator.inverse.bind(mercator) : item.dataProjWGStoInternalWGS;
+        const transformer = raw
+          ? mercator.inverse.bind(mercator)
+          : item.dataProjWGStoInternalWGS;
 
         if (transformer) {
           const minCorner = transformer(bbox.slice(0, 2));
@@ -804,14 +930,49 @@ export const serve_rendered = {
         const pitch = 0;
 
         const paths = extractPathsFromQuery(req.query, transformer);
-        const markers = extractMarkersFromQuery(req.query, options, transformer);
-        const overlay = await renderOverlay(z, x, y, bearing, pitch, w, h, scale, paths, markers, req.query);
-        return respondImage(item, z, x, y, bearing, pitch, w, h, scale, format, res, next, overlay, 'static');
+        const markers = extractMarkersFromQuery(
+          req.query,
+          options,
+          transformer,
+        );
+        const overlay = await renderOverlay(
+          z,
+          x,
+          y,
+          bearing,
+          pitch,
+          w,
+          h,
+          scale,
+          paths,
+          markers,
+          req.query,
+        );
+        return respondImage(
+          item,
+          z,
+          x,
+          y,
+          bearing,
+          pitch,
+          w,
+          h,
+          scale,
+          format,
+          res,
+          next,
+          overlay,
+          'static',
+        );
       };
 
-      const boundsPattern =
-        util.format(':minx(%s),:miny(%s),:maxx(%s),:maxy(%s)',
-            FLOAT_PATTERN, FLOAT_PATTERN, FLOAT_PATTERN, FLOAT_PATTERN);
+      const boundsPattern = util.format(
+        ':minx(%s),:miny(%s),:maxx(%s),:maxy(%s)',
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+        FLOAT_PATTERN,
+      );
 
       app.get(util.format(staticPattern, boundsPattern), serveBounds);
 
@@ -839,66 +1000,102 @@ export const serve_rendered = {
 
       const autoPattern = 'auto';
 
-      app.get(util.format(staticPattern, autoPattern), async (req, res, next) => {
-        const item = repo[req.params.id];
-        if (!item) {
-          return res.sendStatus(404);
-        }
-        const raw = req.params.raw;
-        const w = req.params.width | 0;
-        const h = req.params.height | 0;
-        const bearing = 0;
-        const pitch = 0;
-        const scale = getScale(req.params.scale);
-        const format = req.params.format;
-
-        const transformer = raw ?
-          mercator.inverse.bind(mercator) : item.dataProjWGStoInternalWGS;
-
-        const paths = extractPathsFromQuery(req.query, transformer);
-        const markers = extractMarkersFromQuery(req.query, options, transformer);
-
-        // Extract coordinates from markers
-        const markerCoordinates = [];
-        for (const marker of markers) {
-          markerCoordinates.push(marker.location);
-        }
-
-        // Create array with coordinates from markers and path
-        const coords = new Array().concat(paths.flat()).concat(markerCoordinates);
-
-        // Check if we have at least one coordinate to calculate a bounding box
-        if (coords.length < 1) {
-          return res.status(400).send('No coordinates provided');
-        }
-
-        const bbox = [Infinity, Infinity, -Infinity, -Infinity];
-        for (const pair of coords) {
-          bbox[0] = Math.min(bbox[0], pair[0]);
-          bbox[1] = Math.min(bbox[1], pair[1]);
-          bbox[2] = Math.max(bbox[2], pair[0]);
-          bbox[3] = Math.max(bbox[3], pair[1]);
-        }
+      app.get(
+        util.format(staticPattern, autoPattern),
+        async (req, res, next) => {
+          const item = repo[req.params.id];
+          if (!item) {
+            return res.sendStatus(404);
+          }
+          const raw = req.params.raw;
+          const w = req.params.width | 0;
+          const h = req.params.height | 0;
+          const bearing = 0;
+          const pitch = 0;
+          const scale = getScale(req.params.scale);
+          const format = req.params.format;
+
+          const transformer = raw
+            ? mercator.inverse.bind(mercator)
+            : item.dataProjWGStoInternalWGS;
+
+          const paths = extractPathsFromQuery(req.query, transformer);
+          const markers = extractMarkersFromQuery(
+            req.query,
+            options,
+            transformer,
+          );
+
+          // Extract coordinates from markers
+          const markerCoordinates = [];
+          for (const marker of markers) {
+            markerCoordinates.push(marker.location);
+          }
 
-        const bbox_ = mercator.convert(bbox, '900913');
-        const center = mercator.inverse(
-            [(bbox_[0] + bbox_[2]) / 2, (bbox_[1] + bbox_[3]) / 2]
-        );
+          // Create array with coordinates from markers and path
+          const coords = [].concat(paths.flat()).concat(markerCoordinates);
 
-        // Calculate zoom level
-        const maxZoom = parseFloat(req.query.maxzoom);
-        let z = calcZForBBox(bbox, w, h, req.query);
-        if (maxZoom > 0) {
-          z = Math.min(z, maxZoom);
-        }
+          // Check if we have at least one coordinate to calculate a bounding box
+          if (coords.length < 1) {
+            return res.status(400).send('No coordinates provided');
+          }
 
-        const x = center[0];
-        const y = center[1];
+          const bbox = [Infinity, Infinity, -Infinity, -Infinity];
+          for (const pair of coords) {
+            bbox[0] = Math.min(bbox[0], pair[0]);
+            bbox[1] = Math.min(bbox[1], pair[1]);
+            bbox[2] = Math.max(bbox[2], pair[0]);
+            bbox[3] = Math.max(bbox[3], pair[1]);
+          }
 
-        const overlay = await renderOverlay(z, x, y, bearing, pitch, w, h, scale, paths, markers, req.query);
+          const bbox_ = mercator.convert(bbox, '900913');
+          const center = mercator.inverse([
+            (bbox_[0] + bbox_[2]) / 2,
+            (bbox_[1] + bbox_[3]) / 2,
+          ]);
+
+          // Calculate zoom level
+          const maxZoom = parseFloat(req.query.maxzoom);
+          let z = calcZForBBox(bbox, w, h, req.query);
+          if (maxZoom > 0) {
+            z = Math.min(z, maxZoom);
+          }
 
-        return respondImage(item, z, x, y, bearing, pitch, w, h, scale, format, res, next, overlay, 'static');
-      });
+          const x = center[0];
+          const y = center[1];
+
+          const overlay = await renderOverlay(
+            z,
+            x,
+            y,
+            bearing,
+            pitch,
+            w,
+            h,
+            scale,
+            paths,
+            markers,
+            req.query,
+          );
+
+          return respondImage(
+            item,
+            z,
+            x,
+            y,
+            bearing,
+            pitch,
+            w,
+            h,
+            scale,
+            format,
+            res,
+            next,
+            overlay,
+            'static',
+          );
+        },
+      );
     }
 
     app.get('/:id.json', (req, res, next) => {
@@ -907,8 +1104,13 @@ export const serve_rendered = {
         return res.sendStatus(404);
       }
       const info = clone(item.tileJSON);
-      info.tiles = getTileUrls(req, info.tiles,
-          `styles/${req.params.id}`, info.format, item.publicUrl);
+      info.tiles = getTileUrls(
+        req,
+        info.tiles,
+        `styles/${req.params.id}`,
+        info.format,
+        item.publicUrl,
+      );
       return res.send(info);
     });
 
@@ -918,7 +1120,7 @@ export const serve_rendered = {
     const map = {
       renderers: [],
       renderers_static: [],
-      sources: {}
+      sources: {},
     };
 
     let styleJSON;
@@ -934,19 +1136,26 @@ export const serve_rendered = {
               const dir = options.paths[protocol];
               const file = unescape(req.url).substring(protocol.length + 3);
               fs.readFile(path.join(dir, file), (err, data) => {
-                callback(err, {data: data});
+                callback(err, { data: data });
               });
             } else if (protocol === 'fonts') {
               const parts = req.url.split('/');
               const fontstack = unescape(parts[2]);
               const range = parts[3].split('.')[0];
               getFontsPbf(
-                  null, options.paths[protocol], fontstack, range, existingFonts
-              ).then((concated) => {
-                callback(null, {data: concated});
-              }, (err) => {
-                callback(err, {data: null});
-              });
+                null,
+                options.paths[protocol],
+                fontstack,
+                range,
+                existingFonts,
+              ).then(
+                (concated) => {
+                  callback(null, { data: concated });
+                },
+                (err) => {
+                  callback(err, { data: null });
+                },
+              );
             } else if (protocol === 'mbtiles') {
               const parts = req.url.split('/');
               const sourceId = parts[2];
@@ -958,8 +1167,13 @@ export const serve_rendered = {
               const format = parts[5].split('.')[1];
               source.getTile(z, x, y, (err, data, headers) => {
                 if (err) {
-                  if (options.verbose) console.log('MBTiles error, serving empty', err);
-                  createEmptyResponse(sourceInfo.format, sourceInfo.color, callback);
+                  if (options.verbose)
+                    console.log('MBTiles error, serving empty', err);
+                  createEmptyResponse(
+                    sourceInfo.format,
+                    sourceInfo.color,
+                    callback,
+                  );
                   return;
                 }
 
@@ -972,11 +1186,23 @@ export const serve_rendered = {
                   try {
                     response.data = zlib.unzipSync(data);
                   } catch (err) {
-                    console.log('Skipping incorrect header for tile mbtiles://%s/%s/%s/%s.pbf', id, z, x, y);
+                    console.log(
+                      'Skipping incorrect header for tile mbtiles://%s/%s/%s/%s.pbf',
+                      id,
+                      z,
+                      x,
+                      y,
+                    );
                   }
                   if (options.dataDecoratorFunc) {
                     response.data = options.dataDecoratorFunc(
-                        sourceId, 'data', response.data, z, x, y);
+                      sourceId,
+                      'data',
+                      response.data,
+                      z,
+                      x,
+                      y,
+                    );
                   }
                 } else {
                   response.data = data;
@@ -985,36 +1211,39 @@ export const serve_rendered = {
                 callback(null, response);
               });
             } else if (protocol === 'http' || protocol === 'https') {
-              request({
-                url: req.url,
-                encoding: null,
-                gzip: true
-              }, (err, res, body) => {
-                const parts = url.parse(req.url);
-                const extension = path.extname(parts.pathname).toLowerCase();
-                const format = extensionToFormat[extension] || '';
-                if (err || res.statusCode < 200 || res.statusCode >= 300) {
-                  // console.log('HTTP error', err || res.statusCode);
-                  createEmptyResponse(format, '', callback);
-                  return;
-                }
+              request(
+                {
+                  url: req.url,
+                  encoding: null,
+                  gzip: true,
+                },
+                (err, res, body) => {
+                  const parts = url.parse(req.url);
+                  const extension = path.extname(parts.pathname).toLowerCase();
+                  const format = extensionToFormat[extension] || '';
+                  if (err || res.statusCode < 200 || res.statusCode >= 300) {
+                    // console.log('HTTP error', err || res.statusCode);
+                    createEmptyResponse(format, '', callback);
+                    return;
+                  }
 
-                const response = {};
-                if (res.headers.modified) {
-                  response.modified = new Date(res.headers.modified);
-                }
-                if (res.headers.expires) {
-                  response.expires = new Date(res.headers.expires);
-                }
-                if (res.headers.etag) {
-                  response.etag = res.headers.etag;
-                }
+                  const response = {};
+                  if (res.headers.modified) {
+                    response.modified = new Date(res.headers.modified);
+                  }
+                  if (res.headers.expires) {
+                    response.expires = new Date(res.headers.expires);
+                  }
+                  if (res.headers.etag) {
+                    response.etag = res.headers.etag;
+                  }
 
-                response.data = body;
-                callback(null, response);
-              });
+                  response.data = body;
+                  callback(null, response);
+                },
+              );
             }
-          }
+          },
         });
         renderer.load(styleJSON);
         createCallback(null, renderer);
@@ -1025,7 +1254,7 @@ export const serve_rendered = {
         create: createRenderer.bind(null, ratio),
         destroy: (renderer) => {
           renderer.release();
-        }
+        },
       });
     };
 
@@ -1039,16 +1268,20 @@ export const serve_rendered = {
     }
 
     if (styleJSON.sprite && !httpTester.test(styleJSON.sprite)) {
-      styleJSON.sprite = 'sprites://' +
+      styleJSON.sprite =
+        'sprites://' +
         styleJSON.sprite
-            .replace('{style}', path.basename(styleFile, '.json'))
-            .replace('{styleJsonFolder}', path.relative(options.paths.sprites, path.dirname(styleJSONPath)));
+          .replace('{style}', path.basename(styleFile, '.json'))
+          .replace(
+            '{styleJsonFolder}',
+            path.relative(options.paths.sprites, path.dirname(styleJSONPath)),
+          );
     }
     if (styleJSON.glyphs && !httpTester.test(styleJSON.glyphs)) {
       styleJSON.glyphs = `fonts://${styleJSON.glyphs}`;
     }
 
-    for (const layer of (styleJSON.layers || [])) {
+    for (const layer of styleJSON.layers || []) {
       if (layer && layer.paint) {
         // Remove (flatten) 3D buildings
         if (layer.paint['fill-extrusion-height']) {
@@ -1061,14 +1294,14 @@ export const serve_rendered = {
     }
 
     const tileJSON = {
-      'tilejson': '2.0.0',
-      'name': styleJSON.name,
-      'attribution': '',
-      'minzoom': 0,
-      'maxzoom': 20,
-      'bounds': [-180, -85.0511, 180, 85.0511],
-      'format': 'png',
-      'type': 'baselayer'
+      tilejson: '2.0.0',
+      name: styleJSON.name,
+      attribution: '',
+      minzoom: 0,
+      maxzoom: 20,
+      bounds: [-180, -85.0511, 180, 85.0511],
+      format: 'png',
+      type: 'baselayer',
     };
     const attributionOverride = params.tilejson && params.tilejson.attribution;
     Object.assign(tileJSON, params.tilejson || {});
@@ -1081,7 +1314,7 @@ export const serve_rendered = {
       map,
       dataProjWGStoInternalWGS: null,
       lastModified: new Date().toUTCString(),
-      watermark: params.watermark || options.watermark
+      watermark: params.watermark || options.watermark,
     };
     repo[id] = repoobj;
 
@@ -1095,8 +1328,8 @@ export const serve_rendered = {
         delete source.url;
 
         let mbtilesFile = url.substring('mbtiles://'.length);
-        const fromData = mbtilesFile[0] === '{' &&
-          mbtilesFile[mbtilesFile.length - 1] === '}';
+        const fromData =
+          mbtilesFile[0] === '{' && mbtilesFile[mbtilesFile.length - 1] === '}';
 
         if (fromData) {
           mbtilesFile = mbtilesFile.substr(1, mbtilesFile.length - 2);
@@ -1111,52 +1344,58 @@ export const serve_rendered = {
           }
         }
 
-        queue.push(new Promise((resolve, reject) => {
-          mbtilesFile = path.resolve(options.paths.mbtiles, mbtilesFile);
-          const mbtilesFileStats = fs.statSync(mbtilesFile);
-          if (!mbtilesFileStats.isFile() || mbtilesFileStats.size === 0) {
-            throw Error(`Not valid MBTiles file: ${mbtilesFile}`);
-          }
-          map.sources[name] = new MBTiles(mbtilesFile + '?mode=ro', err => {
-            map.sources[name].getInfo((err, info) => {
-              if (err) {
-                console.error(err);
-                return;
-              }
-
-              if (!repoobj.dataProjWGStoInternalWGS && info.proj4) {
-                // how to do this for multiple sources with different proj4 defs?
-                const to3857 = proj4('EPSG:3857');
-                const toDataProj = proj4(info.proj4);
-                repoobj.dataProjWGStoInternalWGS = (xy) => to3857.inverse(toDataProj.forward(xy));
-              }
-
-              const type = source.type;
-              Object.assign(source, info);
-              source.type = type;
-              source.tiles = [
-                // meta url which will be detected when requested
-                `mbtiles://${name}/{z}/{x}/{y}.${info.format || 'pbf'}`
-              ];
-              delete source.scheme;
-
-              if (options.dataDecoratorFunc) {
-                source = options.dataDecoratorFunc(name, 'tilejson', source);
-              }
-
-              if (!attributionOverride &&
-                source.attribution && source.attribution.length > 0) {
-                if (!tileJSON.attribution.includes(source.attribution)) {
-                  if (tileJSON.attribution.length > 0) {
-                    tileJSON.attribution += ' | ';
+        queue.push(
+          new Promise((resolve, reject) => {
+            mbtilesFile = path.resolve(options.paths.mbtiles, mbtilesFile);
+            const mbtilesFileStats = fs.statSync(mbtilesFile);
+            if (!mbtilesFileStats.isFile() || mbtilesFileStats.size === 0) {
+              throw Error(`Not valid MBTiles file: ${mbtilesFile}`);
+            }
+            map.sources[name] = new MBTiles(mbtilesFile + '?mode=ro', (err) => {
+              map.sources[name].getInfo((err, info) => {
+                if (err) {
+                  console.error(err);
+                  return;
+                }
+
+                if (!repoobj.dataProjWGStoInternalWGS && info.proj4) {
+                  // how to do this for multiple sources with different proj4 defs?
+                  const to3857 = proj4('EPSG:3857');
+                  const toDataProj = proj4(info.proj4);
+                  repoobj.dataProjWGStoInternalWGS = (xy) =>
+                    to3857.inverse(toDataProj.forward(xy));
+                }
+
+                const type = source.type;
+                Object.assign(source, info);
+                source.type = type;
+                source.tiles = [
+                  // meta url which will be detected when requested
+                  `mbtiles://${name}/{z}/{x}/{y}.${info.format || 'pbf'}`,
+                ];
+                delete source.scheme;
+
+                if (options.dataDecoratorFunc) {
+                  source = options.dataDecoratorFunc(name, 'tilejson', source);
+                }
+
+                if (
+                  !attributionOverride &&
+                  source.attribution &&
+                  source.attribution.length > 0
+                ) {
+                  if (!tileJSON.attribution.includes(source.attribution)) {
+                    if (tileJSON.attribution.length > 0) {
+                      tileJSON.attribution += ' | ';
+                    }
+                    tileJSON.attribution += source.attribution;
                   }
-                  tileJSON.attribution += source.attribution;
                 }
-              }
-              resolve();
+                resolve();
+              });
             });
-          });
-        }));
+          }),
+        );
       }
     }
 
@@ -1170,7 +1409,12 @@ export const serve_rendered = {
         const minPoolSize = minPoolSizes[i];
         const maxPoolSize = Math.max(minPoolSize, maxPoolSizes[j]);
         map.renderers[s] = createPool(s, 'tile', minPoolSize, maxPoolSize);
-        map.renderers_static[s] = createPool(s, 'static', minPoolSize, maxPoolSize);
+        map.renderers_static[s] = createPool(
+          s,
+          'static',
+          minPoolSize,
+          maxPoolSize,
+        );
       }
     });
 
@@ -1187,5 +1431,5 @@ export const serve_rendered = {
       });
     }
     delete repo[id];
-  }
+  },
 };