From f60de3830464478fff11c23e08dbdb4a177857a7 Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 13 Oct 2024 21:27:40 +0200
Subject: [PATCH 01/13] add terrain preview and elevation link

---
 public/resources/index.css  |   2 +-
 public/templates/data.tmpl  | 139 +++++++++++++++++++++++++-----------
 public/templates/index.tmpl |  25 +++++--
 src/server.js               |  12 ++--
 src/utils.js                |  10 ++-
 5 files changed, 132 insertions(+), 56 deletions(-)
diff --git a/public/resources/index.css b/public/resources/index.css
index d18b63816..fd5f21ee3 100644
--- a/public/resources/index.css
+++ b/public/resources/index.css
@@ -114,7 +114,7 @@ section {
 }
 .details h3 {
   font-size: 18px;
-  margin-top: 25px;
+  margin-top: 5px;
 }
 .details p {
   padding: 0;
diff --git a/public/templates/data.tmpl b/public/templates/data.tmpl
index 59b0d3b35..2c4d21733 100644
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -4,20 +4,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
-  {{#is_vector}}
+  {{#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>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
+    {{^is_terrain}}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
+    {{/is_terrain}}
+    {{#is_terrain}}
+    #map { position:absolute; top:0; bottom:0; width:100%; }
+    {{/is_terrain}}
     h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
     #layerList {position:absolute;top:35px;right:0;bottom:0;width:240px;overflow:auto;}
     #layerList div div {width:15px;height:15px;display:inline-block;}
   </style>
-  {{/is_vector}}
-  {{^is_vector}}
+  {{/use_maplibre}}
+  {{^use_maplibre}}
   <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>
@@ -37,23 +42,22 @@
       background-image: url({{public_url}}images/marker-icon.png{{&key_query}});
     }
   </style>
-  {{/is_vector}}
+  {{/use_maplibre}}
 </head>
 <body>
-  {{#is_vector}}
+  {{#use_maplibre}}
   <h1>{{name}}</h1>
   <div id="map"></div>
+  {{^is_terrain}}
   <div id="layerList"></div>
   <pre id="propertyList"></pre>
+  {{/is_terrain}}
   <script>
-  var keyMatch = location.search.match(/[\?\&]key=([^&]+)/i);
-  var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';
-    
-  var map = new maplibregl.Map({
-    container: 'map',
-    hash: true,
-    maxPitch: 85,
-    style: {
+    var keyMatch = location.search.match(/[\?\&]key=([^&]+)/i);
+    var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';
+
+    {{^is_terrain}}
+    var style = {
       version: 8,
       sources: {
         'vector_layer_': {
@@ -62,37 +66,88 @@
         }
       },
       layers: []
-    }
-  });
-  map.addControl(new maplibregl.NavigationControl());
-  var inspect = new MaplibreInspect({
-    showInspectMap: true,
-    showInspectButton: false
-  });
-  map.addControl(inspect);
-  map.on('styledata', function() {
-    var layerList = document.getElementById('layerList');
-    layerList.innerHTML = '';
-    Object.keys(inspect.sources).forEach(function(sourceId) {
-      var layerIds = inspect.sources[sourceId];
-      layerIds.forEach(function(layerId) {
-        var item = document.createElement('div');
-        item.innerHTML = '<div style="' +
-          'background:' + inspect.assignLayerColor(layerId) + ';' +
-        '"></div> ' + layerId;
-        layerList.appendChild(item);
-      });
-    })
-  });
+    };
+    {{/is_terrain}}
+    {{#is_terrain}}
+    var style = {
+      version: 8,
+      sources: {
+        "terrain": {
+          "type": "raster-dem",
+          "url": "{{public_url}}data/{{id}}.json",
+          "encoding": "{{terrain_encoding}}"
+        },
+        "hillshade": {
+          "type": "raster-dem",
+          "url": "{{public_url}}data/{{id}}.json",
+          "encoding": "{{terrain_encoding}}"
+        }
+      },
+      "terrain": {
+        "source": "terrain"
+      },
+      layers: [
+        {
+          "id": "background",
+          "paint": {
+            {{^if is_terrainrgb}}
+            "background-color": "hsl(190, 99%, 63%)"
+            {{else}}
+            "background-color": "hsl(0, 100%, 25%)"
+            {{/if}}
+          },
+          "type": "background"
+        },
+        {
+          "id": "hillshade",
+          "source": "hillshade",
+          "type": "hillshade",
+          "paint": {
+            "hillshade-shadow-color": "hsl(39, 21%, 33%)",
+            "hillshade-illumination-direction": 315,
+            "hillshade-exaggeration": 0.8
+          }
+        }
+      ]
+    };
+    {{/is_terrain}}
+
+    var map = new maplibregl.Map({
+      container: 'map',
+      hash: true,
+      maxPitch: 85,
+      style: style
+    });
+    map.addControl(new maplibregl.NavigationControl());
+    {{^is_terrain}}
+    var inspect = new MaplibreInspect({
+      showInspectMap: true,
+      showInspectButton: false
+    });
+    map.addControl(inspect);
+    map.on('styledata', function() {
+      var layerList = document.getElementById('layerList');
+      layerList.innerHTML = '';
+      Object.keys(inspect.sources).forEach(function(sourceId) {
+        var layerIds = inspect.sources[sourceId];
+        layerIds.forEach(function(layerId) {
+          var item = document.createElement('div');
+          item.innerHTML = '<div style="' +
+            'background:' + inspect.assignLayerColor(layerId) + ';' +
+          '"></div> ' + layerId;
+          layerList.appendChild(item);
+        });
+      })
+    });
+    {{/is_terrain}}
   </script>
-  {{/is_vector}}
-  {{^is_vector}}
+  {{/use_maplibre}}
+  {{^use_maplibre}}
   <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 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);
 
@@ -129,7 +184,7 @@
                 attribution: tile_attribution
             }).addTo(map);
         }
-        
+
         map.eachLayer(function(layer) {
           // do not add scale prefix even if retina display is detected
           layer.scalePrefix = '.';
@@ -141,6 +196,6 @@
       new L.Hash(map);
     }, 0);
   </script>
-  {{/is_vector}}
+  {{/use_maplibre}}
 </body>
 </html>
diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index d4d5be766..0edd19a52 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -6,10 +6,15 @@
   <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}}" />
   <script>
-    function toggle_xyz(id) {
+    function toggle_link(id, link) {
       var el = document.getElementById(id);
       var s = el.style;
-      s.display = s.display == 'none' ? 'inline-block' : 'none';
+      if (s.display == 'none') {
+        s.display = 'inline-block';
+      } else if (el.value == link) {
+        s.display = 'none';
+      }
+      el.value = link;
       el.setSelectionRange(0, el.value.length);
       return false;
     }
@@ -37,7 +42,7 @@
         <div class="filter-details">
           <h3>Filter styles and data by name or identifier</h3>
           <!-- filter input , needs to call filter() when content changes...-->
-          <input id="filter" type="text" oninput="filter()" placeholder="Start typing name or identifier" />
+          <input id="filter" type="text" oninput="filter()" placeholder="Start typing name or identifier" autofocus />
         </div>
       </div>
     </div>
@@ -66,8 +71,8 @@
                 | <a href="{{public_url}}styles/{{@key}}/wmts.xml{{&../key_query}}">WMTS</a>
               {{/if}}
               {{#if xyz_link}}
-                | <a href="#" onclick="return toggle_xyz('xyz_style_{{@key}}');">XYZ</a>
-                  <input id="xyz_style_{{@key}}" type="text" value="{{&xyz_link}}" style="display:none;" />
+                | <a href="#" onclick="return toggle_link('xyz_style_{{@key}}', '{{&xyz_link}}');">XYZ</a>
+                  <input id="xyz_style_{{@key}}" type="text" value="" style="display:none;" />
               {{/if}}
             </p>
           </div>
@@ -105,9 +110,12 @@
             <p class="services">
               services: <a href="{{public_url}}data/{{@key}}.json{{&../key_query}}">TileJSON</a>
               {{#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;" />
+                | <a href="#" onclick="return toggle_link('link_data_{{@key}}', '{{&xyz_link}}');">XYZ</a>
+              {{/if}}
+              {{#if elevation_link}}
+                | <a href="#" onclick="return toggle_link('link_data_{{@key}}', '{{&elevation_link}}');">Elevation</a>
               {{/if}}
+                <input id="link_data_{{@key}}" type="text" value="" style="display:none;" />
             </p>
           </div>
           <div class="viewers">
@@ -116,6 +124,9 @@
             {{/is_vector}}
             {{^is_vector}}
             <a class="btn" href="{{public_url}}data/{{@key}}/{{&../key_query}}{{viewer_hash}}">View</a>
+              {{#elevation_link}}
+            <a class="btn" href="{{public_url}}data/preview/{{@key}}/{{&../key_query}}{{viewer_hash}}">Preview</a>
+              {{/elevation_link}}
             {{/is_vector}}
           </div>
         </div>
diff --git a/src/server.js b/src/server.js
index c554e83a4..5cad8788f 100644
--- a/src/server.js
+++ b/src/server.js
@@ -595,18 +595,22 @@ function start(opts) {
     };
   });
 
-  serveTemplate('/data/:id/$', 'data', (req) => {
-    const { id } = req.params;
+  serveTemplate('/data/(:preview(preview)/)?:id/', 'data', (req) => {
+    const id = req.params.id;
+    const preview = req.params.preview || undefined;
     const data = serving.data[id];
 
     if (!data) {
       return null;
     }
-
+    const is_terrain = ((data.tileJSON.encoding === 'terrarium' || data.tileJSON.encoding === 'mapbox') && (preview === "preview"));
     return {
       ...data,
       id,
-      is_vector: data.tileJSON.format === 'pbf',
+      use_maplibre: (data.tileJSON.format === 'pbf' || is_terrain),
+      is_terrain: is_terrain,
+      is_terrainrgb: (data.tileJSON.encoding === "mapbox"),
+      terrain_encoding: data.tileJSON.encoding,
     };
   });
 
diff --git a/src/utils.js b/src/utils.js
index 14e587145..fe399232c 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -119,16 +119,22 @@ export const getTileUrls = (
     tileParams = `${tileSize}/{z}/{x}/{y}`;
   }
 
+  if (format && format != "") {
+    format = `.${format}`;
+  } else {
+    format = "";
+  }
+
   const uris = [];
   if (!publicUrl) {
     let xForwardedPath = `${req.get('X-Forwarded-Path') ? '/' + req.get('X-Forwarded-Path') : ''}`;
     for (const domain of domains) {
       uris.push(
-        `${req.protocol}://${domain}${xForwardedPath}/${path}/${tileParams}.${format}${query}`,
+        `${req.protocol}://${domain}${xForwardedPath}/${path}/${tileParams}${format}${query}`,
       );
     }
   } else {
-    uris.push(`${publicUrl}${path}/${tileParams}.${format}${query}`);
+    uris.push(`${publicUrl}${path}/${tileParams}${format}${query}`);
   }
 
   return uris;

From 619c7f31e1691139e0a39d07dd029c21d500ccbd Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 13 Oct 2024 21:30:27 +0200
Subject: [PATCH 02/13] add elevation api for terrain tiles

---
 src/serve_data.js | 128 ++++++++++++++++++++++++++++++++++++++++++++++
 src/server.js     |  23 ++++++---
 2 files changed, 143 insertions(+), 8 deletions(-)

diff --git a/src/serve_data.js b/src/serve_data.js
index 995b6564a..2c636769b 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -7,6 +7,9 @@ import clone from 'clone';
 import express from 'express';
 import Pbf from 'pbf';
 import { VectorTile } from '@mapbox/vector-tile';
+import SphericalMercator from '@mapbox/sphericalmercator';
+import { Image, createCanvas } from 'canvas';
+import sharp from 'sharp';
 
 import { fixTileJSONCenter, getTileUrls, isValidHttpUrl } from './utils.js';
 import {
@@ -162,6 +165,130 @@ export const serve_data = {
       },
     );
 
+    app.get(
+      '^/:id/elevation/:z([0-9]+)/:x([-.0-9]+)/:y([-.0-9]+)',
+      async (req, res, next) => {
+        const item = repo[req.params.id];
+        if (!item) {
+          return res.sendStatus(404);
+        }
+
+        if (
+          item.source._info.encoding != "terrarium" &&
+          item.source._info.encoding != "mapbox"
+        ) {
+          return res.status(404).send('Missing encoding');
+        }
+
+        const tileJSONFormat = item.tileJSON.format;
+        const z = req.params.z | 0;
+        var x = req.params.x;
+        var y = req.params.y;
+
+        if (item.sourceType === 'pmtiles') {
+          return res.status(404).send('Invalid format');
+        } else if (item.sourceType === 'mbtiles') {
+          const mercator = new SphericalMercator();
+          let tileCenter;
+          let xy;
+          const int = /^-?[0-9]+$/;
+          if (int.test(x) && int.test(y)) {
+            //console.log("int")
+
+            if (
+              z < item.tileJSON.minzoom ||
+              0 ||
+              x < 0 ||
+              y < 0 ||
+              z > item.tileJSON.maxzoom ||
+              x >= Math.pow(2, z) ||
+              y >= Math.pow(2, z)
+            ) {
+              return res.status(404).send('Out of bounds');
+            }
+
+            xy = [x | 0, y | 0];
+            tileCenter = mercator.bbox(x, y, z);
+          } else {
+            //console.log("float")
+
+            if (
+              z < item.tileJSON.minzoom ||
+              x < -180 ||
+              y < -90 ||
+              z > item.tileJSON.maxzoom ||
+              x > 180 ||
+              y > 90
+            ) {
+              return res.status(404).send('Out of bounds');
+            }
+
+            x = parseFloat(x);
+            y = parseFloat(y);
+            tileCenter = [y, x, y + 0.1, x + 0.1];
+            xy = mercator.xyz(tileCenter, z);
+            xy = [xy.minX, xy.minY];
+          }
+
+          //console.log(tileCenter + " ## " + xy);
+          item.source.getTile(z, xy[0], xy[1], async (err, data, headers) => {
+            if (err) {
+              if (/does not exist/.test(err.message)) {
+                return res.status(204).send();
+              } else {
+                return res
+                  .status(500)
+                  .header('Content-Type', 'text/plain')
+                  .send(err.message);
+              }
+            } else {
+              if (data == null) {
+                return res.status(404).send('Not found');
+              } else {
+                if (tileJSONFormat === 'pbf') {
+                  return res.status(404).send('Invalid format');
+                }
+                var image = new Image();
+                image.onload = function () {
+                  const imgSize = 256;
+                  var canvas = createCanvas(imgSize, imgSize);
+
+                  var context = canvas.getContext('2d');
+                  context.drawImage(image, 0, 0);
+
+                  var imgdata = context.getImageData(0, 0, imgSize, imgSize);
+
+                  var index = (xy[1] * imgdata.width + xy[0]) * 4;
+                  var red = imgdata.data[index];
+                  var green = imgdata.data[index + 1];
+                  var blue = imgdata.data[index + 2];
+                  let elevation;
+                  if (item.source._info.encoding == "mapbox") {
+                    elevation = -10000 + ((red * 256 * 256 + green * 256 + blue) * 0.1);
+                  } else if (item.source._info.encoding == "terrarium") {
+                    elevation = (red * 256 + green + blue / 256) - 32768;
+                  } else {
+                    elevation = "invalid encoding";
+                  }
+                  //"index": index, "length": imgdata.data.length,
+                  return res.status(200).send({ "z": z, "x": xy[0], "y": xy[1], "red": red, "green": green, "blue": blue, "latitude": tileCenter[0], "longitude": tileCenter[1], "elevation": elevation });
+                };
+                image.onerror = err => { return res.status(500).header('Content-Type', 'text/plain').send(err.message); }
+                //image.onerror = err => { return res.status(200).header('Content-Type', 'image/webp').send(data); }
+
+                if (item.source._info.format == "webp") {
+                  const img = await sharp(data).toFormat('png').toBuffer();
+                  image.src = img;
+                } else {
+                  image.src = data;
+                }
+              }
+            }
+          });
+        }
+      },
+    );
+
     app.get('/:id.json', (req, res, next) => {
       const item = repo[req.params.id];
       if (!item) {
@@ -245,6 +372,7 @@ export const serve_data = {
       const mbw = await openMbTilesWrapper(inputFile);
       const info = await mbw.getInfo();
       source = mbw.getMbTiles();
+      info["encoding"] = params["encoding"];
       tileJSON['name'] = id;
       tileJSON['format'] = 'pbf';
 
diff --git a/src/server.js b/src/server.js
index 5cad8788f..2e48460af 100644
--- a/src/server.js
+++ b/src/server.js
@@ -498,14 +498,6 @@ function start(opts) {
         )}/${center[0].toFixed(5)}`;
       }
 
-      data.is_vector = tileJSON.format === 'pbf';
-      if (!data.is_vector) {
-        if (center) {
-          const centerPx = mercator.px([center[0], center[1]], center[2]);
-          data.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
-        }
-      }
-
       const tileSize = undefined;
       data.xyz_link = getTileUrls(
         req,
@@ -519,6 +511,21 @@ function start(opts) {
         },
       )[0];
 
+      data.is_vector = tileJSON.format === 'pbf';
+      if (!data.is_vector) {
+        if ((tileJSON.encoding === 'terrarium' || tileJSON.encoding === 'mapbox')) {
+          data.elevation_link = getTileUrls(
+            req,
+            tileJSON.tiles,
+            `data/${id}/elevation`
+          )[0];
+        };
+        if (center) {
+          const centerPx = mercator.px([center[0], center[1]], center[2]);
+          data.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
+        }
+      }
+
       if (data.filesize) {
         let suffix = 'kB';
         let size = parseInt(tileJSON.filesize, 10) / 1024;

From 21a25592d2cd52eda263dc6d268efe2091720774 Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 13 Oct 2024 22:46:00 +0200
Subject: [PATCH 03/13] add documentation for elevation api

---
 docs/config.rst    | 6 ++++++
 docs/endpoints.rst | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/docs/config.rst b/docs/config.rst
index d556dfa39..709a125ce 100644
--- a/docs/config.rst
+++ b/docs/config.rst
@@ -258,6 +258,10 @@ For example::
     "source1": {
       "url": "mbtiles://source1.mbtiles",
       "type": "vector"
+    },
+    "terrain": {
+      "url": "mbtiles://terrain.mbtiles",
+      "encoding": "mapbox"
     }
   }
 
@@ -265,6 +269,8 @@ Alternatively, you can use ``mbtiles://{source1}`` to reference existing data ob
 In this case, the server will look into the ``config.json`` to determine what file to use by data id.
 For the config above, this is equivalent to ``mbtiles://source1.mbtiles``.
 
+If you use terrain tiles, it is possible to configure an ``encoding`` with ``mapbox`` or ``terrarium`` to enable a terrain preview mode and the ``elevation`` api for the ``data`` endpoint.
+
 PMTiles
 -------
 
diff --git a/docs/endpoints.rst b/docs/endpoints.rst
index 93230a6c4..12f1acf5e 100644
--- a/docs/endpoints.rst
+++ b/docs/endpoints.rst
@@ -100,6 +100,14 @@ Source data
 
   * TileJSON at ``/data/{id}.json``
 
+  * If terrain mbtile data is served and ``encoding`` is configured (see config) the elevation can be queried 
+
+    * by ``/data/{id}/elevation/{z}/{x}/{y}`` for the tile
+
+    * or ``/data/{id}/elevation/{z}/{long}/{lat}`` for the coordinate
+
+    * the result will be a json object like ``{"z":7,"x":68,"y":45,"red":134,"green":66,"blue":0,"latitude":11.84069,"longitude":46.04798,"elevation":1602}``
+
 Static files
 ===========
 * Static files are served at ``/files/{filename}``

From c94bd22b8ec8b953e8fbe14f973c8e384cebb55d Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 13 Oct 2024 22:54:31 +0200
Subject: [PATCH 04/13] applied lint:js:fix

---
 src/serve_data.js | 38 +++++++++++++++++++++++++++-----------
 src/server.js     | 18 ++++++++++++------
 src/utils.js      |  4 ++--
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/serve_data.js b/src/serve_data.js
index 2c636769b..38131db79 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -174,8 +174,8 @@ export const serve_data = {
         }
 
         if (
-          item.source._info.encoding != "terrarium" &&
-          item.source._info.encoding != "mapbox"
+          item.source._info.encoding != 'terrarium' &&
+          item.source._info.encoding != 'mapbox'
         ) {
           return res.status(404).send('Missing encoding');
         }
@@ -263,20 +263,36 @@ export const serve_data = {
                   var green = imgdata.data[index + 1];
                   var blue = imgdata.data[index + 2];
                   let elevation;
-                  if (item.source._info.encoding == "mapbox") {
-                    elevation = -10000 + ((red * 256 * 256 + green * 256 + blue) * 0.1);
-                  } else if (item.source._info.encoding == "terrarium") {
-                    elevation = (red * 256 + green + blue / 256) - 32768;
+                  if (item.source._info.encoding == 'mapbox') {
+                    elevation =
+                      -10000 + (red * 256 * 256 + green * 256 + blue) * 0.1;
+                  } else if (item.source._info.encoding == 'terrarium') {
+                    elevation = red * 256 + green + blue / 256 - 32768;
                   } else {
-                    elevation = "invalid encoding";
+                    elevation = 'invalid encoding';
                   }
                   //"index": index, "length": imgdata.data.length,
-                  return res.status(200).send({ "z": z, "x": xy[0], "y": xy[1], "red": red, "green": green, "blue": blue, "latitude": tileCenter[0], "longitude": tileCenter[1], "elevation": elevation });
+                  return res.status(200).send({
+                    z: z,
+                    x: xy[0],
+                    y: xy[1],
+                    red: red,
+                    green: green,
+                    blue: blue,
+                    latitude: tileCenter[0],
+                    longitude: tileCenter[1],
+                    elevation: elevation,
+                  });
+                };
+                image.onerror = (err) => {
+                  return res
+                    .status(500)
+                    .header('Content-Type', 'text/plain')
+                    .send(err.message);
                 };
-                image.onerror = err => { return res.status(500).header('Content-Type', 'text/plain').send(err.message); }
                 //image.onerror = err => { return res.status(200).header('Content-Type', 'image/webp').send(data); }
 
-                if (item.source._info.format == "webp") {
+                if (item.source._info.format == 'webp') {
                   const img = await sharp(data).toFormat('png').toBuffer();
                   image.src = img;
                 } else {
@@ -372,7 +388,7 @@ export const serve_data = {
       const mbw = await openMbTilesWrapper(inputFile);
       const info = await mbw.getInfo();
       source = mbw.getMbTiles();
-      info["encoding"] = params["encoding"];
+      info['encoding'] = params['encoding'];
       tileJSON['name'] = id;
       tileJSON['format'] = 'pbf';
 
diff --git a/src/server.js b/src/server.js
index 2e48460af..ce51e9a32 100644
--- a/src/server.js
+++ b/src/server.js
@@ -513,13 +513,16 @@ function start(opts) {
 
       data.is_vector = tileJSON.format === 'pbf';
       if (!data.is_vector) {
-        if ((tileJSON.encoding === 'terrarium' || tileJSON.encoding === 'mapbox')) {
+        if (
+          tileJSON.encoding === 'terrarium' ||
+          tileJSON.encoding === 'mapbox'
+        ) {
           data.elevation_link = getTileUrls(
             req,
             tileJSON.tiles,
-            `data/${id}/elevation`
+            `data/${id}/elevation`,
           )[0];
-        };
+        }
         if (center) {
           const centerPx = mercator.px([center[0], center[1]], center[2]);
           data.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
@@ -610,13 +613,16 @@ function start(opts) {
     if (!data) {
       return null;
     }
-    const is_terrain = ((data.tileJSON.encoding === 'terrarium' || data.tileJSON.encoding === 'mapbox') && (preview === "preview"));
+    const is_terrain =
+      (data.tileJSON.encoding === 'terrarium' ||
+        data.tileJSON.encoding === 'mapbox') &&
+      preview === 'preview';
     return {
       ...data,
       id,
-      use_maplibre: (data.tileJSON.format === 'pbf' || is_terrain),
+      use_maplibre: data.tileJSON.format === 'pbf' || is_terrain,
       is_terrain: is_terrain,
-      is_terrainrgb: (data.tileJSON.encoding === "mapbox"),
+      is_terrainrgb: data.tileJSON.encoding === 'mapbox',
       terrain_encoding: data.tileJSON.encoding,
     };
   });
diff --git a/src/utils.js b/src/utils.js
index fe399232c..4f976f512 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -119,10 +119,10 @@ export const getTileUrls = (
     tileParams = `${tileSize}/{z}/{x}/{y}`;
   }
 
-  if (format && format != "") {
+  if (format && format != '') {
     format = `.${format}`;
   } else {
-    format = "";
+    format = '';
   }
 
   const uris = [];

From 20ffc999f0b1771d805620bd3e25f5a98a8d10cb Mon Sep 17 00:00:00 2001
From: Miko <39791814+okimiko@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:38:39 +0100
Subject: [PATCH 05/13] Add `test-docker` for test execution in docker build
 environment

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index ea5e2fb1c..14f94ae0c 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "type": "module",
   "scripts": {
     "test": "mocha test/**.js --timeout 10000 --exit",
+    "test-docker": "xvfb-run npm test",
     "lint:yml": "yamllint --schema=CORE_SCHEMA *.{yml,yaml}",
     "lint:js": "npm run lint:eslint && npm run lint:prettier",
     "lint:js:fix": "npm run lint:eslint:fix && npm run lint:prettier:fix",

From 24154d05c236611138762e54600861048ea9a8fe Mon Sep 17 00:00:00 2001
From: Miko <39791814+okimiko@users.noreply.github.com>
Date: Thu, 19 Dec 2024 11:39:47 +0100
Subject: [PATCH 06/13] Fix too greedy router expression

---
 src/server.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server.js b/src/server.js
index ce51e9a32..e9386f790 100644
--- a/src/server.js
+++ b/src/server.js
@@ -605,7 +605,7 @@ function start(opts) {
     };
   });
 
-  serveTemplate('/data/(:preview(preview)/)?:id/', 'data', (req) => {
+  serveTemplate('^/data/(:preview(preview)/)?:id/$', 'data', (req) => {
     const id = req.params.id;
     const preview = req.params.preview || undefined;
     const data = serving.data[id];

From 0e87d456c13dbc7d57e4dab8254ce183e8833eaf Mon Sep 17 00:00:00 2001
From: Miko <39791814+okimiko@users.noreply.github.com>
Date: Sat, 21 Dec 2024 21:39:25 +0100
Subject: [PATCH 07/13] Add pmtile support

Co-authored-by: Andrew Calcutt <acalcutt@techidiots.net>
---
 src/serve_data.js | 251 ++++++++++++++++++++++++++--------------------
 1 file changed, 145 insertions(+), 106 deletions(-)

diff --git a/src/serve_data.js b/src/serve_data.js
index 38131db79..9125454e8 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -168,139 +168,178 @@ export const serve_data = {
     app.get(
       '^/:id/elevation/:z([0-9]+)/:x([-.0-9]+)/:y([-.0-9]+)',
       async (req, res, next) => {
-        const item = repo[req.params.id];
-        if (!item) {
-          return res.sendStatus(404);
-        }
+        try {
+          const item = repo?.[req.params.id];
+          if (!item) return res.sendStatus(404);
+          if (!item.source) return res.status(404).send('Missing source');
+          if (!item.tileJSON) return res.status(404).send('Missing tileJSON');
+          if (!item.sourceType)
+            return res.status(404).send('Missing sourceType');
+
+          const { source, tileJSON, sourceType } = item;
+
+          if (sourceType !== 'pmtiles' && sourceType !== 'mbtiles') {
+            return res
+              .status(400)
+              .send('Invalid sourceType. Must be pmtiles or mbtiles.');
+          }
 
-        if (
-          item.source._info.encoding != 'terrarium' &&
-          item.source._info.encoding != 'mapbox'
-        ) {
-          return res.status(404).send('Missing encoding');
-        }
+          const encoding = tileJSON?.encoding;
+          if (encoding == null) {
+            return res.status(400).send('Missing tileJSON.encoding');
+          } else if (encoding !== 'terrarium' && encoding !== 'mapbox') {
+            return res
+              .status(400)
+              .send('Invalid encoding. Must be terrarium or mapbox.');
+          }
 
-        const tileJSONFormat = item.tileJSON.format;
-        const z = req.params.z | 0;
-        var x = req.params.x;
-        var y = req.params.y;
+          const format = tileJSON?.format;
+          if (format == null) {
+            return res.status(400).send('Missing tileJSON.format');
+          } else if (format !== 'webp' && format !== 'png') {
+            return res.status(400).send('Invalid format. Must be webp or png.');
+          }
 
-        if (item.sourceType === 'pmtiles') {
-          return res.status(404).send('Invalid format');
-        } else if (item.sourceType === 'mbtiles') {
-          const mercator = new SphericalMercator();
+          const z = parseInt(req.params.z, 10);
+          const x = parseFloat(req.params.x);
+          const y = parseFloat(req.params.y);
+
+          if (tileJSON.minzoom == null || tileJSON.maxzoom == null) {
+            return res.status(404).send(JSON.stringify(tileJSON));
+          }
+
+          const TILE_SIZE = 256;
           let tileCenter;
           let xy;
-          const int = /^-?[0-9]+$/;
-          if (int.test(x) && int.test(y)) {
-            //console.log("int")
+
+          if (Number.isInteger(x) && Number.isInteger(y)) {
+            const intX = parseInt(req.params.x, 10);
+            const intY = parseInt(req.params.y, 10);
 
             if (
-              z < item.tileJSON.minzoom ||
-              0 ||
-              x < 0 ||
-              y < 0 ||
-              z > item.tileJSON.maxzoom ||
-              x >= Math.pow(2, z) ||
-              y >= Math.pow(2, z)
+              z < tileJSON.minzoom ||
+              z > tileJSON.maxzoom ||
+              intX < 0 ||
+              intY < 0 ||
+              intX >= Math.pow(2, z) ||
+              intY >= Math.pow(2, z)
             ) {
               return res.status(404).send('Out of bounds');
             }
-
-            xy = [x | 0, y | 0];
-            tileCenter = mercator.bbox(x, y, z);
+            xy = [intX, intY];
+            tileCenter = new SphericalMercator().bbox(intX, intY, z);
           } else {
-            //console.log("float")
-
             if (
-              z < item.tileJSON.minzoom ||
+              z < tileJSON.minzoom ||
+              z > tileJSON.maxzoom ||
               x < -180 ||
               y < -90 ||
-              z > item.tileJSON.maxzoom ||
               x > 180 ||
               y > 90
             ) {
               return res.status(404).send('Out of bounds');
             }
 
-            x = parseFloat(x);
-            y = parseFloat(y);
             tileCenter = [y, x, y + 0.1, x + 0.1];
-            xy = mercator.xyz(tileCenter, z);
-            xy = [xy.minX, xy.minY];
+            const { minX, minY } = new SphericalMercator().xyz(tileCenter, z);
+            xy = [minX, minY];
           }
 
-          //console.log(tileCenter + " ## " + xy);
-          item.source.getTile(z, xy[0], xy[1], async (err, data, headers) => {
-            if (err) {
-              if (/does not exist/.test(err.message)) {
-                return res.status(204).send();
-              } else {
-                return res
-                  .status(500)
-                  .header('Content-Type', 'text/plain')
-                  .send(err.message);
+          let data;
+          if (sourceType === 'pmtiles') {
+            const tileinfo = await getPMtilesTile(source, z, x, y);
+            if (!tileinfo?.data) return res.status(204).send();
+            data = tileinfo.data;
+          } else {
+            data = await new Promise((resolve, reject) => {
+              source.getTile(z, xy[0], xy[1], (err, tileData) => {
+                if (err) {
+                  return /does not exist/.test(err.message)
+                    ? resolve(null)
+                    : reject(err);
+                }
+                resolve(tileData);
+              });
+            });
+          }
+          if (data == null) return res.status(204).send();
+          if (!data) return res.status(404).send('Not found');
+          if (tileJSON.format === 'pbf')
+            return res.status(400).send('Invalid format');
+
+          const image = new Image();
+          await new Promise(async (resolve, reject) => {
+            image.onload = async () => {
+              const canvas = createCanvas(TILE_SIZE, TILE_SIZE);
+              const context = canvas.getContext('2d');
+              context.drawImage(image, 0, 0);
+              const imgdata = context.getImageData(0, 0, TILE_SIZE, TILE_SIZE);
+
+              const arrayWidth = imgdata.width;
+              const arrayHeight = imgdata.height;
+              const bytesPerPixel = 4;
+
+              const xPixel = Math.floor(xy[0]);
+              const yPixel = Math.floor(xy[1]);
+
+              if (
+                xPixel < 0 ||
+                yPixel < 0 ||
+                xPixel >= arrayWidth ||
+                yPixel >= arrayHeight
+              ) {
+                return reject('Out of bounds Pixel');
               }
-            } else {
-              if (data == null) {
-                return res.status(404).send('Not found');
+
+              const index = (yPixel * arrayWidth + xPixel) * bytesPerPixel;
+
+              const red = imgdata.data[index];
+              const green = imgdata.data[index + 1];
+              const blue = imgdata.data[index + 2];
+
+              let elevation;
+              if (encoding === 'mapbox') {
+                elevation =
+                  -10000 + (red * 256 * 256 + green * 256 + blue) * 0.1;
+              } else if (encoding === 'terrarium') {
+                elevation = red * 256 + green + blue / 256 - 32768;
               } else {
-                if (tileJSONFormat === 'pbf') {
-                  return res.status(404).send('Invalid format');
-                }
-                var image = new Image();
-                image.onload = function () {
-                  const imgSize = 256;
-                  var canvas = createCanvas(imgSize, imgSize);
-
-                  var context = canvas.getContext('2d');
-                  context.drawImage(image, 0, 0);
-
-                  var imgdata = context.getImageData(0, 0, imgSize, imgSize);
-
-                  var index = (xy[1] * imgdata.width + xy[0]) * 4;
-                  var red = imgdata.data[index];
-                  var green = imgdata.data[index + 1];
-                  var blue = imgdata.data[index + 2];
-                  let elevation;
-                  if (item.source._info.encoding == 'mapbox') {
-                    elevation =
-                      -10000 + (red * 256 * 256 + green * 256 + blue) * 0.1;
-                  } else if (item.source._info.encoding == 'terrarium') {
-                    elevation = red * 256 + green + blue / 256 - 32768;
-                  } else {
-                    elevation = 'invalid encoding';
-                  }
-                  //"index": index, "length": imgdata.data.length,
-                  return res.status(200).send({
-                    z: z,
-                    x: xy[0],
-                    y: xy[1],
-                    red: red,
-                    green: green,
-                    blue: blue,
-                    latitude: tileCenter[0],
-                    longitude: tileCenter[1],
-                    elevation: elevation,
-                  });
-                };
-                image.onerror = (err) => {
-                  return res
-                    .status(500)
-                    .header('Content-Type', 'text/plain')
-                    .send(err.message);
-                };
-                //image.onerror = err => { return res.status(200).header('Content-Type', 'image/webp').send(data); }
-
-                if (item.source._info.format == 'webp') {
-                  const img = await sharp(data).toFormat('png').toBuffer();
-                  image.src = img;
-                } else {
-                  image.src = data;
-                }
+                elevation = 'invalid encoding';
               }
+
+              resolve(
+                res.status(200).send({
+                  z,
+                  x: xy[0],
+                  y: xy[1],
+                  red,
+                  green,
+                  blue,
+                  latitude: tileCenter[0],
+                  longitude: tileCenter[1],
+                  elevation,
+                }),
+              );
+            };
+
+            image.onerror = (err) => reject(err);
+
+            if (format === 'webp') {
+              try {
+                const img = await sharp(data).toFormat('png').toBuffer();
+                image.src = img;
+              } catch (err) {
+                reject(err);
+              }
+            } else {
+              image.src = data;
             }
           });
+        } catch (err) {
+          return res
+            .status(500)
+            .header('Content-Type', 'text/plain')
+            .send(err.message);
         }
       },
     );
@@ -388,7 +427,7 @@ export const serve_data = {
       const mbw = await openMbTilesWrapper(inputFile);
       const info = await mbw.getInfo();
       source = mbw.getMbTiles();
-      info['encoding'] = params['encoding'];
+      tileJSON['encoding'] = params['encoding'];
       tileJSON['name'] = id;
       tileJSON['format'] = 'pbf';
 

From 239f1078a73fb066b8f9ce6ba608780a7235dcae Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sat, 21 Dec 2024 21:50:19 +0100
Subject: [PATCH 08/13] add encoding param to pmtile section

---
 src/serve_data.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/serve_data.js b/src/serve_data.js
index 9125454e8..19de8136f 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -407,6 +407,7 @@ export const serve_data = {
       sourceType = 'pmtiles';
       const metadata = await getPMtilesInfo(source);
 
+      tileJSON['encoding'] = params['encoding'];
       tileJSON['name'] = id;
       tileJSON['format'] = 'pbf';
       Object.assign(tileJSON, metadata);

From 484de1ea2d72f3f71826de8313748cff63ff7878 Mon Sep 17 00:00:00 2001
From: Miko <39791814+okimiko@users.noreply.github.com>
Date: Sun, 22 Dec 2024 08:07:21 +0100
Subject: [PATCH 09/13] add map controls

Co-authored-by: Andrew Calcutt <acalcutt@techidiots.net>
---
 public/templates/data.tmpl | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/templates/data.tmpl b/public/templates/data.tmpl
index 2c4d21733..e4ac4e015 100644
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -118,7 +118,18 @@
       maxPitch: 85,
       style: style
     });
-    map.addControl(new maplibregl.NavigationControl());
+    map.addControl(new maplibregl.NavigationControl({
+      visualizePitch: true,
+      showZoom: true,
+      showCompass: true
+    }));
+    {{#is_terrain}}
+    map.addControl(
+      new maplibregl.TerrainControl({
+        source: "terrain",
+      })
+    );
+    {{/is_terrain}}
     {{^is_terrain}}
     var inspect = new MaplibreInspect({
       showInspectMap: true,

From 2e92e5762283662cecb3b73216fabe87afc4c6eb Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 22 Dec 2024 08:10:20 +0100
Subject: [PATCH 10/13] remove not needed check

---
 src/serve_data.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/serve_data.js b/src/serve_data.js
index 19de8136f..1936da6b2 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -264,8 +264,6 @@ export const serve_data = {
           }
           if (data == null) return res.status(204).send();
           if (!data) return res.status(404).send('Not found');
-          if (tileJSON.format === 'pbf')
-            return res.status(400).send('Invalid format');
 
           const image = new Image();
           await new Promise(async (resolve, reject) => {

From 49fa9e17a13b77d5d1dd0336fe2bdfaa9b0f763e Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 22 Dec 2024 08:47:02 +0100
Subject: [PATCH 11/13] fix possible float usage in thumbnail url

---
 src/server.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/server.js b/src/server.js
index e9386f790..39808e318 100644
--- a/src/server.js
+++ b/src/server.js
@@ -468,7 +468,7 @@ function start(opts) {
 
           const centerPx = mercator.px([center[0], center[1]], center[2]);
           // Set thumbnail default size to be 256px x 256px
-          style.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.png`;
+          style.thumbnail = `${Math.floor(center[2])}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.png`;
         }
 
         const tileSize = 512;
@@ -525,7 +525,7 @@ function start(opts) {
         }
         if (center) {
           const centerPx = mercator.px([center[0], center[1]], center[2]);
-          data.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
+          data.thumbnail = `${Math.floor(center[2])}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
         }
       }
 

From 56eb29518e4b1d0f93628371b51bdb7bdf675e5e Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Wed, 25 Dec 2024 21:49:48 +0100
Subject: [PATCH 12/13] update readme for encoding option

---
 docs/config.rst | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/docs/config.rst b/docs/config.rst
index 709a125ce..cb84e4690 100644
--- a/docs/config.rst
+++ b/docs/config.rst
@@ -238,9 +238,26 @@ For example::
     }
   }
 
-
 The data source does not need to be specified here unless you explicitly want to serve the raw data.
 
+Serving Terrain Tiles
+--------------
+
+If you serve terrain tiles, it is possible to configure an ``encoding`` with ``mapbox`` or ``terrarium`` to enable a terrain preview mode and the ``elevation`` api for the ``data`` endpoint.
+
+For example::
+
+  "data": {
+    "terrain1": {
+      "mbtiles": "terrain1.mbtiles",
+      "encoding": "mapbox"
+    },
+    "terrain2": {
+      "pmtiles": "terrain2.pmtiles"
+      "encoding": "terrarium"
+    }
+  }
+
 Referencing local files from style JSON
 =======================================
 
@@ -258,10 +275,6 @@ For example::
     "source1": {
       "url": "mbtiles://source1.mbtiles",
       "type": "vector"
-    },
-    "terrain": {
-      "url": "mbtiles://terrain.mbtiles",
-      "encoding": "mapbox"
     }
   }
 
@@ -269,8 +282,6 @@ Alternatively, you can use ``mbtiles://{source1}`` to reference existing data ob
 In this case, the server will look into the ``config.json`` to determine what file to use by data id.
 For the config above, this is equivalent to ``mbtiles://source1.mbtiles``.
 
-If you use terrain tiles, it is possible to configure an ``encoding`` with ``mapbox`` or ``terrarium`` to enable a terrain preview mode and the ``elevation`` api for the ``data`` endpoint.
-
 PMTiles
 -------
 
@@ -289,7 +300,7 @@ For example::
     "source3": {
       "url": "pmtiles://https://foo.lan/source3.pmtiles",
       "type": "vector"
-    },
+    }
   }
 
 Alternatively, you can use ``pmtiles://{source2}`` to reference existing data object from the config.

From 38e4dfb474bf77cc446dceefbf192e90d34bd62b Mon Sep 17 00:00:00 2001
From: Miko <miko@none>
Date: Sun, 29 Dec 2024 23:00:16 +0100
Subject: [PATCH 13/13] add better link name

---
 public/templates/index.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index 0edd19a52..acf094f77 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -125,7 +125,7 @@
             {{^is_vector}}
             <a class="btn" href="{{public_url}}data/{{@key}}/{{&../key_query}}{{viewer_hash}}">View</a>
               {{#elevation_link}}
-            <a class="btn" href="{{public_url}}data/preview/{{@key}}/{{&../key_query}}{{viewer_hash}}">Preview</a>
+            <a class="btn" href="{{public_url}}data/preview/{{@key}}/{{&../key_query}}{{viewer_hash}}">Preview Terrain</a>
               {{/elevation_link}}
             {{/is_vector}}
           </div>
