Add support for 512 sized raster tiles - v2 (#1136)

* test: using 512px rendered tiles

Based on https://github.com/maptiler/tileserver-gl/pull/495

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: use static renderer at zoom 0

renderer is not able to change the size of tile to more than 512px in tile mode

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* Add support for 512 sized raster tiles (#1)

* Enable setting tilesize for raster tiles

* Serve correct endpoint for raster tiles

* Add 256 & 512 sized raster layers to wmts getCapabilities document

* Update wmts getCapabilities tileMatrixSets

* Add rendered tiles format for getTileUrls method

* Update endpoints documentation

* Add and fix tiles_rendered tests

* fix: formatting

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: corrent bad merge

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: if tile size is undefined don't add it

needed for data endpoint right now

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: set tile size in raster endpoints to 512

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: add semicolon

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: lint

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: test z1 512px file that actually exists

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: make tileSize optional

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: cleaner if statement

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* docs: update tileSize to show as optional

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: allow tile size in data url

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: remove unneeded tileSize

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: set data as 256 tileSize for consistency

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* docs: add note about optional data tileSize

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: lint

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* Revert "fix: remove unneeded tileSize"

This reverts commit a4583161bf53653d65a4606c407ba9b5249d1061.

* fix: allow tile size to be set at json endpoints

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: set default endpoint tilesizes

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: don't use tilesize one data endpoint

It doesn't do anything

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: default style endpoint to undefined

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: zoom 0 workaround

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* Revert "fix: zoom 0 workaround"

This reverts commit 0f3bbd765c9c151016cec66768675f990676c8b3.

* fix: limit min zoom to 1 in viewer

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: put back orig string

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* docs: add optional tilesize to TileJSON

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: cleanup thumbnails

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: default undefined like other data endpoints

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: move data xyz_link

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: remove console.log

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: lint

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* chore: update version

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: update path

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: join error

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

* fix: revert path change

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>

---------

Signed-off-by: Andrew Calcutt <acalcutt@techidiots.net>
Co-authored-by: Petteri Pesonen <teemu.p.pesonen@gmail.com>

docs/endpoints.rst

@@ -13,11 +13,12 @@ Styles
 
 Rendered tiles
 ==============
-* Rendered tiles are served at ``/styles/{id}/{z}/{x}/{y}[@2x].{format}``
+* Rendered tiles are served at ``/styles/{id}[/{tileSize}]/{z}/{x}/{y}[@2x].{format}``
 
-  * The optional ``@2x`` (or ``@3x``, ``@4x``) part can be used to render HiDPI (retina) tiles
+  * The optional ratio ``@2x`` (ex.  ``@2x``, ``@3x``, ``@4x``) part can be used to render HiDPI (retina) tiles
+  * The optional tile size ``/{tileSize}`` (ex. ``/256``, ``/512``). if omitted, tileSize defaults to 256.
   * Available formats: ``png``, ``jpg`` (``jpeg``), ``webp``
-  * TileJSON at ``/styles/{id}.json``
+  * TileJSON at ``/styles[/{tileSize}]/{id}.json``
 
 * The rendered tiles are not available in the ``tileserver-gl-light`` version.
 
@@ -91,13 +92,13 @@ Static images
 
 Source data
 ===========
-* Source data are served at ``/data/{mbtiles}/{z}/{x}/{y}.{format}``
+* Source data are served at ``/data/{id}/{z}/{x}/{y}.{format}``
 
   * Format depends on the source file (usually ``png`` or ``pbf``)
 
     * ``geojson`` is also available (useful for inspecting the tiles) in case the original format is ``pbf``
 
-  * TileJSON at ``/data/{mbtiles}.json``
+  * TileJSON at ``/data/{id}.json``
 
 TileJSON arrays
 ===============

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tileserver-gl",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tileserver-gl",
-      "version": "4.8.0",
+      "version": "4.9.0",
       "license": "BSD-2-Clause",
       "dependencies": {
         "@mapbox/glyph-pbf-composite": "0.0.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tileserver-gl",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Map tile server for JSON GL styles - vector and server side generated raster tiles",
   "main": "src/main.js",
   "bin": "src/main.js",

public/templates/data.tmpl

@@ -124,6 +124,7 @@
 
         for (tile_url in tile_urls) {
             L.tileLayer(tile_urls[tile_url], {
+                tileSize: 256,
                 minZoom: tile_minzoom,
                 maxZoom: tile_maxzoom,
                 attribution: tile_attribution

public/templates/index.tmpl

@@ -38,7 +38,7 @@
                 <a href="{{public_url}}styles/{{@key}}/style.json{{&../key_query}}">GL Style</a>
               {{/if}}
               {{#if serving_rendered}}
-                {{#if serving_data}}| {{/if}}<a href="{{public_url}}styles/{{@key}}.json{{&../key_query}}">TileJSON</a>
+                {{#if serving_data}}| {{/if}}<a href="{{public_url}}styles/512/{{@key}}.json{{&../key_query}}">TileJSON</a>
               {{/if}}
               {{#if serving_rendered}}
                 | <a href="{{public_url}}styles/{{@key}}/wmts.xml{{&../key_query}}">WMTS</a>

public/templates/viewer.tmpl

@@ -77,11 +77,11 @@
          selectThreshold: 5
       }));
     } else {
-        var map = L.map('map', { zoomControl: false });
+        var map = L.map('map', { minZoom: 1, zoomControl: false });
         new L.Control.Zoom({ position: 'topright' }).addTo(map);
         
         var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom;
-        var url = '{{public_url}}styles/{{id}}.json' + keyParam;
+        var url = '{{public_url}}styles/512/{{id}}.json' + keyParam;
         var req = new XMLHttpRequest();
         req.overrideMimeType("application/json");
         req.open('GET', url, true);
@@ -107,6 +107,7 @@
 
             for (tile_url in tile_urls) {
                 L.tileLayer(tile_urls[tile_url], {
+                    tileSize: 512,
                     minZoom: tile_minzoom,
                     maxZoom: tile_maxzoom,
                     attribution: tile_attribution

public/templates/wmts.tmpl

@@ -37,7 +37,7 @@
   </ows:OperationsMetadata>
   <Contents>
     <Layer>
-      <ows:Title>{{name}}</ows:Title>
+      <ows:Title>{{name}}-256</ows:Title>
       <ows:Identifier>{{id}}</ows:Identifier>
       <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
         <ows:LowerCorner>-180 -85.051128779807</ows:LowerCorner>
@@ -48,13 +48,30 @@
       </Style>
       <Format>image/png</Format>
       <TileMatrixSetLink>
-        <TileMatrixSet>GoogleMapsCompatible</TileMatrixSet>
+        <TileMatrixSet>GoogleMapsCompatible_256</TileMatrixSet>
       </TileMatrixSetLink>
-      <ResourceURL format="image/png" resourceType="tile" template="{{baseUrl}}styles/{{id}}/{TileMatrix}/{TileCol}/{TileRow}.png{{key_query}}"/>
+      <ResourceURL format="image/png" resourceType="tile" template="{{baseUrl}}/styles/{{id}}/256/{TileMatrix}/{TileCol}/{TileRow}.png{{key_query}}"/>
-    </Layer><TileMatrixSet>
+    </Layer>
-      <ows:Title>GoogleMapsCompatible</ows:Title>
+    <Layer>
-      <ows:Abstract>GoogleMapsCompatible EPSG:3857</ows:Abstract>
+      <ows:Title>{{name}}-512</ows:Title>
-      <ows:Identifier>GoogleMapsCompatible</ows:Identifier>
+      <ows:Identifier>{{id}}</ows:Identifier>
+      <ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
+        <ows:LowerCorner>-180 -85.051128779807</ows:LowerCorner>
+        <ows:UpperCorner>180 85.051128779807</ows:UpperCorner>
+      </ows:WGS84BoundingBox>
+      <Style isDefault="true">
+        <ows:Identifier>default</ows:Identifier>
+      </Style>
+      <Format>image/png</Format>
+      <TileMatrixSetLink>
+        <TileMatrixSet>GoogleMapsCompatible_512</TileMatrixSet>
+      </TileMatrixSetLink>
+      <ResourceURL format="image/png" resourceType="tile" template="{{baseUrl}}/styles/{{id}}/512/{TileMatrix}/{TileCol}/{TileRow}.png{{key_query}}"/>
+    </Layer>
+    <TileMatrixSet>
+      <ows:Title>GoogleMapsCompatible_256</ows:Title>
+      <ows:Abstract>GoogleMapsCompatible_256 EPSG:3857</ows:Abstract>
+      <ows:Identifier>GoogleMapsCompatible_256</ows:Identifier>
       <ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
       <TileMatrix>
         <ows:Identifier>0</ows:Identifier>
@@ -226,10 +243,189 @@
         <TileHeight>256</TileHeight>
         <MatrixWidth>262144</MatrixWidth>
         <MatrixHeight>262144</MatrixHeight>
-      </TileMatrix></TileMatrixSet><TileMatrixSet>
+      </TileMatrix>
-      <ows:Title>WGS84</ows:Title>
+    </TileMatrixSet>
-      <ows:Abstract>WGS84 EPSG:4326</ows:Abstract>
+    <TileMatrixSet>
-      <ows:Identifier>WGS84</ows:Identifier>
+      <ows:Title>GoogleMapsCompatible_512</ows:Title>
+      <ows:Abstract>GoogleMapsCompatible_512 EPSG:3857</ows:Abstract>
+      <ows:Identifier>GoogleMapsCompatible_512</ows:Identifier>
+      <ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
+      <TileMatrix>
+        <ows:Identifier>0</ows:Identifier>
+        <ScaleDenominator>279541132.0143589</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>1</MatrixWidth>
+        <MatrixHeight>1</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>1</ows:Identifier>
+        <ScaleDenominator>139770566.0071794</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>2</MatrixWidth>
+        <MatrixHeight>2</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>2</ows:Identifier>
+        <ScaleDenominator>69885283.00358972</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>4</MatrixWidth>
+        <MatrixHeight>4</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>3</ows:Identifier>
+        <ScaleDenominator>34942641.501795</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>8</MatrixWidth>
+        <MatrixHeight>8</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>4</ows:Identifier>
+        <ScaleDenominator>17471320.750897</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>16</MatrixWidth>
+        <MatrixHeight>16</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>5</ows:Identifier>
+        <ScaleDenominator>8735660.3754487</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>32</MatrixWidth>
+        <MatrixHeight>32</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>6</ows:Identifier>
+        <ScaleDenominator>4367830.1877244</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>64</MatrixWidth>
+        <MatrixHeight>64</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>7</ows:Identifier>
+        <ScaleDenominator>2183915.0938622</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>128</MatrixWidth>
+        <MatrixHeight>128</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>8</ows:Identifier>
+        <ScaleDenominator>1091957.5469311</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>256</MatrixWidth>
+        <MatrixHeight>256</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>9</ows:Identifier>
+        <ScaleDenominator>545978.77346554</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>512</MatrixWidth>
+        <MatrixHeight>512</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>10</ows:Identifier>
+        <ScaleDenominator>272989.38673277</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>1024</MatrixWidth>
+        <MatrixHeight>1024</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>11</ows:Identifier>
+        <ScaleDenominator>136494.69336639</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>2048</MatrixWidth>
+        <MatrixHeight>2048</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>12</ows:Identifier>
+        <ScaleDenominator>68247.346683193</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>4096</MatrixWidth>
+        <MatrixHeight>4096</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>13</ows:Identifier>
+        <ScaleDenominator>34123.673341597</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>8192</MatrixWidth>
+        <MatrixHeight>8192</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>14</ows:Identifier>
+        <ScaleDenominator>17061.836670798</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>16384</MatrixWidth>
+        <MatrixHeight>16384</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>15</ows:Identifier>
+        <ScaleDenominator>8530.9183353991</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>32768</MatrixWidth>
+        <MatrixHeight>32768</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>16</ows:Identifier>
+        <ScaleDenominator>4265.4591676996</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>65536</MatrixWidth>
+        <MatrixHeight>65536</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>17</ows:Identifier>
+        <ScaleDenominator>2132.7295838498</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>131072</MatrixWidth>
+        <MatrixHeight>131072</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>18</ows:Identifier>
+        <ScaleDenominator>1066.364791924892</ScaleDenominator>
+        <TopLeftCorner>-20037508.34 20037508.34</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>262144</MatrixWidth>
+        <MatrixHeight>262144</MatrixHeight>
+      </TileMatrix>
+    </TileMatrixSet>
+    <TileMatrixSet>
+      <ows:Title>WGS84_256</ows:Title>
+      <ows:Abstract>WGS84_256 EPSG:4326</ows:Abstract>
+      <ows:Identifier>WGS84_256</ows:Identifier>
       <ows:SupportedCRS>urn:ogc:def:crs:EPSG::4326</ows:SupportedCRS>
       <TileMatrix>
         <ows:Identifier>0</ows:Identifier>
@@ -401,7 +597,185 @@
         <TileHeight>256</TileHeight>
         <MatrixWidth>524288</MatrixWidth>
         <MatrixHeight>262144</MatrixHeight>
-      </TileMatrix></TileMatrixSet>
+      </TileMatrix>
+    </TileMatrixSet>
+    <TileMatrixSet>
+      <ows:Title>WGS84_512</ows:Title>
+      <ows:Abstract>WGS84_512 EPSG:4326</ows:Abstract>
+      <ows:Identifier>WGS84_512</ows:Identifier>
+      <ows:SupportedCRS>urn:ogc:def:crs:EPSG::4326</ows:SupportedCRS>
+      <TileMatrix>
+        <ows:Identifier>0</ows:Identifier>
+        <ScaleDenominator>139770566.00718</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>2</MatrixWidth>
+        <MatrixHeight>1</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>1</ows:Identifier>
+        <ScaleDenominator>69885283.00359</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>4</MatrixWidth>
+        <MatrixHeight>2</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>2</ows:Identifier>
+        <ScaleDenominator>34942641.501795</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>8</MatrixWidth>
+        <MatrixHeight>4</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>3</ows:Identifier>
+        <ScaleDenominator>17471320.750897</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>16</MatrixWidth>
+        <MatrixHeight>8</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>4</ows:Identifier>
+        <ScaleDenominator>8735660.3754487</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>32</MatrixWidth>
+        <MatrixHeight>16</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>5</ows:Identifier>
+        <ScaleDenominator>4367830.1877244</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>64</MatrixWidth>
+        <MatrixHeight>32</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>6</ows:Identifier>
+        <ScaleDenominator>2183915.0938622</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>128</MatrixWidth>
+        <MatrixHeight>64</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>7</ows:Identifier>
+        <ScaleDenominator>1091957.5469311</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>256</MatrixWidth>
+        <MatrixHeight>128</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>8</ows:Identifier>
+        <ScaleDenominator>545978.77346554</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>512</MatrixWidth>
+        <MatrixHeight>256</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>9</ows:Identifier>
+        <ScaleDenominator>272989.38673277</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>1024</MatrixWidth>
+        <MatrixHeight>512</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>10</ows:Identifier>
+        <ScaleDenominator>136494.69336639</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>2048</MatrixWidth>
+        <MatrixHeight>1024</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>11</ows:Identifier>
+        <ScaleDenominator>68247.346683193</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>4096</MatrixWidth>
+        <MatrixHeight>2048</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>12</ows:Identifier>
+        <ScaleDenominator>34123.673341597</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>8192</MatrixWidth>
+        <MatrixHeight>4096</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>13</ows:Identifier>
+        <ScaleDenominator>17061.836670798</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>16384</MatrixWidth>
+        <MatrixHeight>8192</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>14</ows:Identifier>
+        <ScaleDenominator>8530.9183353991</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>32768</MatrixWidth>
+        <MatrixHeight>16384</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>15</ows:Identifier>
+        <ScaleDenominator>4265.4591676996</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>65536</MatrixWidth>
+        <MatrixHeight>32768</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>16</ows:Identifier>
+        <ScaleDenominator>2132.7295838498</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>131072</MatrixWidth>
+        <MatrixHeight>65536</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>17</ows:Identifier>
+        <ScaleDenominator>1066.3647919249</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>262144</MatrixWidth>
+        <MatrixHeight>131072</MatrixHeight>
+      </TileMatrix>
+      <TileMatrix>
+        <ows:Identifier>18</ows:Identifier>
+        <ScaleDenominator>533.182</ScaleDenominator>
+        <TopLeftCorner>90 -180</TopLeftCorner>
+        <TileWidth>512</TileWidth>
+        <TileHeight>512</TileHeight>
+        <MatrixWidth>524288</MatrixWidth>
+        <MatrixHeight>262144</MatrixHeight>
+      </TileMatrix>
+    </TileMatrixSet>
   </Contents>
   <ServiceMetadataURL xlink:href="{{baseUrl}}wmts/{{id}}/"/>
 </Capabilities>

src/serve_data.js

@@ -173,11 +173,13 @@ export const serve_data = {
       if (!item) {
         return res.sendStatus(404);
       }
+      const tileSize = undefined;
       const info = clone(item.tileJSON);
       info.tiles = getTileUrls(
         req,
         info.tiles,
         `data/${req.params.id}`,
+        tileSize,
         info.format,
         item.publicUrl,
         {

src/serve_rendered.js

@@ -532,7 +532,7 @@ export const serve_rendered = {
     const app = express().disable('x-powered-by');
 
     app.get(
-      `/:id/:z(\\d+)/:x(\\d+)/:y(\\d+):scale(${scalePattern})?.:format([\\w]+)`,
+      `/:id/(:tileSize(256|512)/)?:z(\\d+)/:x(\\d+)/:y(\\d+):scale(${scalePattern})?.:format([\\w]+)`,
       (req, res, next) => {
         const item = repo[req.params.id];
         if (!item) {
@@ -552,6 +552,8 @@ export const serve_rendered = {
         const y = req.params.y | 0;
         const scale = getScale(req.params.scale);
         const format = req.params.format;
+        const tileSize = parseInt(req.params.tileSize, 10) || 256;
+
         if (
           z < 0 ||
           x < 0 ||
@@ -562,11 +564,10 @@ export const serve_rendered = {
         ) {
           return res.status(404).send('Out of bounds');
         }
-        const tileSize = 256;
         const tileCenter = mercator.ll(
           [
-            ((x + 0.5) / (1 << z)) * (256 << z),
+            ((x + 0.5) / (1 << z)) * (tileSize << z),
-            ((y + 0.5) / (1 << z)) * (256 << z),
+            ((y + 0.5) / (1 << z)) * (tileSize << z),
           ],
           z,
         );
@@ -821,16 +822,18 @@ export const serve_rendered = {
       );
     }
 
-    app.get('/:id.json', (req, res, next) => {
+    app.get('/(:tileSize(256|512)/)?:id.json', (req, res, next) => {
       const item = repo[req.params.id];
       if (!item) {
         return res.sendStatus(404);
       }
+      const tileSize = parseInt(req.params.tileSize, 10) || undefined;
       const info = clone(item.tileJSON);
       info.tiles = getTileUrls(
         req,
         info.tiles,
         `styles/${req.params.id}`,
+        tileSize,
         info.format,
         item.publicUrl,
       );

src/server.js

@@ -356,6 +356,7 @@ function start(opts) {
 
   const addTileJSONs = (arr, req, type) => {
     for (const id of Object.keys(serving[type])) {
+      const tileSize = 256;
       const info = clone(serving[type][id].tileJSON);
       let path = '';
       if (type === 'rendered') {
@@ -367,6 +368,7 @@ function start(opts) {
         req,
         info.tiles,
         path,
+        tileSize,
         info.format,
         opts.publicUrl,
         {
@@ -454,20 +456,19 @@ function start(opts) {
       if (style.serving_rendered) {
         const { center } = style.serving_rendered.tileJSON;
         if (center) {
-          style.viewer_hash = `#${center[2]}/${center[1].toFixed(
+          style.viewer_hash = `#${center[2]}/${center[1].toFixed(5)}/${center[0].toFixed(5)}`;
-            5,
-          )}/${center[0].toFixed(5)}`;
 
           const centerPx = mercator.px([center[0], center[1]], center[2]);
-          style.thumbnail = `${center[2]}/${Math.floor(
+          // Set thumbnail default size to be 256px x 256px
-            centerPx[0] / 256,
+          style.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.png`;
-          )}/${Math.floor(centerPx[1] / 256)}.png`;
         }
 
+        const tileSize = 512;
         style.xyz_link = getTileUrls(
           req,
           style.serving_rendered.tileJSON.tiles,
           `styles/${id}`,
+          tileSize,
           style.serving_rendered.tileJSON.format,
           opts.publicUrl,
         )[0];
@@ -493,22 +494,23 @@ function start(opts) {
       if (!data.is_vector) {
         if (center) {
           const centerPx = mercator.px([center[0], center[1]], center[2]);
-          data.thumbnail = `${center[2]}/${Math.floor(
+          data.thumbnail = `${center[2]}/${Math.floor(centerPx[0] / 256)}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
-            centerPx[0] / 256,
+        }
-          )}/${Math.floor(centerPx[1] / 256)}.${tileJSON.format}`;
       }
 
+      const tileSize = undefined;
       data.xyz_link = getTileUrls(
         req,
         tileJSON.tiles,
         `data/${id}`,
+        tileSize,
         tileJSON.format,
         opts.publicUrl,
         {
           pbf: options.pbfAlias,
         },
       )[0];
-      }
+
       if (data.filesize) {
         let suffix = 'kB';
         let size = parseInt(tileJSON.filesize, 10) / 1024;

src/utils.js

@@ -26,7 +26,15 @@ export const getPublicUrl = (publicUrl, req) => {
   return getUrlObject(req).toString();
 };
 
-export const getTileUrls = (req, domains, path, format, publicUrl, aliases) => {
+export const getTileUrls = (
+  req,
+  domains,
+  path,
+  tileSize,
+  format,
+  publicUrl,
+  aliases,
+) => {
   const urlObject = getUrlObject(req);
   if (domains) {
     if (domains.constructor === String && domains.length > 0) {
@@ -67,15 +75,20 @@ export const getTileUrls = (req, domains, path, format, publicUrl, aliases) => {
     format = aliases[format];
   }
 
+  let tileParams = `{z}/{x}/{y}`;
+  if (tileSize && ['png', 'jpg', 'jpeg', 'webp'].includes(format)) {
+    tileParams = `${tileSize}/{z}/{x}/{y}`;
+  }
+
   const uris = [];
   if (!publicUrl) {
     for (const domain of domains) {
       uris.push(
-        `${req.protocol}://${domain}/${path}/{z}/{x}/{y}.${format}${query}`,
+        `${req.protocol}://${domain}/${path}/${tileParams}.${format}${query}`,
       );
     }
   } else {
-    uris.push(`${publicUrl}${path}/{z}/{x}/{y}.${format}${query}`);
+    uris.push(`${publicUrl}${path}/${tileParams}.${format}${query}`);
   }
 
   return uris;

test/tiles_rendered.js

@@ -1,8 +1,30 @@
-const testTile = function (prefix, z, x, y, format, status, scale, type) {
+var testTile = function (
+  prefix,
+  tileSize = 256,
+  z,
+  x,
+  y,
+  format,
+  status,
+  scale,
+  type,
+) {
   if (scale) y += '@' + scale + 'x';
-  const path = '/styles/' + prefix + '/' + z + '/' + x + '/' + y + '.' + format;
+  var path =
+    '/styles/' +
+    prefix +
+    '/' +
+    tileSize +
+    '/' +
+    z +
+    '/' +
+    x +
+    '/' +
+    y +
+    '.' +
+    format;
   it(path + ' returns ' + status, function (done) {
-    const test = supertest(app).get(path);
+    var test = supertest(app).get(path);
     test.expect(status);
     if (type) test.expect('Content-Type', type);
     test.end(done);
@@ -14,33 +36,40 @@ const prefix = 'test-style';
 describe('Raster tiles', function () {
   describe('valid requests', function () {
     describe('various formats', function () {
-      testTile(prefix, 0, 0, 0, 'png', 200, undefined, /image\/png/);
+      testTile(prefix, 256, 0, 0, 0, 'png', 200, undefined, /image\/png/);
-      testTile(prefix, 0, 0, 0, 'jpg', 200, undefined, /image\/jpeg/);
+      testTile(prefix, 512, 0, 0, 0, 'png', 200, undefined, /image\/png/);
-      testTile(prefix, 0, 0, 0, 'jpeg', 200, undefined, /image\/jpeg/);
+      testTile(prefix, 256, 0, 0, 0, 'jpg', 200, undefined, /image\/jpeg/);
-      testTile(prefix, 0, 0, 0, 'webp', 200, undefined, /image\/webp/);
+      testTile(prefix, 512, 0, 0, 0, 'jpg', 200, undefined, /image\/jpeg/);
+      testTile(prefix, 256, 0, 0, 0, 'jpeg', 200, undefined, /image\/jpeg/);
+      testTile(prefix, 512, 0, 0, 0, 'jpeg', 200, undefined, /image\/jpeg/);
+      testTile(prefix, 256, 0, 0, 0, 'webp', 200, undefined, /image\/webp/);
+      testTile(prefix, 512, 0, 0, 0, 'webp', 200, undefined, /image\/webp/);
     });
 
     describe('different coordinates and scales', function () {
-      testTile(prefix, 1, 1, 1, 'png', 200);
+      testTile(prefix, 256, 1, 0, 0, 'png', 200);
-
+      testTile(prefix, 512, 1, 0, 0, 'png', 200);
-      testTile(prefix, 0, 0, 0, 'png', 200, 2);
+      testTile(prefix, 256, 0, 0, 0, 'png', 200, 2);
-      testTile(prefix, 0, 0, 0, 'png', 200, 3);
+      testTile(prefix, 512, 0, 0, 0, 'png', 200, 2);
-      testTile(prefix, 2, 1, 1, 'png', 200, 3);
+      testTile(prefix, 256, 0, 0, 0, 'png', 200, 3);
+      testTile(prefix, 512, 0, 0, 0, 'png', 200, 3);
+      testTile(prefix, 256, 2, 1, 1, 'png', 200, 3);
+      testTile(prefix, 512, 2, 1, 1, 'png', 200, 3);
     });
   });
 
   describe('invalid requests return 4xx', function () {
-    testTile('non_existent', 0, 0, 0, 'png', 404);
+    testTile('non_existent', 256, 0, 0, 0, 'png', 404);
-    testTile(prefix, -1, 0, 0, 'png', 404);
+    testTile(prefix, 256, -1, 0, 0, 'png', 404);
-    testTile(prefix, 25, 0, 0, 'png', 404);
+    testTile(prefix, 256, 25, 0, 0, 'png', 404);
-    testTile(prefix, 0, 1, 0, 'png', 404);
+    testTile(prefix, 256, 0, 1, 0, 'png', 404);
-    testTile(prefix, 0, 0, 1, 'png', 404);
+    testTile(prefix, 256, 0, 0, 1, 'png', 404);
-    testTile(prefix, 0, 0, 0, 'gif', 400);
+    testTile(prefix, 256, 0, 0, 0, 'gif', 400);
-    testTile(prefix, 0, 0, 0, 'pbf', 400);
+    testTile(prefix, 256, 0, 0, 0, 'pbf', 400);
 
-    testTile(prefix, 0, 0, 0, 'png', 404, 1);
+    testTile(prefix, 256, 0, 0, 0, 'png', 404, 1);
-    testTile(prefix, 0, 0, 0, 'png', 404, 5);
+    testTile(prefix, 256, 0, 0, 0, 'png', 404, 5);
 
-    // testTile('hybrid', 0, 0, 0, 'png', 404); //TODO: test this
+    testTile(prefix, 300, 0, 0, 0, 'png', 404);
   });
 });