maptiler · Caerbannog · Nov 20, 2023 · Nov 20, 2023 · Nov 20, 2023
diff --git a/public/resources/gallery/config.json b/public/resources/gallery/config.json
@@ -0,0 +1,32 @@
+{
+  "options": {
+    "paths": {
+      "root": "/usr/src/app/node_modules/tileserver-gl-styles",
+      "fonts": "fonts",
+      "styles": "styles",
+      "mbtiles": "/data",
+      "pmtiles": "/data"
+    },
+    "staticAttributionText": "© OpenStreetMap",
+    "watermark": "THIS IS A TEST WATERMARK",
+    "allowRemoteMarkerIcons": true
+  },
+  "styles": {
+    "basic-preview": {
+      "style": "basic-preview/style.json",
+      "tilejson": {
+        "bounds": [
+          8.275,
+          47.225,
+          8.8,
+          47.533
+        ]
+      }
+    }
+  },
+  "data": {
+    "v3": {
+      "mbtiles": "/usr/src/app/public/resources/gallery/zurich_switzerland.mbtiles"
+    }
+  }
+}
diff --git a/public/resources/gallery/encoded-path-auto.png b/public/resources/gallery/encoded-path-auto.png
diff --git a/public/resources/gallery/gallery.html b/public/resources/gallery/gallery.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Tileserver-gl tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script>
+const module = {};
+  </script>
+  <script src="pixelmatch-5.3.0.0.js"></script>
+  <style>
+img, canvas {
+  margin: 0 6px;
+}
+  </style>
+</head>
+<body onload="loaded()">
+<h1>Tileserver-gl tests</h1>
+<div>A fast way to visually check for regressions. Each row shows: a test picture, the expected output, then the difference with <a href="https://github.com/mapbox/pixelmatch#pixelmatch">pixelmatch</a>.</div>
+<div>Put <i>zurich_switzerland.mbtiles</i> in public/resources/gallery/ then run with:</div>
+<pre>docker build . && docker run --rm -it -p 8080:8080 $(docker build -q .) -V --config /usr/src/app/public/resources/gallery/config.json</pre>
+<div>This page is then served at <a href="http://0.0.0.0:8080/gallery/gallery.html">http://0.0.0.0:8080/gallery/gallery.html</a></div>
+
+<h2>Interactive vector</h2>
+<iframe src="/styles/basic-preview/#11/47.379/8.5375" width="400" height="300"></iframe>
+<img src="interactive-vector.png" />
+
+<h2>Interactive raster</h2>
+<iframe src="/styles/basic-preview/?raster#12/47.379/8.5375" width="400" height="300"></iframe>
+<img src="interactive-raster.png" />
+
+<h1 id="result">Loading...</h1>
+
+<script>
+const width = 400;
+const height = 300;
+
+const tests = [
+  ['static-lat-lng', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png'],
+  ['static-bearing', '/styles/basic-preview/static/8.5375,47.379,12@180/400x300.png'],
+  ['static-bearing-pitch', '/styles/basic-preview/static/8.5375,47.379,12@15,80/400x300.png'],
+  ['static-pixel-ratio-2x', '/styles/basic-preview/static/8.5375,47.379,11/[email protected]'],
+  ['path-auto', '/styles/basic-preview/static/auto/400x300.png?fill=%23ff000080&path=8.53180,47.38713|8.53841,47.38248|8.53320,47.37457'],
+  ['encoded-path-auto', '/styles/basic-preview/static/auto/400x300.png?stroke=red&width=5&path=enc:wwg`Hyu}r@fNgn@hKyh@rR{ZlP{YrJmM`PJhNbH`P`VjUbNfJ|LzM~TtLnKxQZ'],
+  ['linecap-linejoin-round-round', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png?width=30&linejoin=round&linecap=round&path=enc:uhd`Hqk_s@kiA}nAnfAqpA'],
+  ['linecap-linejoin-bevel-square', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png?width=30&linejoin=bevel&linecap=square&path=enc:uhd`Hqk_s@kiA}nAnfAqpA'],
+  ['markers', '/styles/basic-preview/static/8.5375,47.379,12/400x300.png?marker=8.53180,47.38713|http://localhost:8080/images/logo.png|scale:0.3&marker=8.53180,47.37457|http://localhost:8080/images/logo.png|scale:0.3'],
+];
+
+function getImgData(id) {
+  const img = document.getElementById(id);
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  return ctx.getImageData(0, 0, img.width, img.height);
+}
+
+function compare(a, b, c) {
+  const img1 = getImgData(a);
+  const img2 = getImgData(b);
+
+  const cc = document.getElementById(c);
+  const ctx = cc.getContext('2d');
+  const diff = ctx.createImageData(width, height);
+  const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.1 });
+  ctx.putImageData(diff, 0, 0);
+
+  return numDiffPixels;
+}
+
+for (const [id, url] of tests) {
+  const h2 = document.createElement('h2');
+  h2.innerText = id;
+  const a = document.createElement('img');
+  a.src = url;
+  a.id = 'a_' + id;
+  const b = document.createElement('img');
+  b.src = id + '.png';
+  b.id = 'b_' + id;
+  const c = document.createElement('canvas');
+  c.width = width;
+  c.height = height;
+  c.id = 'c_' + id;
+  document.body.appendChild(h2);
+  document.body.appendChild(a);
+  document.body.appendChild(b);
+  document.body.appendChild(c);
+}
+console.log('Init done.');
+
+function loaded() {
+  console.log('Loading done.');
+
+  let success = true;
+  for (const [id] of tests) {
+    const numDiffPixels = compare('a_' + id, 'b_' + id, 'c_' + id);
+    if (numDiffPixels > 0) {
+      success = false;
+    }
+  }
+  const r = document.getElementById('result');
+  r.innerText = success ? 'Success' : 'Failure';
+  r.style.color = success ? 'green' : 'red';
+
+  console.log('Compare done.');
+}
+</script>
+
+<br>
+<br>
+<br>
+More tests we could write:
+<br>
+- endpoint /styles/{id}/static/{minx},{miny},{maxx},{maxy}/{width}x{height}[@2x].{format}  (area-based)
+<br>
+- arg latlng - indicates coordinates are in lat,lng
+<br>
+- padding
+<br>
+- border + borderwidth
+<br>
+- fill|stroke|width global vs local
+
+</body>
+</html>
diff --git a/public/resources/gallery/interactive-raster.png b/public/resources/gallery/interactive-raster.png
diff --git a/public/resources/gallery/interactive-vector.png b/public/resources/gallery/interactive-vector.png
diff --git a/public/resources/gallery/linecap-linejoin-bevel-square.png b/public/resources/gallery/linecap-linejoin-bevel-square.png
diff --git a/public/resources/gallery/linecap-linejoin-round-round.png b/public/resources/gallery/linecap-linejoin-round-round.png
diff --git a/public/resources/gallery/markers.png b/public/resources/gallery/markers.png
diff --git a/public/resources/gallery/path-auto.png b/public/resources/gallery/path-auto.png
diff --git a/public/resources/gallery/pixelmatch-5.3.0.0.js b/public/resources/gallery/pixelmatch-5.3.0.0.js
diff --git a/public/resources/gallery/static-bearing-pitch.png b/public/resources/gallery/static-bearing-pitch.png
diff --git a/public/resources/gallery/static-bearing.png b/public/resources/gallery/static-bearing.png
diff --git a/public/resources/gallery/static-lat-lng.png b/public/resources/gallery/static-lat-lng.png
diff --git a/public/resources/gallery/static-pixel-ratio-2x.png b/public/resources/gallery/static-pixel-ratio-2x.png