tileserver-gl 4.6.5 → 4.7.0

package/public/templates/data.tmpl

@@ -21,7 +21,6 @@
   <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>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }

package/public/templates/index.tmpl

@@ -79,12 +79,9 @@
           <div class="details">
             <h3>{{tileJSON.name}}</h3>
             <div class="identifier">identifier: {{@key}}{{#if formatted_filesize}} | size: {{formatted_filesize}}{{/if}}</div>
-            <div class="identifier">type: {{#is_vector}}vector{{/is_vector}}{{^is_vector}}raster{{/is_vector}} data {{#if source_type}} | ext: {{source_type}}{{/if}}</div>
+            <div class="identifier">type: {{#is_vector}}vector{{/is_vector}}{{^is_vector}}raster{{/is_vector}} data {{#if sourceType}} | ext: {{sourceType}}{{/if}}</div>
             <p class="services">
               services: <a href="{{public_url}}data/{{@key}}.json{{&../key_query}}">TileJSON</a>
-              {{#if wmts_link}}
-                | <a href="{{&wmts_link}}">WMTS</a>
-              {{/if}}
               {{#if xyz_link}}
                 | <a href="#" onclick="return toggle_xyz('xyz_data_{{@key}}');">XYZ</a>
                   <input id="xyz_data_{{@key}}" type="text" value="{{&xyz_link}}" style="display:none;" />

package/public/templates/viewer.tmpl

@@ -11,7 +11,6 @@
   <script src="{{public_url}}maplibre-gl-inspect.min.js{{&key_query}}"></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>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }

package/src/healthcheck.js

@@ -1,9 +1,9 @@
 import * as http from 'http';
-var options = {
+const options = {
   timeout: 2000,
 };
-var url = 'http://localhost:8080/health';
-var request = http.request(url, options, (res) => {
+const url = 'http://localhost:8080/health';
+const request = http.request(url, options, (res) => {
   console.log(`STATUS: ${res.statusCode}`);
   if (res.statusCode == 200) {
     process.exit(0);

package/src/main.js

@@ -5,11 +5,11 @@
 import fs from 'node:fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import request from 'request';
+import axios from 'axios';
 import { server } from './server.js';
 import MBTiles from '@mapbox/mbtiles';
 import { isValidHttpUrl } from './utils.js';
-import { PMtilesOpen, GetPMtilesInfo } from './pmtiles_adapter.js';
+import { openPMtiles, getPMtilesInfo } from './pmtiles_adapter.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -62,14 +62,14 @@ const opts = program.opts();
 
 console.log(`Starting ${packageJson.name} v${packageJson.version}`);
 
-const StartServer = (configPath, config) => {
+const startServer = (configPath, config) => {
   let publicUrl = opts.public_url;
   if (publicUrl && publicUrl.lastIndexOf('/') !== publicUrl.length - 1) {
     publicUrl += '/';
   }
   return server({
-    configPath: configPath,
-    config: config,
+    configPath,
+    config,
     bind: opts.bind,
     port: opts.port,
     cors: opts.cors,
@@ -77,11 +77,11 @@ const StartServer = (configPath, config) => {
     silent: opts.silent,
     logFile: opts.log_file,
     logFormat: opts.log_format,
-    publicUrl: publicUrl,
+    publicUrl,
   });
 };
 
-const StartWithInputFile = async (inputFile) => {
+const startWithInputFile = async (inputFile) => {
   console.log(`[INFO] Automatically creating config file for ${inputFile}`);
   console.log(`[INFO] Only a basic preview style will be used.`);
   console.log(
@@ -123,8 +123,8 @@ const StartWithInputFile = async (inputFile) => {
 
   const extension = inputFile.split('.').pop().toLowerCase();
   if (extension === 'pmtiles') {
-    let FileOpenInfo = PMtilesOpen(inputFile);
-    const metadata = await GetPMtilesInfo(FileOpenInfo);
+    const fileOpenInfo = openPMtiles(inputFile);
+    const metadata = await getPMtilesInfo(fileOpenInfo);
 
     if (
       metadata.format === 'pbf' &&
@@ -174,7 +174,7 @@ const StartWithInputFile = async (inputFile) => {
       console.log('Run with --verbose to see the config file here.');
     }
 
-    return StartServer(null, config);
+    return startServer(null, config);
   } else {
     if (isValidHttpUrl(inputFile)) {
       console.log(
@@ -215,7 +215,7 @@ const StartWithInputFile = async (inputFile) => {
               config['styles'][styleName] = {
                 style: styleFileRel,
                 tilejson: {
-                  bounds: bounds,
+                  bounds,
                 },
               };
             }
@@ -235,13 +235,13 @@ const StartWithInputFile = async (inputFile) => {
           console.log('Run with --verbose to see the config file here.');
         }
 
-        return StartServer(null, config);
+        return startServer(null, config);
       });
     });
   }
 };
 
-fs.stat(path.resolve(opts.config), (err, stats) => {
+fs.stat(path.resolve(opts.config), async (err, stats) => {
   if (err || !stats.isFile() || stats.size === 0) {
     let inputFile;
     if (opts.file) {
@@ -251,7 +251,7 @@ fs.stat(path.resolve(opts.config), (err, stats) => {
     }
 
     if (inputFile) {
-      return StartWithInputFile(inputFile);
+      return startWithInputFile(inputFile);
     } else {
       // try to find in the cwd
       const files = fs.readdirSync(process.cwd());
@@ -266,20 +266,34 @@ fs.stat(path.resolve(opts.config), (err, stats) => {
       }
       if (inputFile) {
         console.log(`No input file specified, using ${inputFile}`);
-        return StartWithInputFile(inputFile);
+        return startWithInputFile(inputFile);
       } else {
         const url =
           'https://github.com/maptiler/tileserver-gl/releases/download/v1.3.0/zurich_switzerland.mbtiles';
         const filename = 'zurich_switzerland.mbtiles';
-        const stream = fs.createWriteStream(filename);
+        const writer = fs.createWriteStream(filename);
         console.log(`No input file found`);
         console.log(`[DEMO] Downloading sample data (${filename}) from ${url}`);
-        stream.on('finish', () => StartWithInputFile(filename));
-        return request.get(url).pipe(stream);
+
+        try {
+          const response = await axios({
+            url,
+            method: 'GET',
+            responseType: 'stream',
+          });
+
+          response.data.pipe(writer);
+          writer.on('finish', () => startWithInputFile(filename));
+          writer.on('error', (err) =>
+            console.error(`Error writing file: ${err}`),
+          );
+        } catch (error) {
+          console.error(`Error downloading file: ${error}`);
+        }
       }
     }
   } else {
     console.log(`Using specified config file from ${opts.config}`);
-    return StartServer(opts.config, null);
+    return startServer(opts.config, null);
   }
 });

package/src/pmtiles_adapter.js

@@ -11,7 +11,7 @@ class PMTilesFileSource {
   }
   async getBytes(offset, length) {
     const buffer = Buffer.alloc(length);
-    await ReadFileBytes(this.fd, buffer, offset);
+    await readFileBytes(this.fd, buffer, offset);
     const ab = buffer.buffer.slice(
       buffer.byteOffset,
       buffer.byteOffset + buffer.byteLength,
@@ -26,7 +26,7 @@ class PMTilesFileSource {
  * @param buffer
  * @param offset
  */
-async function ReadFileBytes(fd, buffer, offset) {
+async function readFileBytes(fd, buffer, offset) {
   return new Promise((resolve, reject) => {
     fs.read(fd, buffer, 0, buffer.length, offset, (err) => {
       if (err) {
@@ -41,7 +41,7 @@ async function ReadFileBytes(fd, buffer, offset) {
  *
  * @param FilePath
  */
-export function PMtilesOpen(FilePath) {
+export function openPMtiles(FilePath) {
   let pmtiles = undefined;
 
   if (isValidHttpUrl(FilePath)) {
@@ -59,12 +59,12 @@ export function PMtilesOpen(FilePath) {
  *
  * @param pmtiles
  */
-export async function GetPMtilesInfo(pmtiles) {
+export async function getPMtilesInfo(pmtiles) {
   const header = await pmtiles.getHeader();
   const metadata = await pmtiles.getMetadata();
 
   //Add missing metadata from header
-  metadata['format'] = GetPmtilesTileType(header.tileType).type;
+  metadata['format'] = getPmtilesTileType(header.tileType).type;
   metadata['minzoom'] = header.minZoom;
   metadata['maxzoom'] = header.maxZoom;
 
@@ -103,23 +103,23 @@ export async function GetPMtilesInfo(pmtiles) {
  * @param x
  * @param y
  */
-export async function GetPMtilesTile(pmtiles, z, x, y) {
+export async function getPMtilesTile(pmtiles, z, x, y) {
   const header = await pmtiles.getHeader();
-  const TileType = GetPmtilesTileType(header.tileType);
+  const tileType = getPmtilesTileType(header.tileType);
   let zxyTile = await pmtiles.getZxy(z, x, y);
   if (zxyTile && zxyTile.data) {
     zxyTile = Buffer.from(zxyTile.data);
   } else {
     zxyTile = undefined;
   }
-  return { data: zxyTile, header: TileType.header };
+  return { data: zxyTile, header: tileType.header };
 }
 
 /**
  *
  * @param typenum
  */
-function GetPmtilesTileType(typenum) {
+function getPmtilesTileType(typenum) {
   let head = {};
   let tileType;
   switch (typenum) {

package/src/render.js

@@ -0,0 +1,303 @@
+'use strict';
+
+import { createCanvas, Image } from 'canvas';
+
+import SphericalMercator from '@mapbox/sphericalmercator';
+
+const mercator = new SphericalMercator();
+
+/**
+ * Transforms coordinates to pixels.
+ * @param {List[Number]} ll Longitude/Latitude coordinate pair.
+ * @param {number} zoom Map zoom level.
+ */
+const precisePx = (ll, zoom) => {
+  const px = mercator.px(ll, 20);
+  const scale = Math.pow(2, zoom - 20);
+  return [px[0] * scale, px[1] * scale];
+};
+
+/**
+ * Draws a marker in canvas context.
+ * @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) => {
+    const img = new Image();
+    const pixelCoords = precisePx(marker.location, z);
+
+    const getMarkerCoordinates = (imageWidth, imageHeight, scale) => {
+      // Images are placed with their top-left corner at the provided location
+      // within the canvas but we expect icons to be centered and above it.
+
+      // Substract half of the images width from the x-coordinate to center
+      // the image in relation to the provided location
+      let xCoordinate = pixelCoords[0] - imageWidth / 2;
+      // Substract the images height from the y-coordinate to place it above
+      // the provided location
+      let yCoordinate = pixelCoords[1] - imageHeight;
+
+      // Since image placement is dependent on the size offsets have to be
+      // 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;
+      }
+      if (marker.offsetY) {
+        yCoordinate = yCoordinate + marker.offsetY * scale;
+      }
+
+      return {
+        x: xCoordinate,
+        y: yCoordinate,
+      };
+    };
+
+    const drawOnCanvas = () => {
+      // Check if the images should be resized before beeing drawn
+      const defaultScale = 1;
+      const scale = marker.scale ? marker.scale : defaultScale;
+
+      // Calculate scaled image sizes
+      const imageWidth = img.width * scale;
+      const imageHeight = img.height * scale;
+
+      // Pass the desired sizes to get correlating coordinates
+      const coords = getMarkerCoordinates(imageWidth, imageHeight, scale);
+
+      // Draw the image on canvas
+      if (scale != defaultScale) {
+        ctx.drawImage(img, coords.x, coords.y, imageWidth, imageHeight);
+      } else {
+        ctx.drawImage(img, coords.x, coords.y);
+      }
+      // Resolve the promise when image has been drawn
+      resolve();
+    };
+
+    img.onload = drawOnCanvas;
+    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 {List[Object]} markers Marker objects parsed by extractMarkersFromQuery.
+ * @param {number} z Map zoom level.
+ */
+const drawMarkers = async (ctx, markers, z) => {
+  const markerPromises = [];
+
+  for (const marker of markers) {
+    // Begin drawing marker
+    markerPromises.push(drawMarker(ctx, marker, 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 {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, pathQuery, z) => {
+  const splitPaths = pathQuery.split('|');
+
+  if (!path || path.length < 2) {
+    return null;
+  }
+
+  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]);
+  }
+
+  // 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
+  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 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;
+  }
+
+  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 {
+    ctx.strokeStyle = 'rgba(0,64,255,0.7)';
+  }
+  ctx.stroke();
+};
+
+export 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;
+  }
+
+  const center = precisePx([x, y], z);
+
+  const mapHeight = 512 * (1 << z);
+  const maxEdge = center[1] + h / 2;
+  const minEdge = center[1] - h / 2;
+  if (maxEdge > mapHeight) {
+    center[1] -= maxEdge - mapHeight;
+  } else if (minEdge < 0) {
+    center[1] -= minEdge;
+  }
+
+  const canvas = createCanvas(scale * w, scale * h);
+  const ctx = canvas.getContext('2d');
+  ctx.scale(scale, scale);
+  if (bearing) {
+    ctx.translate(w / 2, h / 2);
+    ctx.rotate((-bearing / 180) * Math.PI);
+    ctx.translate(-center[0], -center[1]);
+  } else {
+    // optimized path
+    ctx.translate(-center[0] + w / 2, -center[1] + h / 2);
+  }
+
+  // Draw provided paths if any
+  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);
+
+  return canvas.toBuffer();
+};
+
+export const renderWatermark = (width, height, scale, text) => {
+  const canvas = createCanvas(scale * width, scale * height);
+  const ctx = canvas.getContext('2d');
+  ctx.scale(scale, scale);
+
+  ctx.font = '10px sans-serif';
+  ctx.strokeWidth = '1px';
+  ctx.strokeStyle = 'rgba(255,255,255,.4)';
+  ctx.strokeText(text, 5, height - 5);
+  ctx.fillStyle = 'rgba(0,0,0,.4)';
+  ctx.fillText(text, 5, height - 5);
+
+  return canvas;
+};
+
+export const renderAttribution = (width, height, scale, text) => {
+  const canvas = createCanvas(scale * width, scale * height);
+  const ctx = canvas.getContext('2d');
+  ctx.scale(scale, scale);
+
+  ctx.font = '10px sans-serif';
+  const textMetrics = ctx.measureText(text);
+  const textWidth = textMetrics.width;
+  const textHeight = 14;
+
+  const padding = 6;
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+  ctx.fillRect(
+    width - textWidth - padding,
+    height - textHeight - padding,
+    textWidth + padding,
+    textHeight + padding,
+  );
+  ctx.fillStyle = 'rgba(0,0,0,.8)';
+  ctx.fillText(text, width - textWidth - padding / 2, height - textHeight + 8);
+
+  return canvas;
+};

package/src/serve_data.js

@@ -12,9 +12,9 @@ import { VectorTile } from '@mapbox/vector-tile';
 
 import { getTileUrls, isValidHttpUrl, fixTileJSONCenter } from './utils.js';
 import {
-  PMtilesOpen,
-  GetPMtilesInfo,
-  GetPMtilesTile,
+  openPMtiles,
+  getPMtilesInfo,
+  getPMtilesTile,
 } from './pmtiles_adapter.js';
 
 export const serve_data = {
@@ -53,8 +53,8 @@ export const serve_data = {
         ) {
           return res.status(404).send('Out of bounds');
         }
-        if (item.source_type === 'pmtiles') {
-          let tileinfo = await GetPMtilesTile(item.source, z, x, y);
+        if (item.sourceType === 'pmtiles') {
+          let tileinfo = await getPMtilesTile(item.source, z, x, y);
           if (tileinfo == undefined || tileinfo.data == undefined) {
             return res.status(404).send('Not found');
           } else {
@@ -99,7 +99,7 @@ export const serve_data = {
 
             return res.status(200).send(data);
           }
-        } else if (item.source_type === 'mbtiles') {
+        } else if (item.sourceType === 'mbtiles') {
           item.source.getTile(z, x, y, (err, data, headers) => {
             let isGzipped;
             if (err) {
@@ -223,11 +223,11 @@ export const serve_data = {
     }
 
     let source;
-    let source_type;
+    let sourceType;
     if (inputType === 'pmtiles') {
-      source = PMtilesOpen(inputFile);
-      source_type = 'pmtiles';
-      const metadata = await GetPMtilesInfo(source);
+      source = openPMtiles(inputFile);
+      sourceType = 'pmtiles';
+      const metadata = await getPMtilesInfo(source);
 
       tileJSON['name'] = id;
       tileJSON['format'] = 'pbf';
@@ -245,7 +245,7 @@ export const serve_data = {
         tileJSON = options.dataDecoratorFunc(id, 'tilejson', tileJSON);
       }
     } else if (inputType === 'mbtiles') {
-      source_type = 'mbtiles';
+      sourceType = 'mbtiles';
       const sourceInfoPromise = new Promise((resolve, reject) => {
         source = new MBTiles(inputFile + '?mode=ro', (err) => {
           if (err) {
@@ -285,7 +285,7 @@ export const serve_data = {
       tileJSON,
       publicUrl,
       source,
-      source_type,
+      sourceType,
     };
   },
 };