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

chore: remove {{public_url}} in favor of relative paths

Browse source 
Signed-off-by: Michael Nutt <michael@nuttnet.net>
This commit is contained in:
Michael Nutt 2023-01-18 10:38:55 -05:00
parent 78c17773db
commit 8b8109d500
5 changed files with 62 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/resources/index.css
View file

@ -1,18 +1,18 @@
@font-face { @font-face {
font-family: 'OpenSans'; font-family: 'OpenSans';
src: url('/fonts/OpenSans-Regular.ttf'); src: url('./fonts/OpenSans-Regular.ttf');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'OpenSans'; font-family: 'OpenSans';
src: url('/fonts/OpenSans-Italic.ttf'); src: url('./fonts/OpenSans-Italic.ttf');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face { @font-face {
font-family: 'OpenSans'; font-family: 'OpenSans';
src: url('/fonts/OpenSans-Bold.ttf'); src: url('./fonts/OpenSans-Bold.ttf');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@ -25,7 +25,7 @@ body{
margin:0; margin:0;
background-repeat:no-repeat !important; background-repeat:no-repeat !important;
background-size: contain !important; background-size: contain !important;
background-image: url(/images/header-map-1280px.png); background-image: url(./images/header-map-1280px.png);
} }
a{ a{
color: #499DCE; color: #499DCE;

44
public/templates/data.tmpl
View file

@ -5,27 +5,29 @@
<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="{{public_url}}maplibre-gl.css" /> <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl.css" />
<link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" /> <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl-inspect.css" />
<script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script>
<script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script> <script>if (typeof Symbol !== 'undefined') { document.write('<script src="../../assets/maplibre-gl.js"><\/script>'); } else { document.write('<script src="../../assets/maplibre-gl-compat.js"><\/script>'); }</script>
<style> <script>if (typeof Symbol !== 'undefined') { document.write('<script src="../../assets/maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="../../assets/maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
body {background:#fff;color:#333;font-family:Arial, sans-serif;}
#map {position:absolute;top:0;left:0;right:250px;bottom:0;} <style>
h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;} body {background:#fff;color:#333;font-family:Arial, sans-serif;}
#layerList {position:absolute;top:35px;right:0;bottom:0;width:240px;overflow:auto;} #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
#layerList div div {width:15px;height:15px;display:inline-block;} h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
</style> #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}}
{{^is_vector}} {{^is_vector}}
<link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" /> <link rel="stylesheet" type="text/css" href="../../assets/leaflet.css" />
<script src="{{public_url}}leaflet.js"></script> <script src="../../assets/leaflet.js{"></script>
<script src="{{public_url}}leaflet-hash.js"></script> <script src="../../assets/leaflet-hash.js"></script>
<script src="{{public_url}}L.TileLayer.NoGap.js"></script> <script src="../../assets/L.TileLayer.NoGap.js"></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%; }
</style> </style>
{{/is_vector}} {{/is_vector}}
</head> </head>
<body> <body>
@ -47,7 +49,7 @@
sources: { sources: {
'vector_layer_': { 'vector_layer_': {
type: 'vector', type: 'vector',
url: '{{public_url}}data/{{id}}.json' + keyParam url: '../../data/{{id}}.json' + keyParam
} }
}, },
layers: [] layers: []
@ -86,7 +88,7 @@
new L.Control.Zoom({ position: 'topright' }).addTo(map); new L.Control.Zoom({ position: 'topright' }).addTo(map);
var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom; var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom;
var url = '{{public_url}}data/{{id}}.json' + keyParam; var url = '../../data/{{id}}.json' + keyParam;
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.overrideMimeType("application/json"); req.overrideMimeType("application/json");
req.open('GET', url, true); req.open('GET', url, true);

32
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="{{public_url}}index.css" /> <link rel="stylesheet" type="text/css" href="./assets/index.css" />
<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="{{public_url}}images/logo.png" alt="TileServer GL" /></h1> <h1 class="title {{#if is_light}}light{{/if}}"><img src="./assets/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="{{public_url}}styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="./styles/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}
<img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" /> <img src="./assets/images/placeholder.png" alt="{{name}} preview" />
{{/if}} {{/if}}
<div class="details"> <div class="details">
<h3>{{name}}</h3> <h3>{{name}}</h3>
@ -35,13 +35,13 @@
<p class="services"> <p class="services">
services: services:
{{#if serving_data}} {{#if serving_data}}
<a href="{{public_url}}styles/{{@key}}/style.json{{&../key_query}}">GL Style</a> <a href="./styles/{{@key}}/style.json{{&../key_query}}">GL Style</a>
{{/if}} {{/if}}
{{#if serving_rendered}} {{#if serving_rendered}}
{{#if serving_data}}| {{/if}}<a href="{{public_url}}styles/{{@key}}.json{{&../key_query}}">TileJSON</a> {{#if serving_data}}| {{/if}}<a href="./styles/{{@key}}.json{{&../key_query}}">TileJSON</a>
{{/if}} {{/if}}
{{#if serving_rendered}} {{#if serving_rendered}}
| <a href="{{public_url}}styles/{{@key}}/wmts.xml{{&../key_query}}">WMTS</a> | <a href="./styles/{{@key}}/wmts.xml{{&../key_query}}">WMTS</a>
{{/if}} {{/if}}
{{#if xyz_link}} {{#if xyz_link}}
| <a href="#" onclick="return toggle_xyz('xyz_style_{{@key}}');">XYZ</a> | <a href="#" onclick="return toggle_xyz('xyz_style_{{@key}}');">XYZ</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="{{public_url}}styles/{{@key}}/{{&../key_query}}{{viewer_hash}}">Viewer</a> <a class="btn" href="./styles/{{@key}}/{{&../key_query}}{{viewer_hash}}">Viewer</a>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{#if serving_rendered}} {{#if serving_rendered}}
<a class="btn" href="{{public_url}}styles/{{@key}}/?{{&../key_query_part}}raster{{viewer_hash}}">Raster</a> <a class="btn" href="./styles/{{@key}}/?{{&../key_query_part}}raster{{viewer_hash}}">Raster</a>
{{/if}} {{/if}}
{{#if serving_data}} {{#if serving_data}}
<a class="btn" href="{{public_url}}styles/{{@key}}/?{{&../key_query_part}}vector{{viewer_hash}}">Vector</a> <a class="btn" href="./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="{{public_url}}data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" /> <img src="./data/{{@key}}/{{thumbnail}}{{&../key_query}}" alt="{{name}} preview" />
{{else}} {{else}}
<img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" /> <img src="./assets/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="{{public_url}}data/{{@key}}.json{{&../key_query}}">TileJSON</a> services: <a href="./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="{{public_url}}data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Inspect</a> <a class="btn" href="./data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Inspect</a>
{{/is_vector}} {{/is_vector}}
{{^is_vector}} {{^is_vector}}
<a class="btn" href="{{public_url}}data/{{@key}}/{{&../key_query}}{{viewer_hash}}">View</a> <a class="btn" href="./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.maptiler.com/" target="_blank"><img src="{{public_url}}images/maptiler-logo.svg" /></a> <a href="https://www.maptiler.com/" target="_blank"><img src="./assets/images/maptiler-logo.svg" /></a>
<p> <p>
<a href="https://github.com/maptiler/tileserver-gl" target="_blank">Powered by TileServer GL ({{server_version}})</a> – <a href="https://www.maptiler.com/" target="_blank">an open-source project from MapTiler.</a> <a href="https://github.com/maptiler/tileserver-gl" target="_blank">Powered by TileServer GL ({{server_version}})</a> – <a href="https://www.maptiler.com/" target="_blank">an open-source project from MapTiler.</a>
</p> </p>

29
public/templates/viewer.tmpl
View file

@ -4,14 +4,21 @@
<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="{{public_url}}maplibre-gl.css" />
<link rel="stylesheet" type="text/css" href="{{public_url}}maplibre-gl-inspect.css" /> <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl.css" />
<link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" /> <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl-inspect.css" />
<script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-compat.js"><\/script>'); }</script> <link rel="stylesheet" type="text/css" href="../../assets/leaflet.css" />
<script>if (typeof Symbol !== 'undefined') { document.write('<script src="{{public_url}}maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="{{public_url}}maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
<script src="{{public_url}}leaflet.js"></script> <script>if (typeof Symbol !== 'undefined') { document.write('<script src="../../assets/maplibre-gl.js"><\/script>'); } else { document.write('<script src="../../assets/maplibre-gl-compat.js"><\/script>'); }</script>
<script src="{{public_url}}leaflet-hash.js"></script> <script>if (typeof Symbol !== 'undefined') { document.write('<script src="../../assets/maplibre-gl-inspect.min.js"><\/script>'); } else { document.write('<script src="../../assets/maplibre-gl-inspect-compat.min.js"><\/script>'); }</script>
<script src="{{public_url}}L.TileLayer.NoGap.js"></script>
<script src="../../assets/maplibre-gl.js"></script>
<script src="../../assets/maplibre-gl-inspect.min.js"></script>
<script src="../../assets/leaflet.js"></script>
<script src="../../assets/leaflet-hash.js"></script>
<script src="../../assets/L.TileLayer.NoGap.js"></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%; }
@ -31,10 +38,10 @@
var keyParam = keyMatch ? '?key=' + keyMatch[1] : ''; var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';
if (preference == 'vector') { if (preference == 'vector') {
maplibregl.setRTLTextPlugin('{{public_url}}mapbox-gl-rtl-text.js' + keyParam); maplibregl.setRTLTextPlugin('../../assets/mapbox-gl-rtl-text.js' + keyParam);
var map = new maplibregl.Map({ var map = new maplibregl.Map({
container: 'map', container: 'map',
style: '{{public_url}}styles/{{id}}/style.json' + keyParam, style: '../../styles/{{id}}/style.json' + keyParam,
hash: true, hash: true,
maplibreLogo: true maplibreLogo: true
}); });
@ -53,7 +60,7 @@
new L.Control.Zoom({ position: 'topright' }).addTo(map); new L.Control.Zoom({ position: 'topright' }).addTo(map);
var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom; var tile_urls = [], tile_attribution, tile_minzoom, tile_maxzoom;
var url = '{{public_url}}styles/{{id}}.json' + keyParam; var url = '../../styles/{{id}}.json' + keyParam;
var req = new XMLHttpRequest(); var req = new XMLHttpRequest();
req.overrideMimeType("application/json"); req.overrideMimeType("application/json");
req.open('GET', url, true); req.open('GET', url, true);

2
src/server.js
View file

@ -371,7 +371,7 @@ function start(opts) {
// ------------------------------------ // ------------------------------------
// serve web presentations // serve web presentations
app.use('/', express.static(path.join(__dirname, '../public/resources'))); app.use('/assets', express.static(path.join(__dirname, '../public/resources')));
const templates = path.join(__dirname, '../public/templates'); const templates = path.join(__dirname, '../public/templates');
const serveTemplate = (urlPath, template, dataGetter) => { const serveTemplate = (urlPath, template, dataGetter) => {