tileserver-gl 5.7.0-pre.1 → 5.7.0

package/public/templates/data.tmpl

@@ -7,11 +7,9 @@
   {{#use_maplibre}}
   <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 src="{{public_url}}maplibre-gl.js{{&key_query}}"></script>
-  <script src="{{public_url}}maplibre-gl-inspect.js{{&key_query}}"></script>
-  {{^is_light}}
-  <script src="{{public_url}}elevation-control.js{{&key_query}}"></script>
-  {{/is_light}}
+  <script type="importmap">
+    { "imports": { "maplibre-gl": "{{public_url}}maplibre-gl.mjs{{&key_query}}" } }
+  </script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     {{^is_terrain}}
@@ -58,7 +56,15 @@
   <div id="layerList"></div>
   <pre id="propertyList"></pre>
   {{/is_terrain}}
-  <script>
+  <script type="module">
+    import * as maplibregl from 'maplibre-gl';
+    {{^is_terrain}}
+    import MaplibreInspect from '{{public_url}}maplibre-gl-inspect.mjs{{&key_query}}';
+    {{/is_terrain}}
+    {{^is_light}}
+    import ElevationInfoControl from '{{public_url}}elevation-control.js{{&key_query}}';
+    {{/is_light}}
+
     var keyMatch = location.search.match(/[\?\&]key=([^&]+)/i);
     var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';
 

package/public/templates/viewer.tmpl

@@ -7,8 +7,9 @@
   <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 src="{{public_url}}maplibre-gl.js{{&key_query}}"></script>
-  <script src="{{public_url}}maplibre-gl-inspect.js{{&key_query}}"></script>
+  <script type="importmap">
+    { "imports": { "maplibre-gl": "{{public_url}}maplibre-gl.mjs{{&key_query}}" } }
+  </script>
   <script src="{{public_url}}leaflet.js{{&key_query}}"></script>
   <script src="{{public_url}}leaflet-hash.js{{&key_query}}"></script>
   <style>
@@ -31,12 +32,15 @@
 <body>
   <h1 style="display:none;">{{name}}</h1>
   <div id='map'></div>
-  <script>
+  <script type="module">
+    import * as maplibregl from 'maplibre-gl';
+    import MaplibreInspect from '{{public_url}}maplibre-gl-inspect.mjs{{&key_query}}';
+
     function isWebglSupported() {
-        if (window.WebGLRenderingContext) {
+        if (window.WebGL2RenderingContext) {
             const canvas = document.createElement('canvas');
             try {
-                const context = canvas.getContext('webgl2') || canvas.getContext('webgl');
+                const context = canvas.getContext('webgl2');
                 if (context && typeof context.getParameter == 'function') {
                     return true;
                 }
@@ -45,7 +49,7 @@
             }
             return false;
         }
-        // WebGL not supported
+        // WebGL2 not supported (required by maplibre-gl v6+)
         return false;
     }
     var q = (location.search || '').substr(1).split('&');
@@ -107,7 +111,7 @@
         req.open('GET', url, true);
         req.onload = function() {
             var jsonResponse = JSON.parse(req.responseText);
-            for (key in jsonResponse) {
+            for (var key in jsonResponse) {
               var keyl = key.toLowerCase();
                 switch(keyl) {
                   case "tiles":
@@ -125,7 +129,7 @@
                 }
             }
 
-            for (tile_url in tile_urls) {
+            for (var tile_url in tile_urls) {
                 var leafletUrl = tile_urls[tile_url];
                 {{#leaflet_retina}}
                 // Inject {r} for Leaflet retina support without modifying TileJSON directly.

package/src/render_mode.js

@@ -18,3 +18,21 @@ export function getMapLibreRenderZoom(zoom, logicalWidth, mode) {
 
   throw new Error(`Unsupported render mode: ${mode}`);
 }
+
+/**
+ * Calculates the TileServer zoom MapLibre Native effectively uses for a
+ * static-map overlay. Horizontal world copies can wrap, but the world must
+ * fill the viewport vertically. The 256px zoom-zero render has a dedicated
+ * resize path in serve_rendered.
+ * @param {number} zoom Requested TileServer zoom level.
+ * @param {number} logicalWidth Unscaled request width in pixels.
+ * @param {number} logicalHeight Unscaled request height in pixels.
+ * @returns {number} Effective TileServer zoom level.
+ */
+export function getStaticOverlayZoom(zoom, logicalWidth, logicalHeight) {
+  const minimumViewportZoom = Math.log2(logicalHeight / 256);
+  if (zoom === 0 && logicalWidth === 256) {
+    return Math.max(0, minimumViewportZoom);
+  }
+  return Math.max(1, zoom, minimumViewportZoom);
+}

package/src/serve_data.js

@@ -133,9 +133,13 @@ export const serve_data = {
 
       let data = fetchTile.data;
       let headers = fetchTile.headers;
-      let isGzipped = data.slice(0, 2).indexOf(Buffer.from([0x1f, 0x8b])) === 0;
 
-      if (isGzipped) {
+      const isGzipped =
+        data.slice(0, 2).indexOf(Buffer.from([0x1f, 0x8b])) === 0;
+      const serveGzipped =
+        isGzipped && format === 'pbf' && !options.dataDecoratorFunc;
+
+      if (isGzipped && !serveGzipped) {
         data = await gunzipP(data);
       }
 
@@ -179,7 +183,9 @@ export const serve_data = {
       headers['Content-Encoding'] = 'gzip';
       res.set(headers);
 
-      data = await gzipP(data);
+      if (!serveGzipped) {
+        data = await gzipP(data);
+      }
 
       if (metricsModule) {
         metricsModule.tilesServedTotal.inc({

package/src/serve_rendered.js

@@ -40,7 +40,7 @@ import {
 } from './utils.js';
 import { openPMtiles, getPMtilesInfo } from './pmtiles_adapter.js';
 import { renderOverlay, renderWatermark, renderAttribution } from './render.js';
-import { getMapLibreRenderZoom } from './render_mode.js';
+import { getMapLibreRenderZoom, getStaticOverlayZoom } from './render_mode.js';
 import fsp from 'node:fs/promises';
 import { existsP, gunzipP } from './promises.js';
 import { openMbTilesWrapper } from './mbtiles_wrapper.js';
@@ -1069,9 +1069,10 @@ async function handleStaticRequest(
 
     const paths = extractPathsFromQuery(req.query, transformer);
     const markers = extractMarkersFromQuery(req.query, options, transformer);
+    const overlayZoom = getStaticOverlayZoom(z, parsedWidth, parsedHeight);
     // prettier-ignore
     const overlay = await renderOverlay(
-     z, x, y, bearing, pitch, parsedWidth, parsedHeight, scale, paths, markers, req.query,
+     overlayZoom, x, y, bearing, pitch, parsedWidth, parsedHeight, scale, paths, markers, req.query,
    );
 
     // prettier-ignore

package/test/render_mode.js

@@ -1,5 +1,8 @@
 import assert from 'node:assert/strict';
-import { getMapLibreRenderZoom } from '../src/render_mode.js';
+import {
+  getMapLibreRenderZoom,
+  getStaticOverlayZoom,
+} from '../src/render_mode.js';
 
 describe('MapLibre render zoom', function () {
   it('uses the overlay-aligned zoom for a 512px static map', function () {
@@ -25,3 +28,21 @@ describe('MapLibre render zoom', function () {
     );
   });
 });
+
+describe('Static overlay zoom', function () {
+  it('raises the zoom when the world would not fill the viewport height', function () {
+    assert.equal(getStaticOverlayZoom(1, 600, 600), Math.log2(600 / 256));
+  });
+
+  it('does not raise the zoom for a wide but short viewport', function () {
+    assert.equal(getStaticOverlayZoom(1, 1000, 500), 1);
+  });
+
+  it('preserves a requested zoom above the viewport minimum', function () {
+    assert.equal(getStaticOverlayZoom(12, 1000, 1000), 12);
+  });
+
+  it('preserves the dedicated 256px zoom-zero render path', function () {
+    assert.equal(getStaticOverlayZoom(0, 256, 256), 0);
+  });
+});

package/test/static.js

@@ -70,6 +70,26 @@ describe('Static endpoints', function () {
         testStatic(prefix, '8,40,2@10/300x150', 'png', 200, 3);
         testStatic(prefix, '8,40,2@10.3,20.4/300x300', 'png', 200);
         testStatic(prefix, '0,0,2@390,120/300x300', 'png', 200);
+
+        it('keeps overlays aligned when a large viewport raises the effective zoom', async function () {
+          const marker = '8.5432,47.3669|marker-icon.png|scale:0.1';
+          const requestedZoom = await supertest(app)
+            .get(`/styles/${prefix}/static/8.5432,47.3669,1/600x600.png`)
+            .query({ marker })
+            .expect(200);
+          const minimumZoom = Math.log2(600 / 256);
+          const effectiveZoom = await supertest(app)
+            .get(
+              `/styles/${prefix}/static/8.5432,47.3669,${minimumZoom}/600x600.png`,
+            )
+            .query({ marker })
+            .expect(200);
+
+          assert.ok(
+            requestedZoom.body.equals(effectiveZoom.body),
+            'expected requested and effective zoom renders to match',
+          );
+        });
       });
     });
 

package/test/static_images.js

@@ -69,6 +69,11 @@ const tests = [
     // Test multiple markers with scale and offset options
     url: '/styles/test-style/static/8.5375,47.379,12/400x300.png?marker=8.531,47.38|marker-icon.png|scale:0.8&marker=8.545,47.375|marker-icon-2x.png|offset:5,-10',
   },
+  {
+    name: 'static-marker-low-zoom-large-viewport',
+    // Test marker alignment when the viewport raises the effective low zoom
+    url: '/styles/test-style/static/8.5432,47.3669,1/1000x1000.png?marker=8.5432,47.3669|marker-icon.png|scale:0.8|offset:0,30',
+  },
   {
     name: 'static-bbox',
     // Test area-based map rendering using a bounding box (bbox)

package/test/tiles_data_compression.js

@@ -0,0 +1,145 @@
+import { createHook } from 'node:async_hooks';
+import { once } from 'node:events';
+import http from 'node:http';
+import { gzipSync, gunzipSync } from 'node:zlib';
+import { expect } from 'chai';
+import { PbfWriter } from 'pbf';
+import { serve_data } from '../src/serve_data.js';
+
+/**
+ * Creates an MVT with one point at the center of the tile.
+ * @param {number} id Feature ID.
+ * @returns {Buffer} Encoded vector tile.
+ */
+function createTile(id) {
+  const feature = new PbfWriter();
+  feature.writeVarintField(1, id);
+  feature.writeVarintField(3, 1);
+  // MoveTo one point at (2048, 2048), zigzag-encoded for a 4096-unit tile.
+  feature.writePackedVarint(4, [9, 4096, 4096]);
+  const layer = new PbfWriter();
+  layer.writeStringField(1, 'test');
+  layer.writeBytesField(2, feature.finish());
+  layer.writeVarintField(5, 4096);
+  layer.writeVarintField(15, 2);
+  const tile = new PbfWriter();
+  tile.writeBytesField(3, layer.finish());
+  return Buffer.from(tile.finish());
+}
+
+const tile = createTile(1);
+const gzippedTile = gzipSync(tile, { level: 0 });
+
+/**
+ * Requests a tile without decompressing the HTTP response.
+ * @param {Buffer} data Bytes returned by the MBTiles source.
+ * @param {object} [options] Tile server options.
+ * @param {string} [format] Requested output format.
+ * @returns {Promise<object>} Raw response body and headers.
+ */
+
+async function requestTile(data, options = {}, format = 'pbf') {
+  const repo = {
+    test: {
+      sourceType: 'mbtiles',
+      source: { getTile: (_z, _x, _y, callback) => callback(null, data, {}) },
+      tileJSON: { format: 'pbf', minzoom: 0, maxzoom: 0 },
+    },
+  };
+
+  const app = serve_data.init(options, repo, {});
+  // Use a free loopback port to inspect the raw gzip response bytes.
+  const server = app.listen(0, '127.0.0.1');
+
+  try {
+    await once(server, 'listening');
+    return await new Promise((resolve, reject) => {
+      const request = http.get(
+        {
+          hostname: '127.0.0.1',
+          port: server.address().port,
+          path: `/test/0/0/0.${format}`,
+          agent: false,
+        },
+        (res) => {
+          const chunks = [];
+          res.on('data', (chunk) => chunks.push(chunk));
+          res.on('error', reject);
+          res.on('end', () =>
+            resolve({
+              status: res.statusCode,
+              headers: res.headers,
+              body: Buffer.concat(chunks),
+            }),
+          );
+        },
+      );
+      request.on('error', reject);
+    });
+  } finally {
+    if (server.listening) {
+      await new Promise((resolve) => server.close(resolve));
+    }
+  }
+}
+
+describe('Vector tile compression', function () {
+  it('returns an existing gzip buffer without decompressing or recompressing it', async function () {
+    let zlibOperations = 0;
+    const hook = createHook({
+      init(_asyncId, type) {
+        if (type === 'ZLIB') zlibOperations += 1;
+      },
+    });
+    hook.enable();
+    let response;
+    try {
+      response = await requestTile(gzippedTile);
+    } finally {
+      hook.disable();
+    }
+
+    expect(response.status).to.equal(200);
+    expect(response.headers['content-type']).to.equal('application/x-protobuf');
+    expect(response.headers['content-encoding']).to.equal('gzip');
+    expect(zlibOperations).to.equal(0);
+    expect(response.body).to.deep.equal(gzippedTile);
+  });
+
+  it('still decompresses, decorates and recompresses gzip tiles', async function () {
+    const decoratedTile = createTile(2);
+    const response = await requestTile(gzippedTile, {
+      dataDecoratorFunc: async (id, type, data) => {
+        expect([id, type]).to.deep.equal(['test', 'data']);
+        expect(data).to.deep.equal(tile);
+        return decoratedTile;
+      },
+    });
+
+    expect(response.status).to.equal(200);
+    expect(response.headers['content-encoding']).to.equal('gzip');
+    expect(gunzipSync(response.body)).to.deep.equal(decoratedTile);
+  });
+
+  it('still compresses uncompressed PBF tiles', async function () {
+    const response = await requestTile(tile);
+
+    expect(response.status).to.equal(200);
+    expect(response.headers['content-encoding']).to.equal('gzip');
+    expect(gunzipSync(response.body)).to.deep.equal(tile);
+  });
+
+  it('still converts gzip PBF tiles to GeoJSON', async function () {
+    const response = await requestTile(gzippedTile, {}, 'geojson');
+
+    expect(response.status).to.equal(200);
+    expect(response.headers['content-type']).to.match(/^application\/json/);
+    expect(response.headers['content-encoding']).to.equal('gzip');
+
+    const geojson = JSON.parse(gunzipSync(response.body).toString());
+
+    expect(geojson.type).to.equal('FeatureCollection');
+    expect(geojson.features).to.have.lengthOf(1);
+    expect(geojson.features[0].id).to.equal(1);
+  });
+});