From 024788134342c0ba50556ff4dc6b70ece6e880d8 Mon Sep 17 00:00:00 2001
From: birdage <andrewbird666@gmail.com>
Date: Tue, 18 Jul 2017 21:01:00 -0400
Subject: [PATCH 1/2] updates to support path

---
 public/templates/data.tmpl   | 16 +++++++--------
 public/templates/index.tmpl  | 30 ++++++++++++++--------------
 public/templates/viewer.tmpl | 14 ++++++-------
 src/serve_data.js            |  5 ++++-
 src/serve_rendered.js        |  3 ++-
 src/serve_style.js           |  4 +++-
 src/server.js                | 38 +++++++++++++++++++++---------------
 src/utils.js                 |  7 ++++++-
 8 files changed, 67 insertions(+), 50 deletions(-)
diff --git a/public/templates/data.tmpl b/public/templates/data.tmpl
index 3d05522..fe40c9f 100644
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -5,10 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl-inspect.css{{&key_query}}" />
-  <script src="/mapbox-gl.js{{&key_query}}"></script>
-  <script src="/mapbox-gl-inspect.min.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox-gl.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox-gl-inspect.css{{&key_query}}" />
+  <script src="{{baseURL}}/mapbox-gl.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/mapbox-gl-inspect.min.js{{&key_query}}"></script>
   <style>
     body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -19,8 +19,8 @@
   {{/is_vector}}
   {{^is_vector}}
   <link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" />
-  <script src="/mapbox.js{{&key_query}}"></script>
-  <script src="/leaflet-hash.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/mapbox.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/leaflet-hash.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -42,7 +42,7 @@
       sources: {
         'vector_layer_': {
           type: 'vector',
-          url: '/data/{{id}}.json{{&key_query}}'
+          url: '{{baseURL}}/data/{{id}}.json{{&key_query}}'
         }
       },
       layers: []
@@ -74,7 +74,7 @@
   <h1 style="display:none;">{{name}}</h1>
   <div id='map'></div>
   <script>
-    var map = L.mapbox.map('map', '/data/{{id}}.json{{&key_query}}', { zoomControl: false });
+    var map = L.mapbox.map('map', '{{baseURL}}/data/{{id}}.json{{&key_query}}', { zoomControl: false });
     map.eachLayer(function(layer) {
       // do not add scale prefix even if retina display is detected
       layer.scalePrefix = '.';
diff --git a/public/templates/index.tmpl b/public/templates/index.tmpl
index 8b37ed1..819b556 100644
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>TileServer GL - Server for vector and raster maps with GL styles</title>
-  <link rel="stylesheet" type="text/css" href="/index.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/index.css{{&key_query}}" />
   <script>
     function toggle_xyz(id) {
       var el = document.getElementById(id);
@@ -17,7 +17,7 @@
 </head>
 <body>
   <section>
-    <h1 class="title {{#if is_light}}light{{/if}}"><img src="/images/logo.png" alt="TileServer GL" /></h1>
+    <h1 class="title {{#if is_light}}light{{/if}}"><img src="{{baseURL}}/images/logo.png" alt="TileServer GL" /></h1>
     <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
     {{#if styles}}
       <h2 class="box-header">Styles</h2>
@@ -25,9 +25,9 @@
       {{#each styles}}
         <div class="item">
           {{#if thumbnail}}
-            <img src="/styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
+            <img src={{baseURL}}"/styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
-            <img src="/images/placeholder.png" alt="{{name}} preview" />
+            <img src="{{baseURL}}/images/placeholder.png" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
@@ -35,10 +35,10 @@
             <p class="services">
               services:
               {{#if serving_data}}
-                <a href="/styles/{{@key}}/style.json{{&../key_query}}">GL Style</a>
+                <a href="{{baseURL}}/styles/{{@key}}/style.json{{&../key_query}}">GL Style</a>
               {{/if}}
               {{#if serving_rendered}}
-                {{#if serving_data}}| {{/if}}<a href="/styles/{{@key}}.json{{&../key_query}}">TileJSON</a>
+                {{#if serving_data}}| {{/if}}<a href="{{baseURL}}/styles/{{@key}}.json{{&../key_query}}">TileJSON</a>
               {{/if}}
               {{#if wmts_link}}
                 | <a href="{{&wmts_link}}">WMTS</a>
@@ -52,14 +52,14 @@
           <div class="viewers">
             {{#if serving_data}}
               {{#if serving_rendered}}
-                <a class="btn" href="/styles/{{@key}}/{{&../key_query}}{{viewer_hash}}">Viewer</a>
+                <a class="btn" href="{{baseURL}}/styles/{{@key}}/{{&../key_query}}{{viewer_hash}}">Viewer</a>
               {{/if}}
             {{/if}}
             {{#if serving_rendered}}
-              <a class="btn" href="/styles/{{@key}}/?{{&../key_query_part}}raster{{viewer_hash}}">Raster</a>
+              <a class="btn" href="{{baseURL}}/styles/{{@key}}/?{{&../key_query_part}}raster{{viewer_hash}}">Raster</a>
             {{/if}}
             {{#if serving_data}}
-              <a class="btn" href="/styles/{{@key}}/?{{&../key_query_part}}vector{{viewer_hash}}">Vector</a>
+              <a class="btn" href="{{baseURL}}/styles/{{@key}}/?{{&../key_query_part}}vector{{viewer_hash}}">Vector</a>
             {{/if}}
           </div>
         </div>
@@ -72,15 +72,15 @@
       {{#each data}}
         <div class="item">
           {{#if thumbnail}}
-            <img src="/data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
+            <img src="{{baseURL}}/data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
           {{else}}
-            <img src="/images/placeholder.png" alt="{{name}} preview" />
+            <img src="{{baseURL}}/images/placeholder.png" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
             <p class="identifier">identifier: {{@key}}{{#if formatted_filesize}} | size: {{formatted_filesize}}{{/if}} | type: {{#is_vector}}vector{{/is_vector}}{{^is_vector}}raster{{/is_vector}} data</p>
             <p class="services">
-              services: <a href="/data/{{@key}}.json{{&../key_query}}">TileJSON</a>
+              services: <a href="{{baseURL}}/data/{{@key}}.json{{&../key_query}}">TileJSON</a>
               {{#if wmts_link}}
                 | <a href="{{&wmts_link}}">WMTS</a>
               {{/if}}
@@ -92,10 +92,10 @@
           </div>
           <div class="viewers">
             {{#is_vector}}
-            <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Inspect</a>
+            <a class="btn" href="{{baseURL}}/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Inspect</a>
             {{/is_vector}}
             {{^is_vector}}
-            <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">View</a>
+            <a class="btn" href="{{baseURL}}/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">View</a>
             {{/is_vector}}
           </div>
         </div>
@@ -104,7 +104,7 @@
     {{/if}}
   </section>
   <footer>
-    <a href="https://www.klokantech.com/" target="_blank"><img src="/images/klokantech.png" /></a>
+    <a href="https://www.klokantech.com/" target="_blank"><img src="{{baseURL}}/images/klokantech.png" /></a>
     <p>
       <a href="https://github.com/klokantech/tileserver-gl" target="_blank">Powered by TileServer GL ({{server_version}})</a> – <a href="https://www.klokantech.com/" target="_blank">an open-source project from Klokan Technologies GmbH.</a> <img src="https://t.klokantech.com/8073932/19" class="t" />
     </p>
diff --git a/public/templates/viewer.tmpl b/public/templates/viewer.tmpl
index 243848f..7971b9f 100644
--- a/public/templates/viewer.tmpl
+++ b/public/templates/viewer.tmpl
@@ -4,11 +4,11 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox-gl.css{{&key_query}}" />
   <script src="/mapbox-gl.js{{&key_query}}"></script>
-  <link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" />
-  <script src="/mapbox.js{{&key_query}}"></script>
-  <script src="/leaflet-hash.js{{&key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox.css{{&key_query}}" />
+  <script src="{{baseURL}}/mapbox.js{{&key_query}}"></script>
+  <script src="{{baseURL}}/leaflet-hash.js{{&key_query}}"></script>
   <style>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -24,15 +24,15 @@
         (q.indexOf('raster') >= 0 ? 'raster' :
           (mapboxgl.supported() ? 'vector' : 'raster'));
     if (preference == 'vector') {
-      mapboxgl.setRTLTextPlugin('/mapbox-gl-rtl-text.js{{&key_query}}');
+      mapboxgl.setRTLTextPlugin('{{baseURL}}/mapbox-gl-rtl-text.js{{&key_query}}');
       var map = new mapboxgl.Map({
         container: 'map',
-        style: '/styles/{{id}}/style.json{{&key_query}}',
+        style: '{{baseURL}}/styles/{{id}}/style.json{{&key_query}}',
         hash: true
       });
       map.addControl(new mapboxgl.NavigationControl());
     } else {
-      var map = L.mapbox.map('map', '/styles/{{id}}.json{{&key_query}}', { zoomControl: false });
+      var map = L.mapbox.map('map', '{{baseURL}}/styles/{{id}}.json{{&key_query}}', { zoomControl: false });
       new L.Control.Zoom({ position: 'topright' }).addTo(map);
       setTimeout(function() {
         new L.Hash(map);
diff --git a/src/serve_data.js b/src/serve_data.js
index 523a89a..d131548 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -4,6 +4,8 @@ var fs = require('fs'),
     path = require('path'),
     zlib = require('zlib');
 
+var baseURL = options.baseURL;
+
 var clone = require('clone'),
     express = require('express'),
     mbtiles = require('@mapbox/mbtiles'),
@@ -160,7 +162,8 @@ module.exports = function(options, repo, params, id, styles) {
     var info = clone(tileJSON);
     info.tiles = utils.getTileUrls(req, info.tiles,
                                    'data/' + id, info.format, {
-                                     'pbf': options.pbfAlias
+                                     'pbf': options.pbfAlias,
+                                     baseURL
                                    });
     return res.send(info);
   });
diff --git a/src/serve_rendered.js b/src/serve_rendered.js
index 3c666aa..eccc827 100644
--- a/src/serve_rendered.js
+++ b/src/serve_rendered.js
@@ -6,6 +6,7 @@ var advancedPool = require('advanced-pool'),
     util = require('util'),
     zlib = require('zlib');
 
+var baseURL = options.baseURL;
 // sharp has to be required before node-canvas
 // see https://github.com/lovell/sharp/issues/371
 var sharp = require('sharp');
@@ -697,7 +698,7 @@ module.exports = function(options, repo, params, id, dataResolver) {
   app.get('/' + id + '.json', function(req, res, next) {
     var info = clone(tileJSON);
     info.tiles = utils.getTileUrls(req, info.tiles,
-                                   'styles/' + id, info.format);
+                                   'styles/' + id, info.format, baseURL);
     return res.send(info);
   });
 
diff --git a/src/serve_style.js b/src/serve_style.js
index cd9dfe9..37f2f48 100644
--- a/src/serve_style.js
+++ b/src/serve_style.js
@@ -3,6 +3,8 @@
 var path = require('path'),
     fs = require('fs');
 
+var baseURL = options.baseURL;
+
 var clone = require('clone'),
     express = require('express');
 
@@ -79,7 +81,7 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
         query = '?' + queryParams.join('&');
       }
       return url.replace(
-          'local://', req.protocol + '://' + req.headers.host + '/') + query;
+          'local://', (baseURL ? baseURL : req.protocol + '://' + req.headers.host + '/') + query;
     };
 
     var styleJSON_ = clone(styleJSON);
diff --git a/src/server.js b/src/server.js
index 04a9ea6..21ff7ea 100644
--- a/src/server.js
+++ b/src/server.js
@@ -7,6 +7,8 @@ process.env.UV_THREADPOOL_SIZE =
 var fs = require('fs'),
     path = require('path');
 
+var baseURL = options.baseURL;
+
 var base64url = require('base64url'),
     clone = require('clone'),
     cors = require('cors'),
@@ -133,7 +135,7 @@ function start(opts) {
         }, function(font) {
           serving.fonts[font] = true;
         }).then(function(sub) {
-          app.use('/styles/', sub);
+          app.use('/tiles/styles/', sub);
         }));
     }
     if (item.serve_rendered !== false) {
@@ -150,7 +152,7 @@ function start(opts) {
               return mbtilesFile;
             }
           ).then(function(sub) {
-            app.use('/styles/', sub);
+            app.use('/tiles/styles/', sub);
           })
         );
       } else {
@@ -161,7 +163,7 @@ function start(opts) {
 
   startupPromises.push(
     serve_font(options, serving.fonts).then(function(sub) {
-      app.use('/', sub);
+      app.use('/tiles/', sub);
     })
   );
 
@@ -174,12 +176,12 @@ function start(opts) {
 
     startupPromises.push(
       serve_data(options, serving.data, item, id, serving.styles).then(function(sub) {
-        app.use('/data/', sub);
+        app.use('/tiles/data/', sub);
       })
     );
   });
 
-  app.get('/styles.json', function(req, res, next) {
+  app.get('/tiles/styles.json', function(req, res, next) {
     var result = [];
     var query = req.query.key ? ('?key=' + req.query.key) : '';
     Object.keys(serving.styles).forEach(function(id) {
@@ -188,8 +190,8 @@ function start(opts) {
         version: styleJSON.version,
         name: styleJSON.name,
         id: id,
-        url: req.protocol + '://' + req.headers.host +
-             '/styles/' + id + '/style.json' + query
+        url: (baseURL ? baseURL : req.protocol + '://' + req.headers.host +
+             '/tiles/styles/' + id + '/style.json' + query
       });
     });
     res.send(result);
@@ -200,13 +202,13 @@ function start(opts) {
       var info = clone(serving[type][id]);
       var path = '';
       if (type == 'rendered') {
-        path = 'styles/' + id;
+        path = 'tiles/styles/' + id;
       } else {
         path = type + '/' + id;
       }
       info.tiles = utils.getTileUrls(req, info.tiles, path, info.format, {
-        'pbf': options.pbfAlias
-      });
+        'pbf': options.pbfAlias,
+      }, baseURL);
       arr.push(info);
     });
     return arr;
@@ -224,7 +226,7 @@ function start(opts) {
 
   //------------------------------------
   // serve web presentations
-  app.use('/', express.static(path.join(__dirname, '../public/resources')));
+  app.use('/tiles/', express.static(path.join(__dirname, '../public/resources')));
 
   var templates = path.join(__dirname, '../public/templates');
   var serveTemplate = function(urlPath, template, dataGetter) {
@@ -288,12 +290,13 @@ function start(opts) {
         var query = req.query.key ? ('?key=' + req.query.key) : '';
         style.wmts_link = 'http://wmts.maptiler.com/' +
           base64url('http://' + req.headers.host +
-            '/styles/' + id + '.json' + query) + '/wmts';
+            '/tiles/styles/' + id + '.json' + query) + '/wmts';
 
         var tiles = utils.getTileUrls(
             req, style.serving_rendered.tiles,
-            'styles/' + id, style.serving_rendered.format);
+            'styles/' + id, style.serving_rendered.format, baseURL);
         style.xyz_link = tiles[0];
+        style.baseURL = baseURL;
       }
     });
     var data = clone(serving.data || {});
@@ -322,7 +325,7 @@ function start(opts) {
         var tiles = utils.getTileUrls(
             req, data_.tiles, 'data/' + id, data_.format, {
               'pbf': options.pbfAlias
-            });
+            },baseURL);
         data_.xyz_link = tiles[0];
       }
       if (data_.filesize) {
@@ -341,11 +344,12 @@ function start(opts) {
     });
     return {
       styles: Object.keys(styles).length ? styles : null,
-      data: Object.keys(data).length ? data : null
+      data: Object.keys(data).length ? data : null,
+      baseURL: baseURL
     };
   });
 
-  serveTemplate('/styles/:id/$', 'viewer', function(req) {
+  serveTemplate('/tiles/styles/:id/$', 'viewer', function(req) {
     var id = req.params.id;
     var style = clone((config.styles || {})[id]);
     if (!style) {
@@ -355,6 +359,7 @@ function start(opts) {
     style.name = (serving.styles[id] || serving.rendered[id]).name;
     style.serving_data = serving.styles[id];
     style.serving_rendered = serving.rendered[id];
+    style.baseURL = baseURL;
     return style;
   });
 
@@ -372,6 +377,7 @@ function start(opts) {
     }
     data.id = id;
     data.is_vector = data.format == 'pbf';
+    data.baseURL = baseURL;
     return data;
   });
 
diff --git a/src/utils.js b/src/utils.js
index a63731e..20eeddd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -6,7 +6,7 @@ var path = require('path'),
 var clone = require('clone'),
     glyphCompose = require('glyph-pbf-composite');
 
-module.exports.getTileUrls = function(req, domains, path, format, aliases) {
+module.exports.getTileUrls = function(req, domains, path, format, aliases, baseURL) {
 
   if (domains) {
     if (domains.constructor === String && domains.length > 0) {
@@ -36,6 +36,7 @@ module.exports.getTileUrls = function(req, domains, path, format, aliases) {
 
   var key = req.query.key;
   var queryParams = [];
+
   if (req.query.key) {
     queryParams.push('key=' + req.query.key);
   }
@@ -44,6 +45,10 @@ module.exports.getTileUrls = function(req, domains, path, format, aliases) {
   }
   var query = queryParams.length > 0 ? ('?' + queryParams.join('&')) : '';
 
+  if (baseURL) {
+    return [baseURL + '/' + path + '/{z}/{x}/{y}.' + format + query]
+  }
+
   if (aliases && aliases[format]) {
     format = aliases[format];
   }

From 4eb42506ad5e89751c9498afb1e150ade98c7d25 Mon Sep 17 00:00:00 2001
From: birdage <andrewbird666@gmail.com>
Date: Tue, 18 Jul 2017 21:03:45 -0400
Subject: [PATCH 2/2] revert some changes

---
 src/serve_data.js |  6 +++---
 src/server.js     | 20 ++++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/serve_data.js b/src/serve_data.js
index d131548..6122d4e 100644
--- a/src/serve_data.js
+++ b/src/serve_data.js
@@ -162,9 +162,9 @@ module.exports = function(options, repo, params, id, styles) {
     var info = clone(tileJSON);
     info.tiles = utils.getTileUrls(req, info.tiles,
                                    'data/' + id, info.format, {
-                                     'pbf': options.pbfAlias,
-                                     baseURL
-                                   });
+                                     'pbf': options.pbfAlias
+                                   },
+                                   baseURL);
     return res.send(info);
   });
 
diff --git a/src/server.js b/src/server.js
index 21ff7ea..5cfa049 100644
--- a/src/server.js
+++ b/src/server.js
@@ -135,7 +135,7 @@ function start(opts) {
         }, function(font) {
           serving.fonts[font] = true;
         }).then(function(sub) {
-          app.use('/tiles/styles/', sub);
+          app.use('/styles/', sub);
         }));
     }
     if (item.serve_rendered !== false) {
@@ -152,7 +152,7 @@ function start(opts) {
               return mbtilesFile;
             }
           ).then(function(sub) {
-            app.use('/tiles/styles/', sub);
+            app.use('/styles/', sub);
           })
         );
       } else {
@@ -163,7 +163,7 @@ function start(opts) {
 
   startupPromises.push(
     serve_font(options, serving.fonts).then(function(sub) {
-      app.use('/tiles/', sub);
+      app.use('/', sub);
     })
   );
 
@@ -176,12 +176,12 @@ function start(opts) {
 
     startupPromises.push(
       serve_data(options, serving.data, item, id, serving.styles).then(function(sub) {
-        app.use('/tiles/data/', sub);
+        app.use('/data/', sub);
       })
     );
   });
 
-  app.get('/tiles/styles.json', function(req, res, next) {
+  app.get('/styles.json', function(req, res, next) {
     var result = [];
     var query = req.query.key ? ('?key=' + req.query.key) : '';
     Object.keys(serving.styles).forEach(function(id) {
@@ -191,7 +191,7 @@ function start(opts) {
         name: styleJSON.name,
         id: id,
         url: (baseURL ? baseURL : req.protocol + '://' + req.headers.host +
-             '/tiles/styles/' + id + '/style.json' + query
+             '/styles/' + id + '/style.json' + query
       });
     });
     res.send(result);
@@ -202,7 +202,7 @@ function start(opts) {
       var info = clone(serving[type][id]);
       var path = '';
       if (type == 'rendered') {
-        path = 'tiles/styles/' + id;
+        path = '/styles/' + id;
       } else {
         path = type + '/' + id;
       }
@@ -226,7 +226,7 @@ function start(opts) {
 
   //------------------------------------
   // serve web presentations
-  app.use('/tiles/', express.static(path.join(__dirname, '../public/resources')));
+  app.use('/', express.static(path.join(__dirname, '../public/resources')));
 
   var templates = path.join(__dirname, '../public/templates');
   var serveTemplate = function(urlPath, template, dataGetter) {
@@ -290,7 +290,7 @@ function start(opts) {
         var query = req.query.key ? ('?key=' + req.query.key) : '';
         style.wmts_link = 'http://wmts.maptiler.com/' +
           base64url('http://' + req.headers.host +
-            '/tiles/styles/' + id + '.json' + query) + '/wmts';
+            '/styles/' + id + '.json' + query) + '/wmts';
 
         var tiles = utils.getTileUrls(
             req, style.serving_rendered.tiles,
@@ -349,7 +349,7 @@ function start(opts) {
     };
   });
 
-  serveTemplate('/tiles/styles/:id/$', 'viewer', function(req) {
+  serveTemplate('/styles/:id/$', 'viewer', function(req) {
     var id = req.params.id;
     var style = clone((config.styles || {})[id]);
     if (!style) {
