Minor Dockerfile fix

X-Ray style: add circle symbols for point layers

.gitignore

@@ -3,5 +3,6 @@ node_modules
 test_data
 data
 light
+plugins
 config.json
 *.mbtiles

.travis.yml

@@ -15,9 +15,7 @@ before_install:
   - sudo apt-get install -qq xvfb
 install:
   - npm install
-  - wget -O test_data.zip https://github.com/klokantech/tileserver-gl-data/archive/v0.8.zip
-  - unzip -q test_data.zip -d tmp_test_data
-  - mkdir test_data
-  - mv tmp_test_data/tileserver-gl-data-*/* -t test_data
+  - wget -O test_data.zip https://github.com/klokantech/tileserver-gl/releases/download/v1.3.0/test_data.zip
+  - unzip -q test_data.zip -d test_data
 script:
   - xvfb-run --server-args="-screen 0 1024x768x24" npm test

Dockerfile

@@ -9,6 +9,7 @@ RUN apt-get -qq update \
     build-essential \
     python \
     libcairo2-dev \
+    libprotobuf-dev \
     xvfb \
 && echo "deb https://deb.nodesource.com/node_4.x jessie main" >> /etc/apt/sources.list.d/nodejs.list \
 && echo "deb-src https://deb.nodesource.com/node_4.x jessie main" >> /etc/apt/sources.list.d/nodejs.list \

Dockerfile_light

@@ -0,0 +1,12 @@
+FROM node:4
+MAINTAINER Petr Sloup <petr.sloup@klokantech.com>
+
+RUN mkdir -p /usr/src/app
+COPY / /usr/src/app
+RUN cd /usr/src/app && npm install --production
+
+VOLUME /data
+WORKDIR /data
+
+EXPOSE 80
+CMD ["node", "/usr/src/app/", "-p", "80"]

docs/endpoints.rst

@@ -49,6 +49,10 @@ Source data
 ===========
 * Source data are served at ``/data/{mbtiles}/{z}/{x}/{y}.{format}``
 
+  * Format depends on the source file (usually ``png`` or ``pbf``)
+
+    * ``geojson`` is also available (useful for inspecting the tiles) in case the original format is ``pbf``
+
   * TileJSON at ``/data/{mbtiles}.json``
 
 TileJSON arrays

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tileserver-gl",
-  "version": "1.1.5",
+  "version": "1.3.0-beta.1",
   "description": "Map tile server for JSON GL styles - vector and server side generated raster tiles",
   "main": "src/main.js",
   "bin": "src/main.js",
@@ -12,33 +12,42 @@
     "url": "https://github.com/klokantech/tileserver-gl.git"
   },
   "license": "BSD-2-Clause",
+  "engines": {
+    "node": ">=4.2.1 <5"
+  },
+  "engineStrict": true,
   "scripts": {
     "test": "mocha test/**.js"
   },
   "dependencies": {
-    "async": "2.0.1",
+    "async": "2.1.4",
     "advanced-pool": "0.3.2",
     "base64url": "2.0.0",
-    "canvas": "1.5.0",
-    "clone": "1.0.2",
-    "color": "0.11.3",
+    "canvas": "1.6.2",
+    "clone": "2.1.0",
+    "color": "1.0.2",
     "cors": "2.8.1",
     "express": "4.14.0",
     "glyph-pbf-composite": "0.0.2",
-    "handlebars": "4.0.5",
-    "mapbox-gl-native": "3.3.3",
+    "handlebars": "4.0.6",
+    "mapbox-gl-native": "3.4.2",
     "mbtiles": "0.9.0",
     "morgan": "1.7.0",
     "node-pngquant-native": "1.0.4",
     "nomnom": "1.8.1",
-    "request": "2.75.0",
-    "sharp": "0.16.0",
+    "pbf": "3.0.5",
+    "request": "2.79.0",
+    "sharp": "0.16.2",
     "sphericalmercator": "1.0.5",
-    "tileserver-gl-styles": "0.3.0"
+    "tileserver-gl-styles": "1.0.0",
+    "vector-tile": "1.3.0"
+  },
+  "optionalDependencies": {
+    "tileshrink-gl": "./plugins/tileshrink-gl"
   },
   "devDependencies": {
-    "should": "^10.0.0",
-    "mocha": "^2.5.0",
-    "supertest": "^1.2.0"
+    "should": "^11.1.1",
+    "mocha": "^3.2.0",
+    "supertest": "^2.0.1"
   }
 }

public/resources/mapbox-gl.css

@@ -21,13 +21,13 @@
 .mapboxgl-ctrl-top-left,
 .mapboxgl-ctrl-top-right,
 .mapboxgl-ctrl-bottom-left,
-.mapboxgl-ctrl-bottom-right  { position:absolute; }
+.mapboxgl-ctrl-bottom-right  { position:absolute; pointer-events:none; z-index:2; }
 .mapboxgl-ctrl-top-left      { top:0; left:0; }
 .mapboxgl-ctrl-top-right     { top:0; right:0; }
 .mapboxgl-ctrl-bottom-left   { bottom:0; left:0; }
 .mapboxgl-ctrl-bottom-right  { right:0; bottom:0; }
 
-.mapboxgl-ctrl { clear:both; }
+.mapboxgl-ctrl { clear:both; pointer-events:auto }
 .mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin:10px 0 0 10px; float:left; }
 .mapboxgl-ctrl-top-right .mapboxgl-ctrl{ margin:10px 10px 0 0; float:right; }
 .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin:0 0 10px 10px; float:left; }
@@ -65,7 +65,7 @@
     background-color: rgba(0,0,0,0.05);
 }
 .mapboxgl-ctrl-icon,
-.mapboxgl-ctrl-icon > div.arrow {
+.mapboxgl-ctrl-icon > span.arrow {
     speak: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -80,15 +80,16 @@
 }
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate  {
     padding: 5px;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M13%2C7%20L10.5%2C11.75%20L10.25%2C10%20z%20M13.888%2C6.112%20C13.615%2C5.84%2013.382%2C6.076%2012.5%2C6.5%20C10.14%2C7.634%206%2C10%206%2C10%20L9.5%2C10.5%20L10%2C14%20C10%2C14%2012.366%2C9.86%2013.5%2C7.5%20C13.924%2C6.617%2014.16%2C6.385%2013.888%2C6.112%27%2F%3E%3C%2Fsvg%3E");
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNMTAgNEM5IDQgOSA1IDkgNUw5IDUuMUE1IDUgMCAwIDAgNS4xIDlMNSA5QzUgOSA0IDkgNCAxMCA0IDExIDUgMTEgNSAxMUw1LjEgMTFBNSA1IDAgMCAwIDkgMTQuOUw5IDE1QzkgMTUgOSAxNiAxMCAxNiAxMSAxNiAxMSAxNSAxMSAxNUwxMSAxNC45QTUgNSAwIDAgMCAxNC45IDExTDE1IDExQzE1IDExIDE2IDExIDE2IDEwIDE2IDkgMTUgOSAxNSA5TDE0LjkgOUE1IDUgMCAwIDAgMTEgNS4xTDExIDVDMTEgNSAxMSA0IDEwIDR6TTEwIDYuNUEzLjUgMy41IDAgMCAxIDEzLjUgMTAgMy41IDMuNSAwIDAgMSAxMCAxMy41IDMuNSAzLjUgMCAwIDEgNi41IDEwIDMuNSAzLjUgMCAwIDEgMTAgNi41ek0xMCA4LjNBMS44IDEuOCAwIDAgMCA4LjMgMTAgMS44IDEuOCAwIDAgMCAxMCAxMS44IDEuOCAxLjggMCAwIDAgMTEuOCAxMCAxLjggMS44IDAgMCAwIDEwIDguM3oiIGZpbGw9IiMzMzMiLz48L3N2Zz4=");
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > div.arrow {
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {
     width: 20px;
     height: 20px;
     margin: 5px;
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%0A%09%3Cpolygon%20fill%3D%27%23333333%27%20points%3D%276%2C9%2010%2C1%2014%2C9%27%2F%3E%0A%09%3Cpolygon%20fill%3D%27%23CCCCCC%27%20points%3D%276%2C11%2010%2C19%2014%2C11%20%27%2F%3E%0A%3C%2Fsvg%3E");
     background-repeat: no-repeat;
+    display: inline-block;
 }
 
 .mapboxgl-ctrl.mapboxgl-ctrl-attrib {
@@ -109,6 +110,16 @@
     margin-left: 2px;
 }
 
+.mapboxgl-ctrl-scale {
+    background-color: rgba(255,255,255,0.75);
+    font-size: 10px;
+    border-width: medium 2px 2px;
+    border-style: none solid solid;
+    border-color: #333;
+    padding: 0 5px;
+    color: #333;
+}
+
 .mapboxgl-popup {
     position: absolute;
     top: 0;

public/templates/data.tmpl

@@ -37,7 +37,7 @@
     container: 'map',
     hash: true
   });
-  map.addControl(new mapboxgl.Navigation());
+  map.addControl(new mapboxgl.NavigationControl());
 
   function generateColor(str) {
     var rgb = [0, 0, 0];
@@ -69,6 +69,16 @@
         type: 'line',
         paint: {'line-color': colorText}
       });
+      layers_.push({
+        id: el['id'] + Math.random(),
+        source: 'vector_layer_',
+        'source-layer': el['id'],
+        interactive: true,
+        type: 'circle',
+        paint: {'circle-color': colorText,
+                'circle-radius': 3},
+        filter: ["==", "$type", "Point"]
+      });
       var item = document.createElement('div');
       item.innerHTML = '<div style="' +
         'background:rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1);' +
@@ -112,7 +122,9 @@
     if (features) {
       var html = '';
       features.forEach(function(feature) {
-        html += JSON.stringify(feature.properties, null, 2) + '\n';
+        html +=
+            '[Layer: ' + feature.layer['source-layer'] + ']\n' +
+            JSON.stringify(feature.properties, null, 2) + '\n\n';
       });
       propertyList.innerHTML = html;
     }

public/templates/index.tmpl

@@ -32,8 +32,12 @@
           <h3>{{name}}</h3>
           <p class="identifier">identifier: {{@key}}</p>
           <p class="services">
+            services:
+            {{#if serving_data}}
+              <a href="/styles/{{@key}}.json{{&../key_query}}">GL Style</a>
+            {{/if}}
             {{#if serving_rendered}}
-              services: <a href="/styles/{{@key}}/rendered.json{{&../key_query}}">TileJSON</a>
+              {{#if serving_data}}| {{/if}}<a href="/styles/{{@key}}/rendered.json{{&../key_query}}">TileJSON</a>
             {{/if}}
             {{#if wmts_link}}
               | <a href="{{&wmts_link}}">WMTS</a>

public/templates/viewer.tmpl

@@ -29,7 +29,7 @@
         style: '/styles/{{id}}.json{{&key_query}}',
         hash: true
       });
-      map.addControl(new mapboxgl.Navigation());
+      map.addControl(new mapboxgl.NavigationControl());
     } else {
       var map = L.mapbox.map('map', '/styles/{{id}}/rendered.json{{&key_query}}', { zoomControl: false });
       new L.Control.Zoom({ position: 'topright' }).addTo(map);

publish.js

@@ -31,6 +31,7 @@ delete packageJson.devDependencies;
 var str = JSON.stringify(packageJson, undefined, 2);
 fs.writeFileSync('light/package.json', str);
 fs.renameSync('light/README_light.md', 'light/README.md');
+fs.renameSync('light/Dockerfile_light', 'light/Dockerfile');
 
 /* PUBLISH */
 

src/main.js

@@ -78,8 +78,7 @@ var startWithMBTiles = function(mbtilesFile) {
         "options": {
           "paths": {
             "root": styleDir,
-            "fonts": "glyphs",
-            "sprites": "sprites",
+            "fonts": "fonts",
             "styles": "styles",
             "mbtiles": path.dirname(mbtilesFile)
           }
@@ -89,29 +88,58 @@ var startWithMBTiles = function(mbtilesFile) {
       };
 
       if (info.format == 'pbf' &&
-          info.name.toLowerCase().indexOf('osm2vectortiles') > -1) {
-        config['data']['osm2vectortiles'] = {
+          info.name.toLowerCase().indexOf('openmaptiles') > -1) {
+        config['data']['openmaptiles'] = {
           "mbtiles": path.basename(mbtilesFile)
         };
 
+        var omtV = (info.version || '').split('.');
+
         var styles = fs.readdirSync(path.resolve(styleDir, 'styles'));
         for (var i = 0; i < styles.length; i++) {
-          var styleFilename = styles[i];
-          if (styleFilename.endsWith('.json')) {
-            var styleObject = {
-              "style": path.basename(styleFilename),
-              "tilejson": {
-                "bounds": bounds
-              }
-            };
-            config['styles'][path.basename(styleFilename, '.json')] =
-                styleObject;
+          var styleName = styles[i];
+          var styleFileRel = styleName + '/style.json';
+          var styleFile = path.resolve(styleDir, 'styles', styleFileRel);
+          if (fs.existsSync(styleFile)) {
+            var styleJSON = require(styleFile);
+            var omtVersionCompatibility =
+              ((styleJSON || {}).metadata || {})['openmaptiles:version'] || 'x';
+            var m = omtVersionCompatibility.toLowerCase().split('.');
+
+            var isCompatible = !(
+              m[0] != 'x' && (
+                m[0] != omtV[0] || (
+                  (m[1] || 'x') != 'x' && (
+                    m[1] != omtV[1] || (
+                      (m[2] || 'x') != 'x' &&
+                      m[2] != omtV[2]
+                    )
+                  )
+                )
+              )
+            );
+
+            if (isCompatible) {
+              var styleObject = {
+                "style": styleFileRel,
+                "tilejson": {
+                  "bounds": bounds
+                }
+              };
+              config['styles'][styleName] = styleObject;
+            } else {
+              console.log('Style', styleName, 'requires OpenMapTiles version',
+              omtVersionCompatibility, 'but mbtiles is version', info.version);
+            }
           }
         }
       } else {
-        console.log('WARN: MBTiles not in "osm2vectortiles" format. ' +
+        console.log('WARN: MBTiles not in "openmaptiles" format. ' +
                     'Serving raw data only...');
-        config['data'][info.id || 'mbtiles'] = {
+        config['data'][(info.id || 'mbtiles')
+                           .replace(/\//g, '_')
+                           .replace(/\:/g, '_')
+                           .replace(/\?/g, '_')] = {
           "mbtiles": path.basename(mbtilesFile)
         };
       }
@@ -147,7 +175,7 @@ fs.stat(path.resolve(opts.config), function(err, stats) {
         console.log('No MBTiles specified, using ' + mbtiles);
         return startWithMBTiles(mbtiles);
       } else {
-        var url = 'https://github.com/klokantech/tileserver-gl-styles/releases/download/v0.3.0/zurich_switzerland.mbtiles';
+        var url = 'https://github.com/klokantech/tileserver-gl/releases/download/v1.3.0/zurich_switzerland.mbtiles';
         var filename = 'zurich_switzerland.mbtiles';
         var stream = fs.createWriteStream(filename);
         console.log('Downloading sample data (' + filename + ') from ' + url);

src/serve_data.js

@@ -1,15 +1,23 @@
 'use strict';
 
 var fs = require('fs'),
-    path = require('path');
+    path = require('path'),
+    zlib = require('zlib');
 
 var clone = require('clone'),
     express = require('express'),
-    mbtiles = require('mbtiles');
+    mbtiles = require('mbtiles'),
+    pbf = require('pbf'),
+    VectorTile = require('vector-tile').VectorTile;
+
+var tileshrinkGl;
+try {
+  tileshrinkGl = require('tileshrink-gl');
+} catch (e) {}
 
 var utils = require('./utils');
 
-module.exports = function(options, repo, params, id) {
+module.exports = function(options, repo, params, id, styles) {
   var app = express().disable('x-powered-by');
 
   var mbtilesFile = path.resolve(options.paths.mbtiles, params.mbtiles);
@@ -17,6 +25,8 @@ module.exports = function(options, repo, params, id) {
     'tiles': params.domains || options.domains
   };
 
+  var shrinkers = {};
+
   repo[id] = tileJSON;
 
   var mbtilesFileStats = fs.statSync(mbtilesFile);
@@ -46,7 +56,8 @@ module.exports = function(options, repo, params, id) {
     var z = req.params.z | 0,
         x = req.params.x | 0,
         y = req.params.y | 0;
-    if (req.params.format != tileJSON.format) {
+    if (req.params.format != tileJSON.format &&
+        !(req.params.format == 'geojson' && tileJSON.format == 'pbf')) {
       return res.status(404).send('Invalid format');
     }
     if (z < tileJSON.minzoom || 0 || x < 0 || y < 0 ||
@@ -62,16 +73,74 @@ module.exports = function(options, repo, params, id) {
           return res.status(500).send(err.message);
         }
       } else {
-        if (tileJSON['format'] == 'pbf') {
-          headers['Content-Type'] = 'application/x-protobuf';
-          headers['Content-Encoding'] = 'gzip';
-        }
-        delete headers['ETag']; // do not trust the tile ETag -- regenerate
-        res.set(headers);
-
         if (data == null) {
           return res.status(404).send('Not found');
         } else {
+          if (tileJSON['format'] == 'pbf') {
+            var isGzipped = data.slice(0,2).indexOf(
+                new Buffer([0x1f, 0x8b])) === 0;
+            var style = req.query.style;
+            if (style && tileshrinkGl) {
+              if (!shrinkers[style]) {
+                var styleJSON = styles[style];
+                if (styleJSON) {
+                  var sourceName = null;
+                  for (var sourceName_ in styleJSON.sources) {
+                    var source = styleJSON.sources[sourceName_];
+                    if (source &&
+                        source.type == 'vector' &&
+                        source.url.endsWith('/' + id + '.json')) {
+                      sourceName = sourceName_;
+                    }
+                  }
+                  shrinkers[style] = tileshrinkGl.createPBFShrinker(styleJSON, sourceName);
+                }
+              }
+              if (shrinkers[style]) {
+                if (isGzipped) {
+                  data = zlib.unzipSync(data);
+                  isGzipped = false;
+                }
+                data = shrinkers[style](data, z, tileJSON.maxzoom);
+                //console.log(shrinkers[style].getStats());
+              }
+            }
+          }
+          if (req.params.format == 'pbf') {
+            headers['Content-Type'] = 'application/x-protobuf';
+          } else if (req.params.format == 'geojson') {
+            headers['Content-Type'] = 'application/json';
+
+            if (isGzipped) {
+              data = zlib.unzipSync(data);
+              isGzipped = false;
+            }
+
+            var tile = new VectorTile(new pbf(data));
+            var geojson = {
+              "type": "FeatureCollection",
+              "features": []
+            };
+            for (var layerName in tile.layers) {
+              var layer = tile.layers[layerName];
+              for (var i = 0; i < layer.length; i++) {
+                var feature = layer.feature(i);
+                var featureGeoJSON = feature.toGeoJSON(x, y, z);
+                featureGeoJSON.properties.layer = layerName;
+                geojson.features.push(featureGeoJSON);
+              }
+            }
+            data = JSON.stringify(geojson);
+          }
+          delete headers['ETag']; // do not trust the tile ETag -- regenerate
+          headers['Content-Encoding'] = 'gzip';
+          res.set(headers);
+
+          if (!isGzipped) {
+            data = zlib.gzipSync(data);
+            isGzipped = true;
+          }
+
           return res.status(200).send(data);
         }
       }

src/serve_font.js

@@ -1,7 +1,9 @@
 'use strict';
 
 var clone = require('clone'),
-    express = require('express');
+    express = require('express'),
+    fs = require('fs'),
+    path = require('path');
 
 var utils = require('./utils');
 
@@ -12,14 +14,29 @@ module.exports = function(options, allowedFonts) {
 
   var fontPath = options.paths.fonts;
 
+  var existingFonts = {};
+  fs.readdir(options.paths.fonts, function(err, files) {
+    files.forEach(function(file) {
+      fs.stat(path.join(fontPath, file), function(err, stats) {
+        if (!err) {
+          if (stats.isDirectory()) {
+            existingFonts[path.basename(file)] = true;
+          }
+        }
+      });
+    });
+  });
+
   app.get('/:fontstack/:range([\\d]+-[\\d]+).pbf',
       function(req, res, next) {
     var fontstack = decodeURI(req.params.fontstack);
     var range = req.params.range;
 
-    return utils.getFontsPbf(allowedFonts, fontPath, fontstack, range,
+    return utils.getFontsPbf(allowedFonts, fontPath, fontstack, range, existingFonts,
         function(err, concated) {
       if (err || concated.length === 0) {
+        console.log(err);
+        console.log(concated.length);
         return res.status(400).send('');
       } else {
         res.header('Content-type', 'application/x-protobuf');

src/serve_rendered.js

@@ -49,6 +49,19 @@ module.exports = function(options, repo, params, id, dataResolver) {
     sources: {}
   };
 
+  var existingFonts = {};
+  fs.readdir(options.paths.fonts, function(err, files) {
+    files.forEach(function(file) {
+      fs.stat(path.join(options.paths.fonts, file), function(err, stats) {
+        if (!err) {
+          if (stats.isDirectory()) {
+            existingFonts[path.basename(file)] = true;
+          }
+        }
+      });
+    });
+  });
+
   var styleJSON;
   var createPool = function(ratio, min, max) {
     var createRenderer = function(ratio, createCallback) {
@@ -67,7 +80,7 @@ module.exports = function(options, repo, params, id, dataResolver) {
             var parts = req.url.split('/');
             var fontstack = unescape(parts[2]);
             var range = parts[3].split('.')[0];
-            utils.getFontsPbf(null, options.paths[protocol], fontstack, range,
+            utils.getFontsPbf(null, options.paths[protocol], fontstack, range, existingFonts,
                 function(err, concated) {
               callback(err, {data: concated});
             });
@@ -144,9 +157,19 @@ module.exports = function(options, repo, params, id, dataResolver) {
     });
   };
 
-  styleJSON = clone(require(path.join(options.paths.styles, styleFile)));
-  styleJSON.sprite = 'sprites://' + path.basename(styleFile, '.json');
-  styleJSON.glyphs = 'fonts://{fontstack}/{range}.pbf';
+  var styleJSONPath = path.join(options.paths.styles, styleFile);
+  styleJSON = clone(require(styleJSONPath));
+
+  var httpTester = /^(http(s)?:)?\/\//;
+  if (styleJSON.sprite && !httpTester.test(styleJSON.sprite)) {
+    styleJSON.sprite = 'sprites://' +
+        styleJSON.sprite
+            .replace('{style}', path.basename(styleFile, '.json'))
+            .replace('{styleJsonFolder}', path.relative(options.paths.sprites, path.dirname(styleJSONPath)));
+  }
+  if (styleJSON.glyphs && !httpTester.test(styleJSON.glyphs)) {
+    styleJSON.glyphs = 'fonts://' + styleJSON.glyphs;
+  }
 
   var tileJSON = {
     'tilejson': '2.0.0',
@@ -194,6 +217,9 @@ module.exports = function(options, repo, params, id, dataResolver) {
         }
         map.sources[name] = new mbtiles(mbtilesFile, function(err) {
           map.sources[name].getInfo(function(err, info) {
+            if (err) {
+              console.error(err);
+            }
             var type = source.type;
             Object.assign(source, info);
             source.type = type;
@@ -446,18 +472,19 @@ module.exports = function(options, repo, params, id, dataResolver) {
   };
 
   var staticPattern =
-      '/static/%s/:width(\\d+)x:height(\\d+)' +
+      '/static/:raw(raw)?/%s/:width(\\d+)x:height(\\d+)' +
       ':scale(' + SCALE_PATTERN + ')?\.:format([\\w]+)';
 
   var centerPattern =
-      util.format(':lon(%s),:lat(%s),:z(%s)(@:bearing(%s)(,:pitch(%s))?)?',
+      util.format(':x(%s),:y(%s),:z(%s)(@:bearing(%s)(,:pitch(%s))?)?',
                   FLOAT_PATTERN, FLOAT_PATTERN, FLOAT_PATTERN,
                   FLOAT_PATTERN, FLOAT_PATTERN);
 
   app.get(util.format(staticPattern, centerPattern), function(req, res, next) {
+    var raw = req.params.raw;
     var z = +req.params.z,
-        x = +req.params.lon,
-        y = +req.params.lat,
+        x = +req.params.x,
+        y = +req.params.y,
         bearing = +(req.params.bearing || '0'),
         pitch = +(req.params.pitch || '0'),
         w = req.params.width | 0,
@@ -469,6 +496,12 @@ module.exports = function(options, repo, params, id, dataResolver) {
       return res.status(404).send('Invalid zoom');
     }
 
+    if (raw) {
+      var ll = mercator.inverse([x, y]);
+      x = ll[0];
+      y = ll[1];
+    }
+
     var path = extractPathFromQuery(req.query);
     var overlay = renderOverlay(z, x, y, bearing, pitch, w, h, scale,
                                 path, req.query);
@@ -482,8 +515,19 @@ module.exports = function(options, repo, params, id, dataResolver) {
                   FLOAT_PATTERN, FLOAT_PATTERN, FLOAT_PATTERN, FLOAT_PATTERN);
 
   app.get(util.format(staticPattern, boundsPattern), function(req, res, next) {
+    var raw = req.params.raw;
     var bbox = [+req.params.minx, +req.params.miny,
                 +req.params.maxx, +req.params.maxy];
+
+    if (raw) {
+      var minCorner = mercator.inverse(bbox.slice(0, 2));
+      var maxCorner = mercator.inverse(bbox.slice(2));
+      bbox[0] = minCorner[0];
+      bbox[1] = minCorner[1];
+      bbox[2] = maxCorner[0];
+      bbox[3] = maxCorner[1];
+    }
+
     var w = req.params.width | 0,
         h = req.params.height | 0,
         scale = getScale(req.params.scale),
@@ -510,6 +554,7 @@ module.exports = function(options, repo, params, id, dataResolver) {
       return res.status(400).send('Invalid path');
     }
 
+    var raw = req.params.raw;
     var w = req.params.width | 0,
         h = req.params.height | 0,
         bearing = 0,
@@ -529,6 +574,12 @@ module.exports = function(options, repo, params, id, dataResolver) {
         x = (bbox[0] + bbox[2]) / 2,
         y = (bbox[1] + bbox[3]) / 2;
 
+    if (raw) {
+      var ll = mercator.inverse([x, y]);
+      x = ll[0];
+      y = ll[1];
+    }
+
     var overlay = renderOverlay(z, x, y, bearing, pitch, w, h, scale,
                                 path, req.query);
 

src/serve_style.js

@@ -43,19 +43,35 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
   };
   styleJSON.layers.forEach(findFontReferences);
 
-  var spritePath = path.join(options.paths.sprites,
-                             path.basename(styleFile, '.json'));
+  var spritePath;
 
-  styleJSON.sprite = 'local://styles/' + id + '/sprite';
-  styleJSON.glyphs = 'local://fonts/{fontstack}/{range}.pbf';
+  var httpTester = /^(http(s)?:)?\/\//;
+  if (styleJSON.sprite && !httpTester.test(styleJSON.sprite)) {
+    spritePath = path.join(options.paths.sprites,
+        styleJSON.sprite
+            .replace('{style}', path.basename(styleFile, '.json'))
+            .replace('{styleJsonFolder}', path.relative(options.paths.sprites, path.dirname(styleFile)))
+            );
+    styleJSON.sprite = 'local://styles/' + id + '/sprite';
+  }
+  if (styleJSON.glyphs && !httpTester.test(styleJSON.glyphs)) {
+    styleJSON.glyphs = 'local://fonts/{fontstack}/{range}.pbf';
+  }
 
   repo[id] = styleJSON;
 
   app.get('/' + id + '.json', function(req, res, next) {
-    var fixUrl = function(url, opt_nokey) {
-      var query = '';
+    var fixUrl = function(url, opt_nokey, opt_nostyle) {
+      var queryParams = [];
+      if (!opt_nostyle) {
+        queryParams.push('style=' + id);
+      }
       if (!opt_nokey && req.query.key) {
-        query = '?key=' + req.query.key;
+        queryParams.unshift('key=' + req.query.key);
+      }
+      var query = '';
+      if (queryParams.length) {
+        query = '?' + queryParams.join('&');
       }
       return url.replace(
           'local://', req.protocol + '://' + req.headers.host + '/') + query;
@@ -67,13 +83,20 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
       source.url = fixUrl(source.url);
     });
     // mapbox-gl-js viewer cannot handle sprite urls with query
-    styleJSON_.sprite = fixUrl(styleJSON_.sprite, true);
-    styleJSON_.glyphs = fixUrl(styleJSON_.glyphs);
+    if (styleJSON_.sprite) {
+      styleJSON_.sprite = fixUrl(styleJSON_.sprite, true, true);
+    }
+    if (styleJSON_.glyphs) {
+      styleJSON_.glyphs = fixUrl(styleJSON_.glyphs, false, true);
+    }
     return res.send(styleJSON_);
   });
 
   app.get('/' + id + '/sprite:scale(@[23]x)?\.:format([\\w]+)',
       function(req, res, next) {
+    if (!spritePath) {
+      return res.status(404).send('File not found');
+    }
     var scale = req.params.scale,
         format = req.params.format;
     var filename = spritePath + (scale || '') + '.' + format;

src/server.js

@@ -153,7 +153,7 @@ module.exports = function(opts, callback) {
       return;
     }
 
-    app.use('/data/', serve_data(options, serving.data, item, id));
+    app.use('/data/', serve_data(options, serving.data, item, id, serving.styles));
   });
 
   app.get('/styles.json', function(req, res, next) {

src/utils.js

@@ -4,7 +4,8 @@ var async = require('async'),
     path = require('path'),
     fs = require('fs');
 
-var glyphCompose = require('glyph-pbf-composite');
+var clone = require('clone'),
+    glyphCompose = require('glyph-pbf-composite');
 
 module.exports.getTileUrls = function(req, domains, path, format) {
 
@@ -18,7 +19,14 @@ module.exports.getTileUrls = function(req, domains, path, format) {
   }
 
   var key = req.query.key;
-  var query = (key && key.length > 0) ? ('?key=' + key) : '';
+  var queryParams = [];
+  if (req.query.key) {
+    queryParams.push('key=' + req.query.key);
+  }
+  if (req.query.style) {
+    queryParams.push('style=' + req.query.style);
+  }
+  var query = queryParams.length > 0 ? ('?' + queryParams.join('&')) : '';
 
   var uris = [];
   domains.forEach(function(domain) {
@@ -44,13 +52,25 @@ module.exports.fixTileJSONCenter = function(tileJSON) {
   }
 };
 
-module.exports.getFontsPbf = function(allowedFonts, fontPath, names, range, callback) {
-  var getFontPbf = function(name, range, callback) {
-    if (!allowedFonts || allowedFonts[name]) {
+module.exports.getFontsPbf = function(allowedFonts, fontPath, names, range, fallbacks, callback) {
+  var getFontPbf = function(allowedFonts, name, range, callback, fallbacks) {
+    if (!allowedFonts || (allowedFonts[name] && fallbacks)) {
       var filename = path.join(fontPath, name, range + '.pbf');
+      if (!fallbacks) {
+        fallbacks = clone(allowedFonts || {});
+      }
+      delete fallbacks[name];
       return fs.readFile(filename, function(err, data) {
         if (err) {
-          return callback(new Error('Font load error: ' + name));
+          console.error('ERROR: Font not found:', name);
+          if (fallbacks && Object.keys(fallbacks).length) {
+            var fallbackName = Object.keys(fallbacks)[0];
+            console.error('ERROR: Trying to use', fallbackName, 'as a fallback');
+            delete fallbacks[fallbackName];
+            return getFontPbf(null, fallbackName, range, callback, fallbacks);
+          } else {
+            return callback(new Error('Font load error: ' + name));
+          }
         } else {
           return callback(null, data);
         }
@@ -64,7 +84,7 @@ module.exports.getFontsPbf = function(allowedFonts, fontPath, names, range, call
   var queue = [];
   fonts.forEach(function(font) {
     queue.push(function(callback) {
-      getFontPbf(font, range, callback);
+      getFontPbf(allowedFonts, font, range, callback, clone(allowedFonts || fallbacks));
     });
   });
 

test/metadata.js

@@ -64,6 +64,6 @@ describe('Metadata', function() {
     });
   });
 
-  testTileJSON('/styles/bright/rendered.json', 'bright');
-  testTileJSON('/data/zurich-vector.json', 'zurich-vector');
+  testTileJSON('/styles/test-style/rendered.json', 'test-style');
+  testTileJSON('/data/openmaptiles.json', 'openmaptiles');
 });

test/static.js

@@ -12,7 +12,7 @@ var testStatic = function(prefix, q, format, status, scale, type, query) {
   });
 };
 
-var prefix = 'bright';
+var prefix = 'test-style';
 
 describe('Static endpoints', function() {
   describe('center-based', function() {

test/style.js

@@ -8,7 +8,7 @@ var testIs = function(url, type, status) {
   });
 };
 
-var prefix = 'bright';
+var prefix = 'test-style';
 
 describe('Styles', function() {
   describe('/styles/' + prefix + '.json is valid style', function() {

test/tiles_data.js

@@ -8,7 +8,7 @@ var testTile = function(prefix, z, x, y, status) {
   });
 };
 
-var prefix = 'zurich-vector';
+var prefix = 'openmaptiles';
 
 describe('Vector tiles', function() {
   describe('existing tiles', function() {

test/tiles_rendered.js

@@ -9,7 +9,7 @@ var testTile = function(prefix, z, x, y, format, status, scale, type) {
   });
 };
 
-var prefix = 'bright';
+var prefix = 'test-style';
 
 describe('Raster tiles', function() {
   describe('valid requests', function() {