tileserver-gl-light 4.4.0 → 4.4.2

package/.eslintignore

@@ -0,0 +1 @@
+public

package/.github/workflows/automerger.yml

@@ -1,9 +1,7 @@
 name: 'Auto Merge PRs'
 
 on:
-  pull_request:
-    branches:
-      - master
+  workflow_call:
 
 permissions:
   pull-requests: write
@@ -12,8 +10,6 @@ permissions:
 jobs:
   automerge:
     runs-on: ubuntu-latest
-    if: >
-      github.event_name == 'pull_request' && github.event.pull_request.user.login == 'dependabot[bot]'
     steps:
       - uses: fastify/github-action-merge-dependabot@v3
         with:

package/.github/workflows/ci.yml

@@ -0,0 +1,51 @@
+name: 'Continuous Integration'
+
+on:
+  workflow_call:
+
+permissions:
+  checks: write
+  contents: read
+
+jobs:
+  ci:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check out repository ✨ (non-dependabot)
+        if: ${{ github.actor != 'dependabot[bot]' }}
+        uses: actions/checkout@v3
+
+      - name: Check out repository 🎉 (dependabot)
+        if: ${{ github.actor == 'dependabot[bot]' }}
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup node env 📦
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: 'package.json'
+          check-latest: true
+          cache: 'npm'
+
+      - name: Install dependencies 🚀
+        run: npm ci --prefer-offline --no-audit --omit=optional
+
+      - name: Run linter(s) 💅
+        uses: wearerequired/lint-action@v2
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          continue_on_error: false
+          git_name: github-actions[bot]
+          git_email: github-actions[bot]@users.noreply.github.com
+          auto_fix: false
+          eslint: true
+          eslint_extensions: js,cjs,mjs,ts
+          prettier: true
+          prettier_extensions: js,cjs,ts,json
+
+      - name: Run hadolint 🐳
+        uses: hadolint/hadolint-action@v3.0.0
+        with:
+          dockerfile: Dockerfile
+          ignore: DL3008,DL3015

package/.github/workflows/codeql.yml

@@ -1,3 +1,5 @@
+name: 'CodeQL'
+
 on:
   push:
     branches:

package/.github/workflows/ct.yml

@@ -1,12 +1,7 @@
 name: 'Continuous Testing'
 
 on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
+  workflow_call:
 
 permissions:
   checks: write
@@ -55,7 +50,7 @@ jobs:
 
       - name: Run tests 🧪
         run: xvfb-run --server-args="-screen 0 1024x768x24" npm test
-        
+
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2
         with:
@@ -63,10 +58,13 @@ jobs:
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v2
-        
+
       - name: Test Docker Build
         uses: docker/build-push-action@v3
         with:
           context: .
           push: false
           platforms: linux/arm64,linux/amd64
+          # experimental: https://github.com/docker/build-push-action/blob/master/docs/advanced/cache.md#cache-backend-api
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

package/.github/workflows/pipeline.yml

@@ -0,0 +1,43 @@
+name: 'The Pipeline'
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+concurrency:
+  group: ci-${{ github.ref }}-1
+  cancel-in-progress: true
+
+jobs:
+  extract-branch:
+    name: 'Fetch branch'
+    runs-on: ubuntu-latest
+    outputs:
+      current_branch: ${{ steps.get-branch.outputs.current_branch }}
+    steps:
+      - name: Extract branch name 🕊
+        id: get-branch
+        run: echo "current_branch=${GITHUB_REF##*/}" >> $GITHUB_OUTPUT
+  ci:
+    name: 'CI'
+    needs:
+      - extract-branch
+    uses: maptiler/tileserver-gl/.github/workflows/ci.yml@master
+  ct:
+    name: 'CT'
+    needs:
+      - extract-branch
+    uses: maptiler/tileserver-gl/.github/workflows/ct.yml@master
+  automerger:
+    name: 'Automerge Dependabot PRs'
+    needs:
+      - ci
+      - ct
+      - extract-branch
+    if: >
+      github.event_name == 'pull_request' && github.event.pull_request.user.login == 'dependabot[bot]'
+    uses: maptiler/tileserver-gl/.github/workflows/automerger.yml@master

package/.github/workflows/release.yml

@@ -1,13 +1,13 @@
-name: "Build, Test, Release"
+name: 'Build, Test, Release'
 
-on: 
+on:
   workflow_dispatch:
     inputs:
       docker_user:
-        description: 'Docker Username'     
+        description: 'Docker Username'
         required: true
       docker_token:
-        description: 'Docker Token'     
+        description: 'Docker Token'
         required: true
       npm_token:
         description: 'NPM Token'
@@ -15,7 +15,7 @@ on:
 
 jobs:
   release:
-    name: "Build, Test, Publish"
+    name: 'Build, Test, Publish'
     runs-on: ubuntu-20.04
     steps:
       - name: Check out repository ✨
@@ -86,6 +86,9 @@ jobs:
           push: true
           tags: maptiler/tileserver-gl:latest, maptiler/tileserver-gl:v${{ env.PACKAGE_VERSION }}
           platforms: linux/arm64,linux/amd64
+          # experimental: https://github.com/docker/build-push-action/blob/master/docs/advanced/cache.md#cache-backend-api
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
 
       - name: Create Tileserver Light Directory
         run: node publish.js --no-publish
@@ -110,3 +113,6 @@ jobs:
           push: true
           tags: maptiler/tileserver-gl-light:latest, maptiler/tileserver-gl-light:v${{ env.PACKAGE_VERSION }}
           platforms: linux/arm64,linux/amd64
+          # experimental: https://github.com/docker/build-push-action/blob/master/docs/advanced/cache.md#cache-backend-api
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

package/.hadolint.yml

@@ -0,0 +1,3 @@
+ignored:
+  - DL3008
+  - DL3015

package/.nvmrc

@@ -0,0 +1 @@
+18

package/.prettierignore

@@ -0,0 +1 @@
+public

package/docs/endpoints.rst

@@ -39,6 +39,8 @@ Static images
 
     * 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*)))
 
   * ``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``)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tileserver-gl-light",
-  "version": "4.4.0",
+  "version": "4.4.2",
   "description": "Map tile server for JSON GL styles - serving vector tiles",
   "main": "src/main.js",
   "bin": "src/main.js",
@@ -19,6 +19,7 @@
   "dependencies": {
     "@mapbox/glyph-pbf-composite": "0.0.3",
     "@mapbox/mbtiles": "0.12.1",
+    "@mapbox/polyline": "^1.1.1",
     "@mapbox/sphericalmercator": "1.2.0",
     "@mapbox/vector-tile": "1.3.1",
     "@maplibre/maplibre-gl-style-spec": "17.0.2",
@@ -26,17 +27,17 @@
     "chokidar": "3.5.3",
     "clone": "2.1.2",
     "color": "4.2.3",
-    "commander": "9.4.1",
+    "commander": "10.0.0",
     "cors": "2.8.5",
     "express": "4.18.2",
     "handlebars": "4.7.7",
     "http-shutdown": "1.2.2",
     "morgan": "1.10.0",
     "pbf": "3.2.1",
-    "proj4": "2.8.0",
+    "proj4": "2.8.1",
     "request": "2.88.2",
-    "tileserver-gl-styles": "2.0.0",
-    "sanitize-filename": "1.6.3"
+    "sanitize-filename": "1.6.3",
+    "tileserver-gl-styles": "2.0.0"
   },
   "keywords": [
     "maptiler",

package/public/templates/data.tmpl

@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js{{&key_query}}"><\/script>'); }</script>
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js{{&key_query}}"><\/script>'); }</script>
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" />
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -18,10 +18,10 @@
   </style>
   {{/is_vector}}
   {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css{{&key_query}}" />
-  <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
-  <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
+  <script src="{{public_url}}leaflet.js"></script>
+  <script src="{{public_url}}leaflet-hash.js"></script>
+  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -35,6 +35,9 @@
   <div id="layerList"></div>
   <pre id="propertyList"></pre>
   <script>
+  var keyMatch = location.search.match(/[\?\&]key=([^&]+)/i);
+  var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';
+    
   var map = new maplibregl.Map({
     container: 'map',
     hash: true,
@@ -44,7 +47,7 @@
       sources: {
         'vector_layer_': {
           type: 'vector',
-          url: '{{public_url}}data/{{id}}.json{{&key_query}}'
+          url: '{{public_url}}data/{{id}}.json' + keyParam
         }
       },
       layers: []
@@ -76,11 +79,14 @@
   <h1 style="display:none;">{{name}}</h1>
   <div id='map'></div>
   <script>
+  var keyMatch = location.search.match(/[\?\&]key=([^&]+)/i);
+  var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';    
+    
 	var map = L.map('map', { zoomControl: false });
 	new L.Control.Zoom({ position: 'topright' }).addTo(map);
 
 	var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom;
-	var url = '{{public_url}}data/{{id}}.json{{&key_query}}';
+	var url = '{{public_url}}data/{{id}}.json' + keyParam;
 	var req = new XMLHttpRequest();
 	req.overrideMimeType("application/json");
 	req.open('GET', url, true);

package/public/templates/index.tmpl

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>TileServer GL - Server for vector and raster maps with GL styles</title>
-  <link rel="stylesheet" type="text/css" href="{{public_url}}index.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}index.css" />
   <script>
     function toggle_xyz(id) {
       var el = document.getElementById(id);
@@ -110,4 +110,4 @@
     </p>
   </footer>
 </body>
-</html>
+</html>

package/public/templates/viewer.tmpl

@@ -4,14 +4,14 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css{{&key_query}}" />
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js{{&key_query}}"><\/script>'); }</script>
-  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js{{&key_query}}"><\/script>'); }</script>
-  <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
-  <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" />
+  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
+  <script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
+  <script src="{{public_url}}leaflet.js"></script>
+  <script src="{{public_url}}leaflet-hash.js"></script>
+  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -26,11 +26,15 @@
       q.indexOf('vector') >= 0 ? 'vector' :
         (q.indexOf('raster') >= 0 ? 'raster' :
           (maplibregl.supported() ? 'vector' : 'raster'));
+
+    var keyMatch = location.search.match(/[\?\&]key=([^&]+)/i);
+    var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';    
+
     if (preference == 'vector') {
-      maplibregl.setRTLTextPlugin('{{public_url}}mapbox-gl-rtl-text.js{{&key_query}}');
+      maplibregl.setRTLTextPlugin('{{public_url}}mapbox-gl-rtl-text.js' + keyParam);
       var map = new maplibregl.Map({
         container: 'map',
-        style: '{{public_url}}styles/{{id}}/style.json{{&key_query}}',
+        style: '{{public_url}}styles/{{id}}/style.json' + keyParam,
         hash: true,
         maplibreLogo: true
       });
@@ -49,7 +53,7 @@
 		new L.Control.Zoom({ position: 'topright' }).addTo(map);
 		
 		var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom;
-		var url = '{{public_url}}styles/{{id}}.json{{&key_query}}';
+		var url = '{{public_url}}styles/{{id}}.json' + keyParam;
 		var req = new XMLHttpRequest();
 		req.overrideMimeType("application/json");
 		req.open('GET', url, true);

package/src/serve_data.js

@@ -8,7 +8,7 @@ import clone from 'clone';
 import express from 'express';
 import MBTiles from '@mapbox/mbtiles';
 import Pbf from 'pbf';
-import VectorTile from '@mapbox/vector-tile';
+import { VectorTile } from '@mapbox/vector-tile';
 
 import { getTileUrls, fixTileJSONCenter } from './utils.js';
 

package/src/serve_rendered.js

@@ -15,11 +15,14 @@ import sanitize from 'sanitize-filename';
 import SphericalMercator from '@mapbox/sphericalmercator';
 import mlgl from '@maplibre/maplibre-gl-native';
 import MBTiles from '@mapbox/mbtiles';
+import polyline from '@mapbox/polyline';
 import proj4 from 'proj4';
 import request from 'request';
 import { getFontsPbf, getTileUrls, fixTileJSONCenter } from './utils.js';
 
 const FLOAT_PATTERN = '[+-]?(?:\\d+|\\d+.?\\d+)';
+const PATH_PATTERN =
+  /^((fill|stroke|width)\:[^\|]+\|)*((enc:.+)|((-?\d+\.?\d*,-?\d+\.?\d*\|)+(-?\d+\.?\d*,-?\d+\.?\d*)))/;
 const httpTester = /^(http(s)?:)?\/\//;
 
 const mercator = new SphericalMercator();
@@ -147,47 +150,67 @@ const parseCoordinates = (coordinatePair, query, transformer) => {
  * @param {Function} transformer Optional transform function.
  */
 const extractPathsFromQuery = (query, transformer) => {
+  // Initiate paths array
+  const paths = [];
   // Return an empty list if no paths have been provided
-  if (!query.path) {
-    return [];
+  if ('path' in query && !query.path) {
+    return paths;
   }
-
-  const paths = [];
-
-  // Check if multiple paths have been provided and mimic a list if it's a
-  // single path.
-  const providedPaths = Array.isArray(query.path) ? query.path : [query.path];
-
-  // Iterate through paths, parse and validate them
-  for (const provided_path of providedPaths) {
-    const currentPath = [];
-
-    // Extract coordinate-list from path
-    const pathParts = (provided_path || '').split('|');
-
-    // Iterate through coordinate-list, parse the coordinates and validate them
-    for (const pair of pathParts) {
-      // Extract coordinates from coordinate pair
-      const pairParts = pair.split(',');
-
-      // Ensure we have two coordinates
-      if (pairParts.length === 2) {
-        const pair = parseCoordinates(pairParts, query, transformer);
-
-        // Ensure coordinates could be parsed and skip them if not
-        if (pair === null) {
-          continue;
+  // Parse paths provided via path query argument
+  if ('path' in query) {
+    const providedPaths = Array.isArray(query.path) ? query.path : [query.path];
+    // Iterate through paths, parse and validate them
+    for (const providedPath of providedPaths) {
+      // Logic for pushing coords to path when path includes google polyline
+      if (
+        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);
         }
+      } else {
+        // Iterate through paths, parse and validate them
+        const currentPath = [];
+
+        // Extract coordinate-list from path
+        const pathParts = (providedPath || '').split('|');
+
+        // Iterate through coordinate-list, parse the coordinates and validate them
+        for (const pair of pathParts) {
+          // Extract coordinates from coordinate pair
+          const pairParts = pair.split(',');
+          // Ensure we have two coordinates
+          if (pairParts.length === 2) {
+            const pair = parseCoordinates(pairParts, query, transformer);
+
+            // Ensure coordinates could be parsed and skip them if not
+            if (pair === null) {
+              continue;
+            }
 
-        // Add the coordinate-pair to the current path if they are valid
-        currentPath.push(pair);
+            // Add the coordinate-pair to the current path if they are valid
+            currentPath.push(pair);
+          }
+        }
+        // Extend list of paths with current path if it contains coordinates
+        if (currentPath.length) {
+          paths.push(currentPath);
+        }
       }
     }
-
-    // Extend list of paths with current path if it contains coordinates
-    if (currentPath.length) {
-      paths.push(currentPath);
-    }
   }
   return paths;
 };
@@ -422,65 +445,109 @@ const drawMarkers = async (ctx, markers, z) => {
  * @param {number} z Map zoom level.
  */
 const drawPath = (ctx, path, query, z) => {
-  if (!path || path.length < 2) {
-    return null;
-  }
+  const renderPath = (splitPaths) => {
+    if (!path || path.length < 2) {
+      return null;
+    }
 
-  ctx.beginPath();
+    ctx.beginPath();
 
-  // 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]);
-  }
+    // 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]);
+    }
 
-  // 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();
-  }
+    // 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();
+    }
 
-  // Optionally fill drawn shape with a rgba color from query
-  if (query.fill !== undefined) {
-    ctx.fillStyle = query.fill;
-    ctx.fill();
-  }
+    // 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();
+    }
 
-  // Get line width from query and fall back to 1 if not provided
-  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;
-
-    // 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();
+    // 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;
     }
 
-    ctx.lineWidth = lineWidth;
-    ctx.strokeStyle = query.stroke || 'rgba(0,64,255,0.7)';
+    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)';
+    }
     ctx.stroke();
+  };
+
+  // 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('|'));
+    }
+  } else {
+    renderPath(decodeURIComponent(query.path).split('|'));
   }
 };
 

package/run.sh

@@ -1,37 +0,0 @@
-#!/bin/bash
-
-_term() {
-	echo "Caught signal, stopping gracefully"
-	kill -TERM "$child" 2>/dev/null
-}
-
-trap _term SIGTERM
-trap _term SIGINT
-
-xvfbMaxStartWaitTime=60
-displayNumber=99
-screenNumber=0
-
-# Delete files if they were not cleaned by last run
-rm -rf /tmp/.X11-unix /tmp/.X${displayNumber}-lock ~/xvfb.pid
-
-echo "Starting Xvfb on display ${displayNumber}"
-start-stop-daemon --start --pidfile ~/xvfb.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :${displayNumber} -screen ${screenNumber} 1024x768x24  -ac +extension GLX +render -noreset
-
-# Wait to be able to connect to the port. This will exit if it cannot in 1 minute.
-timeout ${xvfbMaxStartWaitTime} bash -c "while  ! xdpyinfo -display :${displayNumber} >/dev/null; do sleep 0.5; done"
-if [ $? -ne 0 ]; then
-  echo "Could not connect to display ${displayNumber} in ${xvfbMaxStartWaitTime} seconds time."
-  exit 1
-fi
-
-export DISPLAY=:${displayNumber}.${screenNumber}
-
-echo
-cd /data
-node /usr/src/app/ "$@" &
-child=$!
-wait "$child"
-
-start-stop-daemon --stop --retry 5 --pidfile ~/xvfb.pid # stop xvfb when exiting
-rm ~/xvfb.pid