Minor WMTS link bugfix

Update version
Fix viewer vector/raster autodetection
2016-06-29 16:23:49 +02:00 · 2016-06-29 16:12:42 +02:00 · 2016-06-29 15:14:51 +02:00 · 2016-06-29 15:08:56 +02:00 · 2016-06-29 14:57:11 +02:00 · 2016-06-28 07:48:30 +02:00
6 changed files with 69 additions and 40 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "tileserver-gl",
-  "version": "0.0.3",
+  "version": "0.5.0",
  "description": "Map tile server for JSON GL styles - serverside generated raster tiles",
  "main": "src/main.js",
  "authors": [
@@ -19,7 +19,7 @@
    "advanced-pool": "0.3.2",
    "canvas": "1.4.0",
    "clone": "1.0.2",
-    "color": "0.11.2",
+    "color": "0.11.3",
    "cors": "2.7.1",
    "express": "4.14.0",
    "handlebars": "4.0.5",
--- a/public/templates/data.tmpl
+++ b/public/templates/data.tmpl
@@ -4,8 +4,8 @@
  <meta charset="UTF-8">
  <title>{{name}} - TileServer GL</title>
  {{#is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css" />
-  <script src="/mapbox-gl.js"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&access_key_query}}" />
+  <script src="/mapbox-gl.js{{&access_key_query}}"></script>
  <style>
    body {background:#000;color:#ccc;}
    #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -16,9 +16,9 @@
  </style>
  {{/is_vector}}
  {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="/mapbox.css" />
-  <script src="/mapbox.js"></script>
-  <script src="/leaflet-hash.js"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox.css{{&access_key_query}}" />
+  <script src="/mapbox.js{{&access_key_query}}"></script>
+  <script src="/leaflet-hash.js{{&access_key_query}}"></script>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -97,7 +97,7 @@
    }
  };
  xhttp.responseType = 'json';
-  xhttp.open('GET', '/data/{{id}}.json', true);
+  xhttp.open('GET', '/data/{{id}}.json{{&access_key_query}}', true);
  xhttp.send();

  var propertyList = document.getElementById('propertyList');
@@ -116,7 +116,7 @@
  <h1 style="display:none;">{{name}}</h1>
  <div id='map'></div>
  <script>
-    var map = L.mapbox.map('map', '/data/{{id}}.json', { zoomControl: false });
+    var map = L.mapbox.map('map', '/data/{{id}}.json{{&access_key_query}}', { zoomControl: false });
    new L.Control.Zoom({ position: 'topright' }).addTo(map);
    setTimeout(function() {
      new L.Hash(map);
--- a/public/templates/index.tmpl
+++ b/public/templates/index.tmpl
@@ -3,7 +3,7 @@
 <head>
  <meta charset="UTF-8">
  <title>TileServerGL</title>
-  <link rel="stylesheet" type="text/css" href="/index.css" />
+  <link rel="stylesheet" type="text/css" href="/index.css{{&access_key_query}}" />
 </head>
 <body>
  <section>
@@ -13,25 +13,28 @@
    {{#each styles}}
      <div class="item">
        {{#if thumbnail}}
-          <img src="/styles/{{@key}}/rendered/{{thumbnail}}" alt="{{name}} preview" />
+          <img src="/styles/{{@key}}/rendered/{{thumbnail}}{{&../access_key_query}}" alt="{{name}} preview" />
        {{else}}
          <div class="sample-img"></div>
        {{/if}}
        <h3>{{name}}</h3>
        <p>Id: {{@key}}
          {{#if serving_rendered}}
-            | <a href="/styles/{{@key}}/rendered.json">TileJSON</a>
+            | <a href="/styles/{{@key}}/rendered.json{{&../access_key_query}}">TileJSON</a>
+            {{#if wmts_link}}
+              | <a href="{{&wmts_link}}">WMTS Service</a>
+            {{/if}}
          {{/if}}
        </p>
        {{#if serving_data}}
-          <a class="btn" href="/styles/{{@key}}/?vector{{viewer_hash}}">Vector view</a>
+          <a class="btn" href="/styles/{{@key}}/?key={{&../access_key}}&amp;vector{{viewer_hash}}">Vector view</a>
        {{/if}}
        {{#if serving_rendered}}
-          <a class="btn" href="/styles/{{@key}}/?raster{{viewer_hash}}">Raster view</a>
+          <a class="btn" href="/styles/{{@key}}/?key={{&../access_key}}&amp;raster{{viewer_hash}}">Raster view</a>
        {{/if}}
        {{#if serving_data}}
          {{#if serving_rendered}}
-            <a class="btn" href="/styles/{{@key}}/{{viewer_hash}}">Auto view</a>
+            <a class="btn" href="/styles/{{@key}}/{{&../access_key_query}}{{viewer_hash}}">Auto view</a>
          {{/if}}
        {{/if}}
      </div>
@@ -42,17 +45,22 @@
    {{#each data}}
      <div class="item">
        {{#if thumbnail}}
-          <img src="/data/{{@key}}/{{thumbnail}}" alt="{{name}} preview" />
+          <img src="/data/{{@key}}/{{thumbnail}}{{&../access_key_query}}" alt="{{name}} preview" />
        {{else}}
          <div class="sample-img"></div>
        {{/if}}
        <h3>{{name}}</h3>
-        <p>Id: {{@key}} |{{#if formatted_filesize}} {{formatted_filesize}} |{{/if}} {{#is_vector}}Vector{{/is_vector}}{{^is_vector}}Raster{{/is_vector}} data | <a href="/data/{{@key}}.json">TileJSON</a></p>
+        <p>Id: {{@key}} |{{#if formatted_filesize}} {{formatted_filesize}} |{{/if}} {{#is_vector}}Vector{{/is_vector}}{{^is_vector}}Raster{{/is_vector}} data
+          | <a href="/data/{{@key}}.json{{&../access_key_query}}">TileJSON</a>
+          {{#if wmts_link}}
+            | <a href="{{&wmts_link}}">WMTS Service</a>
+          {{/if}}
+        </p>
        {{#is_vector}}
-        <a class="btn" href="/data/{{@key}}/{{viewer_hash}}">X-Ray view</a>
+        <a class="btn" href="/data/{{@key}}/{{&../access_key_query}}{{viewer_hash}}">X-Ray view</a>
        {{/is_vector}}
        {{^is_vector}}
-        <a class="btn" href="/data/{{@key}}/{{viewer_hash}}">Raster view</a>
+        <a class="btn" href="/data/{{@key}}/{{&../access_key_query}}{{viewer_hash}}">Raster view</a>
        {{/is_vector}}
      </div>
    {{/each}}
--- a/public/templates/viewer.tmpl
+++ b/public/templates/viewer.tmpl
@@ -3,11 +3,11 @@
 <head>
  <meta charset="UTF-8">
  <title>{{name}} - TileServer GL</title>
-  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css" />
-  <script src="/mapbox-gl.js"></script>
-  <link rel="stylesheet" type="text/css" href="/mapbox.css" />
-  <script src="/mapbox.js"></script>
-  <script src="/leaflet-hash.js"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&access_key_query}}" />
+  <script src="/mapbox-gl.js{{&access_key_query}}"></script>
+  <link rel="stylesheet" type="text/css" href="/mapbox.css{{&access_key_query}}" />
+  <script src="/mapbox.js{{&access_key_query}}"></script>
+  <script src="/leaflet-hash.js{{&access_key_query}}"></script>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -17,19 +17,20 @@
  <h1 style="display:none;">{{name}}</h1>
  <div id='map'></div>
  <script>
-    var preference = (location.search || '').substr(1);
-    if (preference != 'vector' && preference != 'raster') {
-      preference = mapboxgl.supported() ? 'vector' : 'raster';
-    }
+    var q = (location.search || '').substr(1).split('&');
+    var preference =
+      q.indexOf('vector') >= 0 ? 'vector' :
+        (q.indexOf('raster') >= 0 ? 'raster' :
+          (mapboxgl.supported() ? 'vector' : 'raster'));
    if (preference == 'vector') {
      var map = new mapboxgl.Map({
        container: 'map',
-        style: '/styles/{{id}}.json',
+        style: '/styles/{{id}}.json{{&access_key_query}}',
        hash: true
      });
      map.addControl(new mapboxgl.Navigation());
    } else {
-      var map = L.mapbox.map('map', '/styles/{{id}}/rendered.json', { zoomControl: false });
+      var map = L.mapbox.map('map', '/styles/{{id}}/rendered.json{{&access_key_query}}', { zoomControl: false });
      new L.Control.Zoom({ position: 'topright' }).addTo(map);
      setTimeout(function() {
        new L.Hash(map);
--- a/src/serve_style.js
+++ b/src/serve_style.js
@@ -46,9 +46,13 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
  repo[id] = styleJSON;

  app.get('/' + id + '.json', function(req, res, next) {
-    var fixUrl = function(url) {
+    var fixUrl = function(url, opt_nokey) {
+      var query = '';
+      if (!opt_nokey && req.query.key) {
+        query = '?key=' + req.query.key;
+      }
      return url.replace(
-          'local://', req.protocol + '://' + req.headers.host + '/');
+          'local://', req.protocol + '://' + req.headers.host + '/') + query;
    };

    var styleJSON_ = clone(styleJSON);
@@ -56,7 +60,8 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
      var source = styleJSON_.sources[name];
      source.url = fixUrl(source.url);
    });
-    styleJSON_.sprite = fixUrl(styleJSON_.sprite);
+    // mapbox-gl-js viewer cannot handle sprite urls with query
+    styleJSON_.sprite = fixUrl(styleJSON_.sprite, true);
    styleJSON_.glyphs = fixUrl(styleJSON_.glyphs);
    return res.send(styleJSON_);
  });
--- a/src/server.js
+++ b/src/server.js
@@ -118,13 +118,15 @@ module.exports = function(opts, callback) {

  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) {
      var styleJSON = serving.styles[id];
      result.push({
        version: styleJSON.version,
        name: styleJSON.name,
        id: id,
-        url: req.protocol + '://' + req.headers.host + '/styles/' + id + '.json'
+        url: req.protocol + '://' + req.headers.host +
+             '/styles/' + id + '.json' + query
      });
    });
    res.send(result);
@@ -165,17 +167,19 @@ module.exports = function(opts, callback) {
      app.use(path, function(req, res, next) {
        var data = {};
        if (dataGetter) {
-          data = dataGetter(req.params);
+          data = dataGetter(req);
          if (!data) {
            return res.status(404).send('Not found');
          }
        }
+        data['access_key'] = req.query.key;
+        data['access_key_query'] = req.query.key ? '?key=' + req.query.key : '';
        return res.status(200).send(compiled(data));
      });
    });
  };

-  serveTemplate('/$', 'index', function() {
+  serveTemplate('/$', 'index', function(req) {
    var styles = clone(config.styles || {});
    Object.keys(styles).forEach(function(id) {
      var style = styles[id];
@@ -194,6 +198,12 @@ module.exports = function(opts, callback) {
              Math.floor(centerPx[0] / 256) + '/' +
              Math.floor(centerPx[1] / 256) + '.png';
        }
+
+        var query = req.query.key ? ('?key=' + req.query.key) : '';
+        style.wmts_link = 'https://wmts.maptiler.com/' +
+          new Buffer(req.protocol + '://' + req.headers.host +
+            '/styles/' + id + '/rendered.json' + query).toString('base64') +
+            '/wmts';
      }
    });
    var data = clone(serving.data || {});
@@ -213,6 +223,11 @@ module.exports = function(opts, callback) {
              Math.floor(centerPx[0] / 256) + '/' +
              Math.floor(centerPx[1] / 256) + '.' + data_.format;
        }
+
+        var query = req.query.key ? ('?key=' + req.query.key) : '';
+        data_.wmts_link = 'https://wmts.maptiler.com/' +
+          new Buffer(req.protocol + '://' + req.headers.host +
+            '/data/' + id + '.json' + query).toString('base64') + '/wmts';
      }
      if (data_.filesize) {
        var suffix = 'kB';
@@ -234,8 +249,8 @@ module.exports = function(opts, callback) {
    };
  });

-  serveTemplate('/styles/:id/$', 'viewer', function(params) {
-    var id = params.id;
+  serveTemplate('/styles/:id/$', 'viewer', function(req) {
+    var id = req.params.id;
    var style = clone((config.styles || {})[id]);
    if (!style) {
      return null;
@@ -253,8 +268,8 @@ module.exports = function(opts, callback) {
  });
  */

-  serveTemplate('/data/:id/$', 'data', function(params) {
-    var id = params.id;
+  serveTemplate('/data/:id/$', 'data', function(req) {
+    var id = req.params.id;
    var data = clone(serving.data[id]);
    if (!data) {
      return null;
Author	SHA1	Message	Date
Petr Sloup	ebd6662ebb	Minor WMTS link bugfix	2016-06-29 16:23:49 +02:00
Petr Sloup	6898be5bea	Update version	2016-06-29 16:12:42 +02:00
Petr Sloup	a55b5ad69c	Fix viewer vector/raster autodetection	2016-06-29 15:14:51 +02:00
Petr Sloup	1104bf8a57	Add links to WMTS services from index.html	2016-06-29 15:08:56 +02:00
Petr Sloup	1d4503b507	If `key` present in query, propagate it to other linked urls	2016-06-29 14:57:11 +02:00
Petr Sloup	2d5dccc1e0	Update dependencies	2016-06-28 07:48:30 +02:00