Fabio/tileserver-gl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updates to support path

Browse source
This commit is contained in:
birdage 2017-07-18 21:01:00 -04:00
parent 427a0f0687
commit 0247881343
8 changed files with 67 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
public/templates/data.tmpl
View file

@ -5,10 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{name}} - TileServer GL</title> <title>{{name}} - TileServer GL</title>
{{#is_vector}} {{#is_vector}}
<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}}" />
<link rel="stylesheet" type="text/css" href="/mapbox-gl-inspect.css{{&key_query}}" /> <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox-gl-inspect.css{{&key_query}}" />
<script src="/mapbox-gl.js{{&key_query}}"></script> <script src="{{baseURL}}/mapbox-gl.js{{&key_query}}"></script>
<script src="/mapbox-gl-inspect.min.js{{&key_query}}"></script> <script src="{{baseURL}}/mapbox-gl-inspect.min.js{{&key_query}}"></script>
<style> <style>
body {background:#fff;color:#333;font-family:Arial, sans-serif;} body {background:#fff;color:#333;font-family:Arial, sans-serif;}
#map {position:absolute;top:0;left:0;right:250px;bottom:0;} #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@ -19,8 +19,8 @@
{{/is_vector}} {{/is_vector}}
{{^is_vector}} {{^is_vector}}
<link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" /> <link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" />
<script src="/mapbox.js{{&key_query}}"></script> <script src="{{baseURL}}/mapbox.js{{&key_query}}"></script>
<script src="/leaflet-hash.js{{&key_query}}"></script> <script src="{{baseURL}}/leaflet-hash.js{{&key_query}}"></script>
<style> <style>
body { margin:0; padding:0; } body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
@ -42,7 +42,7 @@
sources: { sources: {
'vector_layer_': { 'vector_layer_': {
type: 'vector', type: 'vector',
url: '/data/{{id}}.json{{&key_query}}' url: '{{baseURL}}/data/{{id}}.json{{&key_query}}'
} }
}, },
layers: [] layers: []
@ -74,7 +74,7 @@
<h1 style="display:none;">{{name}}</h1> <h1 style="display:none;">{{name}}</h1>
<div id='map'></div> <div id='map'></div>
<script> <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) { map.eachLayer(function(layer) {
// do not add scale prefix even if retina display is detected // do not add scale prefix even if retina display is detected
layer.scalePrefix = '.'; layer.scalePrefix = '.';

30
public/templates/index.tmpl
View file

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>TileServer GL - Server for vector and raster maps with GL styles</title> <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> <script>
function toggle_xyz(id) { function toggle_xyz(id) {
var el = document.getElementById(id); var el = document.getElementById(id);
@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<section> <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> <h2 class="subtitle">Vector {{#if is_light}}<s>and raster</s>{{else}}and raster{{/if}} maps with GL styles</h2>
{{#if styles}} {{#if styles}}
<h2 class="box-header">Styles</h2> <h2 class="box-header">Styles</h2>
@ -25,9 +25,9 @@
{{#each styles}} {{#each styles}}
<div class="item"> <div class="item">
{{#if thumbnail}} {{#if thumbnail}}
<img src="/styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src={{baseURL}}"/styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}
<img src="/images/placeholder.png" alt="{{name}} preview" /> <img src="{{baseURL}}/images/placeholder.png" alt="{{name}} preview" />
{{/if}} {{/if}}
<div class="details"> <div class="details">
<h3>{{name}}</h3> <h3>{{name}}</h3>
@ -35,10 +35,10 @@
<p class="services"> <p class="services">
services: services:
{{#if serving_data}} {{#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}}
{{#if serving_rendered}} {{#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}}
{{#if wmts_link}} {{#if wmts_link}}
| <a href="{{&wmts_link}}">WMTS</a> | <a href="{{&wmts_link}}">WMTS</a>
@ -52,14 +52,14 @@
<div class="viewers"> <div class="viewers">
{{#if serving_data}} {{#if serving_data}}
{{#if serving_rendered}} {{#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}} {{/if}}
{{#if serving_rendered}} {{#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}}
{{#if serving_data}} {{#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}} {{/if}}
</div> </div>
</div> </div>
@ -72,15 +72,15 @@
{{#each data}} {{#each data}}
<div class="item"> <div class="item">
{{#if thumbnail}} {{#if thumbnail}}
<img src="/data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="{{baseURL}}/data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}
<img src="/images/placeholder.png" alt="{{name}} preview" /> <img src="{{baseURL}}/images/placeholder.png" alt="{{name}} preview" />
{{/if}} {{/if}}
<div class="details"> <div class="details">
<h3>{{name}}</h3> <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="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"> <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}} {{#if wmts_link}}
| <a href="{{&wmts_link}}">WMTS</a> | <a href="{{&wmts_link}}">WMTS</a>
{{/if}} {{/if}}
@ -92,10 +92,10 @@
</div> </div>
<div class="viewers"> <div class="viewers">
{{#is_vector}} {{#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}}
{{^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}} {{/is_vector}}
</div> </div>
</div> </div>
@ -104,7 +104,7 @@
{{/if}} {{/if}}
</section> </section>
<footer> <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> <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" /> <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> </p>

14
public/templates/viewer.tmpl
View file

@ -4,11 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{name}} - TileServer GL</title> <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> <script src="/mapbox-gl.js{{&key_query}}"></script>
<link rel="stylesheet" type="text/css" href="/mapbox.css{{&key_query}}" /> <link rel="stylesheet" type="text/css" href="{{baseURL}}/mapbox.css{{&key_query}}" />
<script src="/mapbox.js{{&key_query}}"></script> <script src="{{baseURL}}/mapbox.js{{&key_query}}"></script>
<script src="/leaflet-hash.js{{&key_query}}"></script> <script src="{{baseURL}}/leaflet-hash.js{{&key_query}}"></script>
<style> <style>
body { margin:0; padding:0; } body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; } #map { position:absolute; top:0; bottom:0; width:100%; }
@ -24,15 +24,15 @@
(q.indexOf('raster') >= 0 ? 'raster' : (q.indexOf('raster') >= 0 ? 'raster' :
(mapboxgl.supported() ? 'vector' : 'raster')); (mapboxgl.supported() ? 'vector' : 'raster'));
if (preference == 'vector') { 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({ var map = new mapboxgl.Map({
container: 'map', container: 'map',
style: '/styles/{{id}}/style.json{{&key_query}}', style: '{{baseURL}}/styles/{{id}}/style.json{{&key_query}}',
hash: true hash: true
}); });
map.addControl(new mapboxgl.NavigationControl()); map.addControl(new mapboxgl.NavigationControl());
} else { } 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); new L.Control.Zoom({ position: 'topright' }).addTo(map);
setTimeout(function() { setTimeout(function() {
new L.Hash(map); new L.Hash(map);

5
src/serve_data.js
View file

@ -4,6 +4,8 @@ var fs = require('fs'),
path = require('path'), path = require('path'),
zlib = require('zlib'); zlib = require('zlib');
var baseURL = options.baseURL;
var clone = require('clone'), var clone = require('clone'),
express = require('express'), express = require('express'),
mbtiles = require('@mapbox/mbtiles'), mbtiles = require('@mapbox/mbtiles'),
@ -160,7 +162,8 @@ module.exports = function(options, repo, params, id, styles) {
var info = clone(tileJSON); var info = clone(tileJSON);
info.tiles = utils.getTileUrls(req, info.tiles, info.tiles = utils.getTileUrls(req, info.tiles,
'data/' + id, info.format, { 'data/' + id, info.format, {
'pbf': options.pbfAlias 'pbf': options.pbfAlias,
baseURL
}); });
return res.send(info); return res.send(info);
}); });

3
src/serve_rendered.js
View file

@ -6,6 +6,7 @@ var advancedPool = require('advanced-pool'),
util = require('util'), util = require('util'),
zlib = require('zlib'); zlib = require('zlib');
var baseURL = options.baseURL;
// sharp has to be required before node-canvas // sharp has to be required before node-canvas
// see https://github.com/lovell/sharp/issues/371 // see https://github.com/lovell/sharp/issues/371
var sharp = require('sharp'); var sharp = require('sharp');
@ -697,7 +698,7 @@ module.exports = function(options, repo, params, id, dataResolver) {
app.get('/' + id + '.json', function(req, res, next) { app.get('/' + id + '.json', function(req, res, next) {
var info = clone(tileJSON); var info = clone(tileJSON);
info.tiles = utils.getTileUrls(req, info.tiles, info.tiles = utils.getTileUrls(req, info.tiles,
'styles/' + id, info.format); 'styles/' + id, info.format, baseURL);
return res.send(info); return res.send(info);
}); });

4
src/serve_style.js
View file

@ -3,6 +3,8 @@
var path = require('path'), var path = require('path'),
fs = require('fs'); fs = require('fs');
var baseURL = options.baseURL;
var clone = require('clone'), var clone = require('clone'),
express = require('express'); express = require('express');
@ -79,7 +81,7 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
query = '?' + queryParams.join('&'); query = '?' + queryParams.join('&');
} }
return url.replace( return url.replace(
'local://', req.protocol + '://' + req.headers.host + '/') + query; 'local://', (baseURL ? baseURL : req.protocol + '://' + req.headers.host + '/') + query;
}; };
var styleJSON_ = clone(styleJSON); var styleJSON_ = clone(styleJSON);

38
src/server.js
View file

@ -7,6 +7,8 @@ process.env.UV_THREADPOOL_SIZE =
var fs = require('fs'), var fs = require('fs'),
path = require('path'); path = require('path');
var baseURL = options.baseURL;
var base64url = require('base64url'), var base64url = require('base64url'),
clone = require('clone'), clone = require('clone'),
cors = require('cors'), cors = require('cors'),
@ -133,7 +135,7 @@ function start(opts) {
}, function(font) { }, function(font) {
serving.fonts[font] = true; serving.fonts[font] = true;
}).then(function(sub) { }).then(function(sub) {
app.use('/styles/', sub); app.use('/tiles/styles/', sub);
})); }));
} }
if (item.serve_rendered !== false) { if (item.serve_rendered !== false) {
@ -150,7 +152,7 @@ function start(opts) {
return mbtilesFile; return mbtilesFile;
} }
).then(function(sub) { ).then(function(sub) {
app.use('/styles/', sub); app.use('/tiles/styles/', sub);
}) })
); );
} else { } else {
@ -161,7 +163,7 @@ function start(opts) {
startupPromises.push( startupPromises.push(
serve_font(options, serving.fonts).then(function(sub) { serve_font(options, serving.fonts).then(function(sub) {
app.use('/', sub); app.use('/tiles/', sub);
}) })
); );
@ -174,12 +176,12 @@ function start(opts) {
startupPromises.push( startupPromises.push(
serve_data(options, serving.data, item, id, serving.styles).then(function(sub) { 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 result = [];
var query = req.query.key ? ('?key=' + req.query.key) : ''; var query = req.query.key ? ('?key=' + req.query.key) : '';
Object.keys(serving.styles).forEach(function(id) { Object.keys(serving.styles).forEach(function(id) {
@ -188,8 +190,8 @@ function start(opts) {
version: styleJSON.version, version: styleJSON.version,
name: styleJSON.name, name: styleJSON.name,
id: id, id: id,
url: req.protocol + '://' + req.headers.host + url: (baseURL ? baseURL : req.protocol + '://' + req.headers.host +
'/styles/' + id + '/style.json' + query '/tiles/styles/' + id + '/style.json' + query
}); });
}); });
res.send(result); res.send(result);
@ -200,13 +202,13 @@ function start(opts) {
var info = clone(serving[type][id]); var info = clone(serving[type][id]);
var path = ''; var path = '';
if (type == 'rendered') { if (type == 'rendered') {
path = 'styles/' + id; path = 'tiles/styles/' + id;
} else { } else {
path = type + '/' + id; path = type + '/' + id;
} }
info.tiles = utils.getTileUrls(req, info.tiles, path, info.format, { info.tiles = utils.getTileUrls(req, info.tiles, path, info.format, {
'pbf': options.pbfAlias 'pbf': options.pbfAlias,
}); }, baseURL);
arr.push(info); arr.push(info);
}); });
return arr; return arr;
@ -224,7 +226,7 @@ function start(opts) {
//------------------------------------ //------------------------------------
// serve web presentations // 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 templates = path.join(__dirname, '../public/templates');
var serveTemplate = function(urlPath, template, dataGetter) { var serveTemplate = function(urlPath, template, dataGetter) {
@ -288,12 +290,13 @@ function start(opts) {
var query = req.query.key ? ('?key=' + req.query.key) : ''; var query = req.query.key ? ('?key=' + req.query.key) : '';
style.wmts_link = 'http://wmts.maptiler.com/' + style.wmts_link = 'http://wmts.maptiler.com/' +
base64url('http://' + req.headers.host + base64url('http://' + req.headers.host +
'/styles/' + id + '.json' + query) + '/wmts'; '/tiles/styles/' + id + '.json' + query) + '/wmts';
var tiles = utils.getTileUrls( var tiles = utils.getTileUrls(
req, style.serving_rendered.tiles, req, style.serving_rendered.tiles,
'styles/' + id, style.serving_rendered.format); 'styles/' + id, style.serving_rendered.format, baseURL);
style.xyz_link = tiles[0]; style.xyz_link = tiles[0];
style.baseURL = baseURL;
} }
}); });
var data = clone(serving.data || {}); var data = clone(serving.data || {});
@ -322,7 +325,7 @@ function start(opts) {
var tiles = utils.getTileUrls( var tiles = utils.getTileUrls(
req, data_.tiles, 'data/' + id, data_.format, { req, data_.tiles, 'data/' + id, data_.format, {
'pbf': options.pbfAlias 'pbf': options.pbfAlias
}); },baseURL);
data_.xyz_link = tiles[0]; data_.xyz_link = tiles[0];
} }
if (data_.filesize) { if (data_.filesize) {
@ -341,11 +344,12 @@ function start(opts) {
}); });
return { return {
styles: Object.keys(styles).length ? styles : null, 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 id = req.params.id;
var style = clone((config.styles || {})[id]); var style = clone((config.styles || {})[id]);
if (!style) { if (!style) {
@ -355,6 +359,7 @@ function start(opts) {
style.name = (serving.styles[id] || serving.rendered[id]).name; style.name = (serving.styles[id] || serving.rendered[id]).name;
style.serving_data = serving.styles[id]; style.serving_data = serving.styles[id];
style.serving_rendered = serving.rendered[id]; style.serving_rendered = serving.rendered[id];
style.baseURL = baseURL;
return style; return style;
}); });
@ -372,6 +377,7 @@ function start(opts) {
} }
data.id = id; data.id = id;
data.is_vector = data.format == 'pbf'; data.is_vector = data.format == 'pbf';
data.baseURL = baseURL;
return data; return data;
}); });

7
src/utils.js
View file

@ -6,7 +6,7 @@ var path = require('path'),
var clone = require('clone'), var clone = require('clone'),
glyphCompose = require('glyph-pbf-composite'); 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) {
if (domains.constructor === String && domains.length > 0) { 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 key = req.query.key;
var queryParams = []; var queryParams = [];
if (req.query.key) { if (req.query.key) {
queryParams.push('key=' + 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('&')) : ''; var query = queryParams.length > 0 ? ('?' + queryParams.join('&')) : '';
if (baseURL) {
return [baseURL + '/' + path + '/{z}/{x}/{y}.' + format + query]
}
if (aliases && aliases[format]) { if (aliases && aliases[format]) {
format = aliases[format]; format = aliases[format];
} }