tileserver-gl 4.5.0 → 4.5.1

package/.github/workflows/ci.yml

@@ -13,11 +13,11 @@ jobs:
     steps:
       - name: Check out repository ✨ (non-dependabot)
         if: ${{ github.actor != 'dependabot[bot]' }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Check out repository 🎉 (dependabot)
         if: ${{ github.actor == 'dependabot[bot]' }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 

package/.github/workflows/codeql.yml

@@ -23,7 +23,7 @@ jobs:
         language: [javascript]
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2
         with:

package/.github/workflows/ct.yml

@@ -13,11 +13,11 @@ jobs:
     steps:
       - name: Check out repository ✨ (non-dependabot)
         if: ${{ github.actor != 'dependabot[bot]' }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Check out repository 🎉 (dependabot)
         if: ${{ github.actor == 'dependabot[bot]' }}
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           ref: ${{ github.event.pull_request.head.sha }}
 

package/.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
     runs-on: ubuntu-20.04
     steps:
       - name: Check out repository ✨
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Update apt-get 🚀
         run: sudo apt-get update -qq

package/docs/deployment.rst

@@ -21,7 +21,7 @@ Endpoint data can be configured to be cached by Cloudflare. For example to cache
 
 Create a rule which matches ``hostname (equal)`` and ``URI Path (ends with)`` for ``.pbf`` and ``.json`` fields. Set cache status to eligible for cache to enable the caching and overwrite the ``Edge TTL`` with ``Browser TTL`` to be 7 days (depends on your application usage).
 
-This will ensure that Cloudflare will cache your tiles on Cloudflare side for seven days aswell on the client side. If the tileserver is down or user has no internet access it will try to use cached tiles from Cloudflare or local.
+This will ensure that your tiles are cached on the client side and by Cloudflare for seven days. If the tileserver is down or user has no internet access it will try to use cached tiles.
 
 Note that ``Browser TTL`` will overwrite expiration dates on the client device. If you rebuild your maps, old tiles will be rendered until it expires or cache is cleared on the client device.
 
@@ -115,7 +115,7 @@ An example nginx reverse proxy server configuration for HTTPS connections. It en
 
     location / {
       # This include directive sets up required headers for proxy and proxy cache.
-      # Aswell it includes the required ``X-Forwarded-*`` headers for tileserver to propely generate tiles.
+      # As well it includes the required ``X-Forwarded-*`` headers for tileserver to properly generate tiles.
       include proxy_params;
 
       proxy_pass http://127.0.0.1:8080/;

package/docs/endpoints.rst

@@ -35,13 +35,14 @@ Static images
 
 * All the static image endpoints additionally support following query parameters:
 
-  * ``path`` - comma-separated ``lng,lat``, pipe-separated pairs
-
-    * e.g. ``5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8``
-    * can be provided multiple times
-    * or pass the path as per [Maptiler Cloud API](https://docs.maptiler.com/cloud/api/static-maps/)
-    * Match pattern: ((fill|stroke|width)\:[^\|]+\|)*((enc:.+)|((-?\d+\.?\d*,-?\d+\.?\d*\|)+(-?\d+\.?\d*,-?\d+\.?\d*)))
-
+  * ``path``
+    * can be provided multiple times  
+    * syntax
+      * comma-separated ``lng,lat``, pipe-separated pairs
+        * e.g. ``path=5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8``
+      *  Match pattern with options ``((fill|stroke|width)\:[^\|]+\|)*((enc:.+)|((-?\d+\.?\d*,-?\d+\.?\d*\|)+(-?\d+\.?\d*,-?\d+\.?\d*)))``
+        * e.g. ``path=stroke:yellow|width:2|fill:green|5.9,45.8|5.9,47.8|10.5,47.8|10.5,45.8|5.9,45.8`` or ``stroke:blue|enc:_p~iF~ps|U_ulLnnqC_mqNvxq`@``
+        * 'enc:' is specified in `Google Encoded Polyline Format <https://developers.google.com/maps/documentation/utilities/polylinealgorithm>`. If used, the rest of the path parameter is considered to be part of the encoded polyline string -- do not specify the coordinate pairs.
   * ``latlng`` - indicates coordinates are in ``lat,lng`` order rather than the usual ``lng,lat``
   * ``fill`` - color to use as the fill (e.g. ``red``, ``rgba(255,255,255,0.5)``, ``#0000ff``)
   * ``stroke`` - color of the path stroke

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tileserver-gl",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "Map tile server for JSON GL styles - vector and server side generated raster tiles",
   "main": "src/main.js",
   "bin": "src/main.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@mapbox/glyph-pbf-composite": "0.0.3",
     "@mapbox/mbtiles": "0.12.1",
-    "@mapbox/polyline": "^1.2.0",
+    "@mapbox/polyline": "^1.2.1",
     "@mapbox/sphericalmercator": "1.2.0",
     "@mapbox/vector-tile": "1.3.1",
     "@maplibre/maplibre-gl-native": "5.2.0",
@@ -40,7 +40,7 @@
     "proj4": "2.9.0",
     "request": "2.88.2",
     "sanitize-filename": "1.6.3",
-    "sharp": "0.32.4",
+    "sharp": "0.32.6",
     "tileserver-gl-styles": "2.0.0"
   },
   "devDependencies": {
@@ -48,14 +48,14 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "chai": "4.3.7",
-    "eslint": "^8.47.0",
+    "chai": "4.3.8",
+    "eslint": "^8.50.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jsdoc": "^46.4.6",
+    "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-security": "^1.7.1",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.3",
+    "lint-staged": "^14.0.1",
     "mocha": "^10.2.0",
     "prettier": "^2.8.8",
     "should": "^13.2.3",

package/src/serve_rendered.js

@@ -54,7 +54,6 @@ const cachedEmptyResponses = {
 
 /**
  * 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.
@@ -102,7 +101,6 @@ function createEmptyResponse(format, color, callback) {
 /**
  * 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 coordinates
  * @param {object} query Request query parameters.
@@ -127,7 +125,6 @@ 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 {Function} transformer Optional transform function.
@@ -145,7 +142,6 @@ const parseCoordinates = (coordinatePair, query, transformer) => {
 
 /**
  * Parses paths provided via query into a list of path objects.
- *
  * @param {object} query Request query parameters.
  * @param {Function} transformer Optional transform function.
  */
@@ -166,21 +162,12 @@ const extractPathsFromQuery = (query, transformer) => {
         providedPath.includes('enc:') &&
         PATH_PATTERN.test(decodeURIComponent(providedPath))
       ) {
-        const encodedPaths = providedPath.split(',');
-        for (const path of encodedPaths) {
-          const line = path
-            .split('|')
-            .filter(
-              (x) =>
-                !x.startsWith('fill') &&
-                !x.startsWith('stroke') &&
-                !x.startsWith('width'),
-            )
-            .join('')
-            .replace('enc:', '');
-          const coords = polyline.decode(line).map(([lat, lng]) => [lng, lat]);
-          paths.push(coords);
-        }
+        // +4 because 'enc:' is 4 characters, everything after 'enc:' is considered to be part of the polyline
+        const encIndex = providedPath.indexOf('enc:') + 4;
+        const coords = polyline
+          .decode(providedPath.substring(encIndex))
+          .map(([lat, lng]) => [lng, lat]);
+        paths.push(coords);
       } else {
         // Iterate through paths, parse and validate them
         const currentPath = [];
@@ -220,7 +207,6 @@ 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.
  */
@@ -255,7 +241,6 @@ 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 {Function} transformer Optional transform function.
@@ -335,7 +320,6 @@ const extractMarkersFromQuery = (query, options, transformer) => {
 
 /**
  * Transforms coordinates to pixels.
- *
  * @param {List[Number]} ll Longitude/Latitude coordinate pair.
  * @param {number} zoom Map zoom level.
  */
@@ -347,7 +331,6 @@ 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.
@@ -419,7 +402,6 @@ const drawMarker = (ctx, marker, z) => {
  * 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 {List[Object]} markers Marker objects parsed by extractMarkersFromQuery.
  * @param {number} z Map zoom level.
@@ -438,117 +420,107 @@ const drawMarkers = async (ctx, markers, z) => {
 
 /**
  * Draws a list of coordinates onto a canvas and styles the resulting path.
- *
  * @param {object} ctx Canvas context object.
  * @param {List[Number]} path List of coordinates.
  * @param {object} query Request query parameters.
+ * @param {string} pathQuery Path query parameter.
  * @param {number} z Map zoom level.
  */
-const drawPath = (ctx, path, query, z) => {
-  const renderPath = (splitPaths) => {
-    if (!path || path.length < 2) {
-      return null;
-    }
+const drawPath = (ctx, path, query, pathQuery, z) => {
+  const splitPaths = decodeURIComponent(pathQuery).split('|');
 
-    ctx.beginPath();
+  if (!path || path.length < 2) {
+    return null;
+  }
 
-    // Transform coordinates to pixel on canvas and draw lines between points
-    for (const pair of path) {
-      const px = precisePx(pair, z);
-      ctx.lineTo(px[0], px[1]);
-    }
+  ctx.beginPath();
 
-    // Check if first coordinate matches last coordinate
-    if (
-      path[0][0] === path[path.length - 1][0] &&
-      path[0][1] === path[path.length - 1][1]
-    ) {
-      ctx.closePath();
-    }
+  // Transform coordinates to pixel on canvas and draw lines between points
+  for (const pair of path) {
+    const px = precisePx(pair, z);
+    ctx.lineTo(px[0], px[1]);
+  }
 
-    // Optionally fill drawn shape with a rgba color from query
-    const pathHasFill =
-      splitPaths.filter((x) => x.startsWith('fill')).length > 0;
-    if (query.fill !== undefined || pathHasFill) {
-      if ('fill' in query) {
-        ctx.fillStyle = query.fill || 'rgba(255,255,255,0.4)';
-      }
-      if (pathHasFill) {
-        ctx.fillStyle = splitPaths
-          .find((x) => x.startsWith('fill:'))
-          .replace('fill:', '');
-      }
-      ctx.fill();
-    }
+  // Check if first coordinate matches last coordinate
+  if (
+    path[0][0] === path[path.length - 1][0] &&
+    path[0][1] === path[path.length - 1][1]
+  ) {
+    ctx.closePath();
+  }
 
-    // Get line width from query and fall back to 1 if not provided
-    const pathHasWidth =
-      splitPaths.filter((x) => x.startsWith('width')).length > 0;
-    if (query.width !== undefined || pathHasWidth) {
-      let lineWidth = 1;
-      // Get line width from query
-      if ('width' in query) {
-        lineWidth = Number(query.width);
-      }
-      // Get line width from path in query
-      if (pathHasWidth) {
-        lineWidth = Number(
-          splitPaths.find((x) => x.startsWith('width:')).replace('width:', ''),
-        );
-      }
-      // Get border width from query and fall back to 10% of line width
-      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
-      ctx.lineCap = query.linecap || 'butt';
-
-      // Set rendering style for overlapping segments of the path with differing directions
-      // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
-      ctx.lineJoin = query.linejoin || 'miter';
-
-      // In order to simulate a border we draw the path two times with the first
-      // beeing the wider border part.
-      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;
-        // Set border style as rgba
-        ctx.strokeStyle = query.border;
-        ctx.stroke();
-      }
-      ctx.lineWidth = lineWidth;
+  // Optionally fill drawn shape with a rgba color from query
+  const pathHasFill = splitPaths.filter((x) => x.startsWith('fill')).length > 0;
+  if (query.fill !== undefined || pathHasFill) {
+    if ('fill' in query) {
+      ctx.fillStyle = query.fill || 'rgba(255,255,255,0.4)';
     }
+    if (pathHasFill) {
+      ctx.fillStyle = splitPaths
+        .find((x) => x.startsWith('fill:'))
+        .replace('fill:', '');
+    }
+    ctx.fill();
+  }
 
-    const pathHasStroke =
-      splitPaths.filter((x) => x.startsWith('stroke')).length > 0;
-    if (query.stroke !== undefined || pathHasStroke) {
-      if ('stroke' in query) {
-        ctx.strokeStyle = query.stroke;
-      }
-      // Path Width gets higher priority
-      if (pathHasWidth) {
-        ctx.strokeStyle = splitPaths
-          .find((x) => x.startsWith('stroke:'))
-          .replace('stroke:', '');
-      }
-    } else {
-      ctx.strokeStyle = 'rgba(0,64,255,0.7)';
+  // Get line width from query and fall back to 1 if not provided
+  const pathHasWidth =
+    splitPaths.filter((x) => x.startsWith('width')).length > 0;
+  if (query.width !== undefined || pathHasWidth) {
+    let lineWidth = 1;
+    // Get line width from query
+    if ('width' in query) {
+      lineWidth = Number(query.width);
     }
-    ctx.stroke();
-  };
+    // Get line width from path in query
+    if (pathHasWidth) {
+      lineWidth = Number(
+        splitPaths.find((x) => x.startsWith('width:')).replace('width:', ''),
+      );
+    }
+    // Get border width from query and fall back to 10% of line width
+    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
+    ctx.lineCap = query.linecap || 'butt';
+
+    // Set rendering style for overlapping segments of the path with differing directions
+    // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
+    ctx.lineJoin = query.linejoin || 'miter';
+
+    // In order to simulate a border we draw the path two times with the first
+    // beeing the wider border part.
+    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;
+      // Set border style as rgba
+      ctx.strokeStyle = query.border;
+      ctx.stroke();
+    }
+    ctx.lineWidth = lineWidth;
+  }
 
-  // Check if path in query is valid
-  if (Array.isArray(query.path)) {
-    for (let i = 0; i < query.path.length; i += 1) {
-      renderPath(decodeURIComponent(query.path.at(i)).split('|'));
+  const pathHasStroke =
+    splitPaths.filter((x) => x.startsWith('stroke')).length > 0;
+  if (query.stroke !== undefined || pathHasStroke) {
+    if ('stroke' in query) {
+      ctx.strokeStyle = query.stroke;
+    }
+    // Path Stroke gets higher priority
+    if (pathHasStroke) {
+      ctx.strokeStyle = splitPaths
+        .find((x) => x.startsWith('stroke:'))
+        .replace('stroke:', '');
     }
   } else {
-    renderPath(decodeURIComponent(query.path).split('|'));
+    ctx.strokeStyle = 'rgba(0,64,255,0.7)';
   }
+  ctx.stroke();
 };
 
 const renderOverlay = async (
@@ -592,9 +564,10 @@ const renderOverlay = async (
   }
 
   // Draw provided paths if any
-  for (const path of paths) {
-    drawPath(ctx, path, query, z);
-  }
+  paths.forEach((path, i) => {
+    const pathQuery = Array.isArray(query.path) ? query.path.at(i) : query.path;
+    drawPath(ctx, path, query, pathQuery, z);
+  });
 
   // Await drawing of markers before rendering the canvas
   await drawMarkers(ctx, markers, z);
@@ -897,35 +870,118 @@ export const serve_rendered = {
       app.get(
         util.format(staticPattern, centerPattern),
         async (req, res, next) => {
+          try {
+            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');
+            }
+
+            const transformer = raw
+              ? mercator.inverse.bind(mercator)
+              : item.dataProjWGStoInternalWGS;
+
+            if (transformer) {
+              const ll = transformer([x, y]);
+              x = ll[0];
+              y = ll[1];
+            }
+
+            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',
+            );
+          } catch (e) {
+            next(e);
+          }
+        },
+      );
+
+      const serveBounds = async (req, res, next) => {
+        try {
           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');
-          }
+          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;
 
           if (transformer) {
-            const ll = transformer([x, y]);
-            x = ll[0];
-            y = ll[1];
+            const minCorner = transformer(bbox.slice(0, 2));
+            const maxCorner = transformer(bbox.slice(2));
+            bbox[0] = minCorner[0];
+            bbox[1] = minCorner[1];
+            bbox[2] = maxCorner[0];
+            bbox[3] = maxCorner[1];
+            center = transformer(center);
           }
 
+          const w = req.params.width | 0;
+          const h = req.params.height | 0;
+          const scale = getScale(req.params.scale);
+          const format = req.params.format;
+
+          const z = calcZForBBox(bbox, w, h, req.query);
+          const x = center[0];
+          const y = center[1];
+          const bearing = 0;
+          const pitch = 0;
+
           const paths = extractPathsFromQuery(req.query, transformer);
           const markers = extractMarkersFromQuery(
             req.query,
@@ -945,7 +1001,6 @@ export const serve_rendered = {
             markers,
             req.query,
           );
-
           return respondImage(
             item,
             z,
@@ -962,83 +1017,9 @@ export const serve_rendered = {
             overlay,
             'static',
           );
-        },
-      );
-
-      const serveBounds = async (req, res, next) => {
-        const item = repo[req.params.id];
-        if (!item) {
-          return res.sendStatus(404);
+        } catch (e) {
+          next(e);
         }
-        const raw = req.params.raw;
-        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;
-
-        if (transformer) {
-          const minCorner = transformer(bbox.slice(0, 2));
-          const maxCorner = transformer(bbox.slice(2));
-          bbox[0] = minCorner[0];
-          bbox[1] = minCorner[1];
-          bbox[2] = maxCorner[0];
-          bbox[3] = maxCorner[1];
-          center = transformer(center);
-        }
-
-        const w = req.params.width | 0;
-        const h = req.params.height | 0;
-        const scale = getScale(req.params.scale);
-        const format = req.params.format;
-
-        const z = calcZForBBox(bbox, w, h, req.query);
-        const x = center[0];
-        const y = center[1];
-        const bearing = 0;
-        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 boundsPattern = util.format(
@@ -1078,97 +1059,101 @@ export const serve_rendered = {
       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;
+          try {
+            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,
+            );
 
-          const transformer = raw
-            ? mercator.inverse.bind(mercator)
-            : item.dataProjWGStoInternalWGS;
+            // Extract coordinates from markers
+            const markerCoordinates = [];
+            for (const marker of markers) {
+              markerCoordinates.push(marker.location);
+            }
 
-          const paths = extractPathsFromQuery(req.query, transformer);
-          const markers = extractMarkersFromQuery(
-            req.query,
-            options,
-            transformer,
-          );
+            // Create array with coordinates from markers and path
+            const coords = [].concat(paths.flat()).concat(markerCoordinates);
 
-          // Extract coordinates from markers
-          const markerCoordinates = [];
-          for (const marker of markers) {
-            markerCoordinates.push(marker.location);
-          }
+            // 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');
+            }
 
-          // Create array with coordinates from markers and path
-          const coords = [].concat(paths.flat()).concat(markerCoordinates);
+            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]);
+            }
 
-          // 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_ = 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);
+            }
 
-          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 x = center[0];
+            const y = center[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',
+            );
+          } catch (e) {
+            next(e);
           }
-
-          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',
-          );
         },
       );
     }

package/src/server.js

@@ -114,7 +114,6 @@ function start(opts) {
   /**
    * Recursively get all files within a directory.
    * Inspired by https://stackoverflow.com/a/45130990/10133863
-   *
    * @param {string} directory Absolute path to a directory to get files from.
    */
   const getFiles = async (directory) => {
@@ -592,7 +591,6 @@ function start(opts) {
 
 /**
  * Stop the server gracefully
- *
  * @param {string} signal Name of the received signal
  */
 function stopGracefully(signal) {

package/src/utils.js

@@ -8,7 +8,6 @@ import glyphCompose from '@mapbox/glyph-pbf-composite';
 
 /**
  * Generate new URL object
- *
  * @param req
  * @params {object} req - Express request
  * @returns {URL} object

package/test/static.js

@@ -171,6 +171,18 @@ describe('Static endpoints', function () {
           '?path=-10,-10|-20,-20',
         );
       });
+
+      describe('encoded path', function () {
+        testStatic(
+          prefix,
+          'auto/20x20',
+          'png',
+          200,
+          2,
+          /image\/png/,
+          '?path=' + decodeURIComponent('enc:{{biGwvyGoUi@s_A|{@'),
+        );
+      });
     });
 
     describe('invalid requests return 4xx', function () {