style: static asset serving

Signed-off-by: Michael Nutt <michael@nuttnet.net>

public/resources/index.css

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

public/templates/data.tmpl

@@ -5,10 +5,12 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
-  <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" />
-  <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>
+    <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl.css" />
+    <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl-inspect.css" />
+
+    <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>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>
+
     <style>
       body {background:#fff;color:#333;font-family:Arial, sans-serif;}
       #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
@@ -18,10 +20,10 @@
     </style>
   {{/is_vector}}
   {{^is_vector}}
-  <link rel="stylesheet" type="text/css" href="{{public_url}}leaflet.css" />
-  <script src="{{public_url}}leaflet.js"></script>
-  <script src="{{public_url}}leaflet-hash.js"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../assets/leaflet.css" />
+    <script src="../../assets/leaflet.js{"></script>
+    <script src="../../assets/leaflet-hash.js"></script>
+    <script src="../../assets/L.TileLayer.NoGap.js"></script>
     <style>
       body { margin:0; padding:0; }
       #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -47,7 +49,7 @@
       sources: {
         'vector_layer_': {
           type: 'vector',
-          url: '{{public_url}}data/{{id}}.json' + keyParam
+          url: '../../data/{{id}}.json' + keyParam
         }
       },
       layers: []
@@ -86,7 +88,7 @@
 	new L.Control.Zoom({ position: 'topright' }).addTo(map);
 
 	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();
 	req.overrideMimeType("application/json");
 	req.open('GET', url, true);

public/templates/index.tmpl

@@ -4,8 +4,12 @@
   <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="{{public_url}}index.css" />
+  <link rel="stylesheet" type="text/css" href="./assets/index.css" />
   <script>
+    if (!document.location.pathname.endsWith('/')) {
+      document.location += "/";
+    }
+    
     function toggle_xyz(id) {
       var el = document.getElementById(id);
       var s = el.style;
@@ -17,7 +21,7 @@
 </head>
 <body>
   <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>
     {{#if styles}}
       <h2 class="box-header">Styles</h2>
@@ -25,9 +29,9 @@
       {{#each styles}}
         <div class="item">
           {{#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}}
-            <img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" />
+            <img src="./assets/images/placeholder.png" alt="{{name}} preview" />
           {{/if}}
           <div class="details">
             <h3>{{name}}</h3>
@@ -35,13 +39,13 @@
             <p class="services">
               services:
               {{#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 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 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 xyz_link}}
                 | <a href="#" onclick="return toggle_xyz('xyz_style_{{@key}}');">XYZ</a>
@@ -52,14 +56,14 @@
           <div class="viewers">
             {{#if serving_data}}
               {{#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 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 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}}
           </div>
         </div>
@@ -72,15 +76,15 @@
       {{#each data}}
         <div class="item">
           {{#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}}
-            <img src="{{public_url}}images/placeholder.png" alt="{{name}} preview" />
+            <img src="./assets/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="{{public_url}}data/{{@key}}.json{{&../key_query}}">TileJSON</a>
+              services: <a href="./data/{{@key}}.json{{&../key_query}}">TileJSON</a>
               {{#if wmts_link}}
                 | <a href="{{&wmts_link}}">WMTS</a>
               {{/if}}
@@ -92,10 +96,10 @@
           </div>
           <div class="viewers">
             {{#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}}
-            <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}}
           </div>
         </div>
@@ -104,7 +108,7 @@
     {{/if}}
   </section>
   <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>
       <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>

public/templates/viewer.tmpl

@@ -4,14 +4,21 @@
   <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="{{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="{{public_url}}leaflet.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 src="{{public_url}}leaflet.js"></script>
-  <script src="{{public_url}}leaflet-hash.js"></script>
-  <script src="{{public_url}}L.TileLayer.NoGap.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl.css" />
+  <link rel="stylesheet" type="text/css" href="../../assets/maplibre-gl-inspect.css" />
+  <link rel="stylesheet" type="text/css" href="../../assets/leaflet.css" />
+
+  <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>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="../../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>
     body { margin:0; padding:0; }
     #map { position:absolute; top:0; bottom:0; width:100%; }
@@ -31,10 +38,10 @@
     var keyParam = keyMatch ? '?key=' + keyMatch[1] : '';    
 
     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({
         container: 'map',
-        style: '{{public_url}}styles/{{id}}/style.json' + keyParam,
+        style: '../../styles/{{id}}/style.json' + keyParam,
         hash: true,
         maplibreLogo: true
       });
@@ -53,7 +60,7 @@
 		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 = '../../styles/{{id}}.json' + keyParam;
 		var req = new XMLHttpRequest();
 		req.overrideMimeType("application/json");
 		req.open('GET', url, true);

src/server.js

@@ -371,7 +371,10 @@ function start(opts) {
 
   // ------------------------------------
   // 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 serveTemplate = (urlPath, template, dataGetter) => {