Update package version to 1.3.2

Use Mapbox GL Inspect for X-Ray View

.dockerignore

@@ -1,4 +1,7 @@
 .git
+docs/_build
 node_modules
 test_data
-test
+light
+config.json
+*.mbtiles

.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 \
@@ -26,4 +27,4 @@ VOLUME /data
 WORKDIR /data
 
 EXPOSE 80
-CMD ["/usr/src/app/run.sh"]
+ENTRYPOINT ["/usr/src/app/run.sh"]

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
+ENTRYPOINT ["node", "/usr/src/app/", "-p", "80"]

docs/config.rst

@@ -10,7 +10,7 @@ Example::
     "options": {
       "paths": {
         "root": "",
-        "fonts": "glyphs",
+        "fonts": "fonts",
         "sprites": "sprites",
         "styles": "styles",
         "mbtiles": ""
@@ -25,7 +25,8 @@ Example::
         "pngQuantization": false,
         "png": 90
       },
-      "maxSize": 2048
+      "maxSize": 2048,
+      "serveAllFonts": false
     },
     "styles": {
       "basic": {
@@ -99,11 +100,14 @@ Each item specifies one data source which should be made accessible by the serve
 
 The mbtiles file does not need to be specified here unless you explicitly want to serve the raw data.
 
-Referencing local mbtiles from style
-====================================
+Referencing local files from style JSON
+=======================================
 
 You can link various data sources from the style JSON (for example even remote TileJSONs).
 
+MBTiles
+-------
+
 To specify that you want to use local mbtiles, use to following syntax: ``mbtiles://switzerland.mbtiles``.
 The TileServer-GL will try to find the file ``switzerland.mbtiles`` in ``root`` + ``mbtiles`` path.
 
@@ -119,3 +123,32 @@ For example::
 Alternatively, you can use ``mbtiles://{zurich-vector}`` to reference existing data object from the config.
 In this case, the server will look into the ``config.json`` to determine what mbtiles file to use.
 For the config above, this is equivalent to ``mbtiles://zurich.mbtiles``.
+
+Sprites
+-------
+
+If your style requires any sprites, make sure the style JSON contains proper path in the ``sprite`` property.
+
+It can be a local path (e.g. ``my-style/sprite``) or remove http(s) location (e.g. ``https://mycdn.com/my-style/sprite``). Several possible extension are added to this path, so the following files should be present:
+
+* ``sprite.json``
+* ``sprite.png``
+* ``sprite@2x.json``
+* ``sprite@2x.png``
+
+You can also use the following placeholders in the sprite path for easier use:
+
+* ``{style}`` -- gets replaced with the name of the style file (``xxx.json``)
+* ``{styleJsonFolder}`` -- gets replaced with the path to the style file
+
+Fonts (glyphs)
+--------------
+
+Similarly to the sprites, the style JSON also needs to contain proper paths to the font glyphs (in the ``glyphs`` property) and can be both local and remote.
+
+It should contain the following placeholders:
+
+* ``{fontstack}`` -- name of the font and variant
+* ``{range}`` -- range of the glyphs
+
+For example ``"glyphs": "{fontstack}/{range}.pbf"`` will instruct TileServer-GL to look for the files such as ``fonts/Open Sans/0-255.pbf`` (``fonts`` come from the ``paths`` property of the ``config.json`` example above).

docs/deployment.rst

@@ -13,3 +13,8 @@ Securing
 ========
 
 Nginx can be used to add protection via https, password, referrer, IP address restriction, access keys, etc.
+
+Running behind a proxy or a load-balancer
+=========================================
+
+If you need to run TileServer GL behind a proxy, make sure the proxy sends ``X-Forwarded-*`` headers to the server (most importantly ``X-Forwarded-Host`` and ``X-Forwaded-Proto``) to ensures the URLs generated inside TileJSON etc. are using the desired domain and protocol.

docs/endpoints.rst

@@ -43,14 +43,24 @@ Static images
 
     * value of ``0.1`` means "add 10% size to each side to make sure the area of interest is nicely visible"
 
+* You can also use (experimental) ``/styles/{id}/static/raw/...`` endpoints with raw spherical mercator coordinates (EPSG:3857) instead of WGS84.
+
 * The static images are not available in the ``tileserver-gl-light`` version.
 
 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
 ===============
 Array of all TileJSONs is at ``/index.json`` (``/rendered.json``; ``/data.json``)
+
+List of available fonts
+=======================
+Array of names of the available fonts is at ``/fontstacks.json``

docs/installation.rst

@@ -9,11 +9,29 @@ When running docker image, no special installation is needed -- the docker will
 
 Just run ``docker run -it -v $(pwd):/data -p 8080:80 klokantech/tileserver-gl``.
 
+Additional options (see :doc:`/usage`) can be passed to the TileServer GL by appending them to the end of this command. You can, for example, do the following:
+
+* ``docker run ... klokantech/tileserver-gl my-tiles.mbtiles`` -- explicitly specify which mbtiles to use (if you have more in the folder)
+* ``docker run ... klokantech/tileserver-gl --verbose`` -- to see the default config created automatically
+
 npm
 ===
 
 Just run ``npm install -g tileserver-gl``.
 
+
+Native dependencies
+-------------------
+
+There are some native dependencies that you need to make sure are installed if you plan to run the TileServer GL natively without docker.
+The precise package names you need to install may differ on various platforms.
+
+These are required on Debian 9:
+  * ``build-essential``
+  * ``libcairo2-dev``
+  * ``libprotobuf-dev``
+
+
 ``tileserver-gl-light`` on npm
 ==============================
 
@@ -23,7 +41,7 @@ Alternatively, you can use ``tileserver-gl-light`` package instead, which is pur
 From source
 ===========
 
-Make sure you have Node v4 or higher (nvm install 4) and run::
+Make sure you have Node v4 (nvm install 4) and run::
 
   npm install
   node .
@@ -32,6 +50,9 @@ Make sure you have Node v4 or higher (nvm install 4) and run::
 On OSX
 ======
 
-Make sure to have ``pkg-config`` and ``cairo`` installed::
+Make sure to have dependencies of canvas_ package installed::
 
-  brew install pkg-config cairo
+  brew install pkg-config cairo libpng jpeg giflib
+
+
+.. _canvas: https://www.npmjs.com/package/canvas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tileserver-gl",
-  "version": "1.1.5",
+  "version": "1.3.2",
   "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,41 @@
     "url": "https://github.com/klokantech/tileserver-gl.git"
   },
   "license": "BSD-2-Clause",
+  "engines": {
+    "node": ">=4.2.1 <5"
+  },
   "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.3",
     "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",
-    "sphericalmercator": "1.0.5",
-    "tileserver-gl-styles": "0.3.0"
+    "pbf": "3.0.5",
+    "request": "2.79.0",
+    "sharp": "0.16.2",
+    "tileserver-gl-styles": "1.1.0",
+    "vector-tile": "1.3.0",
+    "@mapbox/sphericalmercator": "1.0.5"
+  },
+  "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-inspect.css

@@ -0,0 +1,40 @@
+.mapbox-gl-inspect_popup {
+  color: #333;
+  display: table;
+}
+
+.mapbox-gl-inspect_feature:not(:last-child) {
+  border-bottom: 1px solid #ccc;
+}
+
+.mapbox-gl-inspect_layer:before {
+  content: '#';
+}
+
+.mapbox-gl-inspect_layer {
+  display: block;
+  font-weight: bold;
+}
+
+.mapbox-gl-inspect_property {
+  display: table-row;
+}
+
+.mapbox-gl-inspect_property-value {
+  display: table-cell;
+
+}
+
+.mapbox-gl-inspect_property-name {
+  display: table-cell;
+  padding-right: 10px;
+}
+
+.mapboxgl-ctrl-inspect {
+  background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#333333%22%20preserveAspectRatio=%22xMidYMid%20meet%22%20viewBox=%22-10%20-10%2060%2060%22%3E%3Cg%3E%3Cpath%20d=%22m15%2021.6q0-2%201.5-3.5t3.5-1.5%203.5%201.5%201.5%203.5-1.5%203.6-3.5%201.4-3.5-1.4-1.5-3.6z%20m18.4%2011.1l-6.4-6.5q1.4-2.1%201.4-4.6%200-3.4-2.5-5.8t-5.9-2.4-5.9%202.4-2.5%205.8%202.5%205.9%205.9%202.5q2.4%200%204.6-1.4l7.4%207.4q-0.9%200.6-2%200.6h-20q-1.3%200-2.3-0.9t-1.1-2.3l0.1-26.8q0-1.3%201-2.3t2.3-0.9h13.4l10%2010v19.3z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+}
+
+.mapboxgl-ctrl-map {
+  background-image: url('data:image/svg+xml;charset=utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20fill="#333333%22%20viewBox=%22-10%20-10%2060%2060%22%20preserveAspectRatio=%22xMidYMid%20meet%22%3E%3Cg%3E%3Cpath%20d=%22m25%2031.640000000000004v-19.766666666666673l-10-3.511666666666663v19.766666666666666z%20m9.140000000000008-26.640000000000004q0.8599999999999923%200%200.8599999999999923%200.8600000000000003v25.156666666666666q0%200.625-0.625%200.783333333333335l-9.375%203.1999999999999993-10-3.5133333333333354-8.906666666666668%203.4383333333333326-0.2333333333333334%200.07833333333333314q-0.8616666666666664%200-0.8616666666666664-0.8599999999999994v-25.156666666666663q0-0.625%200.6233333333333331-0.7833333333333332l9.378333333333334-3.198333333333334%2010%203.5133333333333336%208.905000000000001-3.4383333333333344z%22%3E%3C/path%3E%3C/g%3E%3C/svg%3E');
+}
+

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,37 +65,68 @@
     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;
 }
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
+.mapboxgl-ctrl-icon {
     padding: 5px;
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-out {
     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%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27m%207%2C9%20c%20-0.554%2C0%20-1%2C0.446%20-1%2C1%200%2C0.554%200.446%2C1%201%2C1%20l%206%2C0%20c%200.554%2C0%201%2C-0.446%201%2C-1%200%2C-0.554%20-0.446%2C-1%20-1%2C-1%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
 }
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in  {
-    padding: 5px;
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-zoom-in {
     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%0A%20%20%3Cpath%20style%3D%27fill%3A%23333333%3B%27%20d%3D%27M%2010%206%20C%209.446%206%209%206.4459904%209%207%20L%209%209%20L%207%209%20C%206.446%209%206%209.446%206%2010%20C%206%2010.554%206.446%2011%207%2011%20L%209%2011%20L%209%2013%20C%209%2013.55401%209.446%2014%2010%2014%20C%2010.554%2014%2011%2013.55401%2011%2013%20L%2011%2011%20L%2013%2011%20C%2013.554%2011%2014%2010.554%2014%2010%20C%2014%209.446%2013.554%209%2013%209%20L%2011%209%20L%2011%207%20C%2011%206.4459904%2010.554%206%2010%206%20z%27%20%2F%3E%0A%3C%2Fsvg%3E%0A");
 }
 .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;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%23333%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.watching  {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%20%20%3Cpath%20style%3D%27fill%3A%2300f%3B%27%20d%3D%27M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
 }
 
-.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 {
     padding: 0 5px;
-    background-color: rgba(255,255,255,0.5);
+    background-color: rgba(255, 255, 255, .5);
     margin: 0;
 }
+.mapboxgl-ctrl-attrib.compact {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 0 10px 10px 10px;
+    position: relative;
+    padding-right: 24px;
+    background-color: #fff;
+    border-radius: 3px 12px 12px 3px;
+    visibility: hidden;
+}
+.mapboxgl-ctrl-attrib.compact:hover {
+    visibility: visible;
+}
+.mapboxgl-ctrl-attrib.compact:after {
+    content: '';
+    cursor: pointer;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%270%200%2020%2020%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0D%0A%09%3Cpath%20fill%3D%27%23333333%27%20fill-rule%3D%27evenodd%27%20d%3D%27M4%2C10a6%2C6%200%201%2C0%2012%2C0a6%2C6%200%201%2C0%20-12%2C0%20M9%2C7a1%2C1%200%201%2C0%202%2C0a1%2C1%200%201%2C0%20-2%2C0%20M9%2C10a1%2C1%200%201%2C1%202%2C0l0%2C3a1%2C1%200%201%2C1%20-2%2C0%27%20%2F%3E%0D%0A%3C%2Fsvg%3E");
+    background-color: rgba(255, 255, 255, .5);
+    width: 24px;
+    height: 24px;
+    box-sizing: border-box;
+    visibility: visible;
+    border-radius: 12px;
+}
 .mapboxgl-ctrl-attrib a {
     color: rgba(0,0,0,0.75);
     text-decoration: none;
@@ -109,6 +140,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

@@ -6,14 +6,15 @@
   <title>{{name}} - TileServer GL</title>
   {{#is_vector}}
   <link rel="stylesheet" type="text/css" href="/mapbox-gl.css{{&key_query}}" />
+  <link rel="stylesheet" type="text/css" href="/mapbox-gl-inspect.css{{&key_query}}" />
   <script src="/mapbox-gl.js{{&key_query}}"></script>
+  <script src="/mapbox-gl-inspect.min.js{{&key_query}}"></script>
   <style>
-    body {background:#000;color:#ccc;}
+    body {background:#fff;color:#333;font-family:Arial, sans-serif;}
     #map {position:absolute;top:0;left:0;right:250px;bottom:0;}
     h1 {position:absolute;top:5px;right:0;width:240px;margin:0;line-height:20px;font-size:20px;}
-    #layerList {position:absolute;top:35px;right:0;bottom:60%;width:240px;overflow:auto;}
+    #layerList {position:absolute;top:35px;right:0;bottom:0;width:240px;overflow:auto;}
     #layerList div div {width:15px;height:15px;display:inline-block;}
-    #propertyList {position:absolute;top:40%;bottom:0;right:0;width:240px;overflow:auto;color:#fff;}
   </style>
   {{/is_vector}}
   {{^is_vector}}
@@ -35,87 +36,37 @@
   <script>
   var map = new mapboxgl.Map({
     container: 'map',
-    hash: true
-  });
-  map.addControl(new mapboxgl.Navigation());
-
-  function generateColor(str) {
-    var rgb = [0, 0, 0];
-    for (var i = 0; i < str.length; i++) {
-        var v = str.charCodeAt(i);
-        rgb[v % 3] = (rgb[i % 3] + (13*(v%13))) % 12;
-    }
-    var r = 4 + rgb[0];
-    var g = 4 + rgb[1];
-    var b = 4 + rgb[2];
-    r = (r * 16) + r;
-    g = (g * 16) + g;
-    b = (b * 16) + b;
-    return [r, g, b, 1];
-  };
-
-  function initLayer(data) {
-    var layer;
-    var layerList = document.getElementById('layerList');
-    var layers_ = [];
-    data['vector_layers'].forEach(function(el) {
-      var color = generateColor(el['id']);
-      var colorText = 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + color[3] + ')';
-      layers_.push({
-        id: el['id'] + Math.random(),
-        source: 'vector_layer_',
-        'source-layer': el['id'],
-        interactive: true,
-        type: 'line',
-        paint: {'line-color': colorText}
-      });
-      var item = document.createElement('div');
-      item.innerHTML = '<div style="' +
-        'background:rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',1);' +
-        '"></div> ' + el['id'];
-      layerList.appendChild(item);
-    });
-    map.setStyle({
+    hash: true,
+    style: {
       version: 8,
       sources: {
         'vector_layer_': {
           type: 'vector',
-          tiles: data['tiles'],
-          minzoom: data['minzoom'],
-          maxzoom: data['maxzoom']
+          url: '/data/{{id}}.json{{&key_query}}'
         }
       },
-      layers: layers_
-    });
-
-    return layer;
-  }
-
-  var xhttp = new XMLHttpRequest();
-  xhttp.onreadystatechange = function() {
-    if (xhttp.readyState == 4 && xhttp.status == 200) {
-      initLayer(xhttp.response);
+      layers: []
     }
-  };
-  xhttp.responseType = 'json';
-  xhttp.open('GET', '/data/{{id}}.json{{&key_query}}', true);
-  xhttp.send();
-
-  var propertyList = document.getElementById('propertyList');
-  map.on('mousemove', function(e) {
-    propertyList.innerHTML = '';
-    var width = 3, height = 3;
-    var features = map.queryRenderedFeatures([
-                     [e.point.x - width / 2, e.point.y - height / 2],
-                     [e.point.x + width / 2, e.point.y + height / 2]
-                   ]);
-    if (features) {
-      var html = '';
-      features.forEach(function(feature) {
-        html += JSON.stringify(feature.properties, null, 2) + '\n';
+  });
+  map.addControl(new mapboxgl.NavigationControl());
+  var inspect = new MapboxInspect({
+    showInspectMap: true,
+    showInspectButton: false
+  });
+  map.addControl(inspect);
+  map.on('styledata', function() {
+    var layerList = document.getElementById('layerList');
+    layerList.innerHTML = '';
+    Object.keys(inspect.sources).forEach(function(sourceId) {
+      var layerIds = inspect.sources[sourceId];
+      layerIds.forEach(function(layerId) {
+        var item = document.createElement('div');
+        item.innerHTML = '<div style="' +
+          'background:' + inspect.assignLayerColor(layerId) + ';' +
+        '"></div> ' + layerId;
+        layerList.appendChild(item);
       });
-      propertyList.innerHTML = html;
-    }
+    })
   });
   </script>
   {{/is_vector}}

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>
@@ -85,10 +89,10 @@
         </div>
         <div class="viewers">
           {{#is_vector}}
-          <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">X-Ray view</a>
+          <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Inspect</a>
           {{/is_vector}}
           {{^is_vector}}
-          <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">Raster view</a>
+          <a class="btn" href="/data/{{@key}}/{{&../key_query}}{{viewer_hash}}">View</a>
           {{/is_vector}}
         </div>
       </div>

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

@@ -26,11 +26,13 @@ delete packageJson.dependencies['mapbox-gl-native'];
 delete packageJson.dependencies['node-pngquant-native'];
 delete packageJson.dependencies['sharp'];
 
+delete packageJson.optionalDependencies;
 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 */
 

run.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 cd /data
-xvfb-run -a -e /dev/stdout --server-args="-screen 0 1024x768x24" node /usr/src/app/ -p 80
+xvfb-run -a -e /dev/stdout --server-args="-screen 0 1024x768x24" node /usr/src/app/ -p 80 "$@"

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,59 @@ var startWithMBTiles = function(mbtilesFile) {
       };
 
       if (info.format == 'pbf' &&
-          info.name.toLowerCase().indexOf('osm2vectortiles') > -1) {
-        config['data']['osm2vectortiles'] = {
+          info.name.toLowerCase().indexOf('openmaptiles') > -1) {
+        var omtV = (info.version || '').split('.');
+
+        config['data']['v' + omtV[0]] = {
           "mbtiles": path.basename(mbtilesFile)
         };
 
+
         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 +176,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);
@@ -31,8 +41,8 @@ module.exports = function(options, repo, params, id) {
       Object.assign(tileJSON, info);
 
       tileJSON['tilejson'] = '2.0.0';
-      tileJSON['basename'] = id;
-      tileJSON['filesize'] = mbtilesFileStats['size'];
+      delete tileJSON['filesize'];
+      delete tileJSON['mtime'];
       delete tileJSON['scheme'];
 
       Object.assign(tileJSON, params.tilejson || {});
@@ -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,31 @@ module.exports = function(options, allowedFonts) {
 
   var fontPath = options.paths.fonts;
 
-  app.get('/:fontstack/:range([\\d]+-[\\d]+).pbf',
+  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() &&
+              fs.existsSync(path.join(fontPath, file, '0-255.pbf'))) {
+            existingFonts[path.basename(file)] = true;
+          }
+        }
+      });
+    });
+  });
+
+  app.get('/fonts/: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(options.serveAllFonts ? null : 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');
@@ -29,5 +48,12 @@ module.exports = function(options, allowedFonts) {
     });
   });
 
+  app.get('/fontstacks.json', function(req, res, next) {
+    res.header('Content-type', 'application/json');
+    return res.send(
+      Object.keys(options.serveAllFonts ? existingFonts : allowedFonts).sort()
+    );
+  });
+
   return app;
 };

src/serve_rendered.js

@@ -15,7 +15,7 @@ var Canvas = require('canvas'),
     clone = require('clone'),
     Color = require('color'),
     express = require('express'),
-    mercator = new (require('sphericalmercator'))(),
+    mercator = new (require('@mapbox/sphericalmercator'))(),
     mbgl = require('mapbox-gl-native'),
     mbtiles = require('mbtiles'),
     pngquant = require('node-pngquant-native'),
@@ -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,15 +157,24 @@ 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',
     'name': styleJSON.name,
     'attribution': '',
-    'basename': id,
     'minzoom': 0,
     'maxzoom': 20,
     'bounds': [-180, -85.0511, 180, 85.0511],
@@ -169,7 +191,7 @@ module.exports = function(options, repo, params, id, dataResolver) {
     var source = styleJSON.sources[name];
     var url = source.url;
 
-    if (url.lastIndexOf('mbtiles:', 0) === 0) {
+    if (url && url.lastIndexOf('mbtiles:', 0) === 0) {
       // found mbtiles source, replace with info from local file
       delete source.url;
 
@@ -194,10 +216,12 @@ 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;
-            source.basename = name;
             source.tiles = [
               // meta url which will be detected when requested
               'mbtiles://' + name + '/{z}/{x}/{y}.' + (info.format || 'pbf')
@@ -206,16 +230,18 @@ module.exports = function(options, repo, params, id, dataResolver) {
             if (source.format == 'pbf') {
               map.sources[name].emptyTile = new Buffer(0);
             } else {
-              var color = new Color(source.color || '#fff');
+              var color = new Color(source.color || 'rgba(255,255,255,0)');
               var format = source.format;
               if (format == 'jpg') {
                 format = 'jpeg';
               }
-              sharp(new Buffer(color.rgbArray()), {
+              var array = color.array();
+              var channels = array.length == 4 && format != 'jpeg' ? 4 : 3;
+              sharp(new Buffer(array), {
                 raw: {
                   width: 1,
                   height: 1,
-                  channels: 3
+                  channels: channels
                 }
               }).toFormat(format).toBuffer(function(err, buffer, info) {
                 map.sources[name].emptyTile = buffer;
@@ -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

@@ -16,7 +16,7 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
   Object.keys(styleJSON.sources).forEach(function(name) {
     var source = styleJSON.sources[name];
     var url = source.url;
-    if (url.lastIndexOf('mbtiles:', 0) === 0) {
+    if (url && url.lastIndexOf('mbtiles:', 0) === 0) {
       var mbtilesFile = url.substring('mbtiles://'.length);
       var fromData = mbtilesFile[0] == '{' &&
                      mbtilesFile[mbtilesFile.length - 1] == '}';
@@ -29,33 +29,47 @@ module.exports = function(options, repo, params, id, reportTiles, reportFont) {
     }
   });
 
-  var findFontReferences = function(obj) {
-    Object.keys(obj).forEach(function(key) {
-      var value = obj[key];
-      if (key == 'text-font') {
-        if (value && value.length > 0) {
-          value.forEach(reportFont);
-        }
-      } else if (value && typeof value == 'object') {
-        findFontReferences(value);
+  styleJSON.layers.forEach(function(obj) {
+    if (obj['type'] == 'symbol') {
+      var fonts = (obj['layout'] || {})['text-font'];
+      if (fonts && fonts.length) {
+        fonts.forEach(reportFont);
+      } else {
+        reportFont('Open Sans Regular');
+        reportFont('Arial Unicode MS Regular');
       }
-    });
-  };
-  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 +81,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

@@ -12,7 +12,7 @@ var base64url = require('base64url'),
     cors = require('cors'),
     express = require('express'),
     handlebars = require('handlebars'),
-    mercator = new (require('sphericalmercator'))(),
+    mercator = new (require('@mapbox/sphericalmercator'))(),
     morgan = require('morgan');
 
 var packageJson = require('../package'),
@@ -36,10 +36,7 @@ module.exports = function(opts, callback) {
         styles: {},
         rendered: {},
         data: {},
-        fonts: { // default fonts, always expose these (if they exist)
-          'Open Sans Regular': true,
-          'Arial Unicode MS Regular': true
-        }
+        fonts: {}
       };
 
   app.enable('trust proxy');
@@ -141,10 +138,7 @@ module.exports = function(opts, callback) {
     }
   });
 
-  if (Object.keys(serving.styles).length > 0) {
-    // serve fonts only if serving some styles
-    app.use('/fonts/', serve_font(options, serving.fonts));
-  }
+  app.use('/', serve_font(options, serving.fonts));
 
   Object.keys(data).forEach(function(id) {
     var item = data[id];
@@ -153,7 +147,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) {
@@ -175,8 +169,13 @@ module.exports = function(opts, callback) {
   var addTileJSONs = function(arr, req, type) {
     Object.keys(serving[type]).forEach(function(id) {
       var info = clone(serving[type][id]);
-      info.tiles = utils.getTileUrls(req, info.tiles,
-                                     type + '/' + id, info.format);
+      var path = '';
+      if (type == 'rendered') {
+        path = 'styles/' + id + '/rendered';
+      } else {
+        path = type + '/' + id;
+      }
+      info.tiles = utils.getTileUrls(req, info.tiles, path, info.format);
       arr.push(info);
     });
     return arr;
@@ -337,6 +336,10 @@ module.exports = function(opts, callback) {
     return callback();
   });
 
+  process.on('SIGINT', function() {
+      process.exit();
+  });
+
   setTimeout(callback, 1000);
   return {
     app: app,

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

@@ -18,7 +18,7 @@ var testTileJSONArray = function(url) {
   });
 };
 
-var testTileJSON = function(url, basename) {
+var testTileJSON = function(url) {
   describe(url + ' is TileJSON', function() {
     it('is json', function(done) {
       supertest(app)
@@ -27,11 +27,10 @@ var testTileJSON = function(url, basename) {
         .expect('Content-Type', /application\/json/, done);
     });
 
-    it('has valid basename and tiles', function(done) {
+    it('has valid tiles', function(done) {
       supertest(app)
         .get(url)
         .expect(function(res) {
-          res.body.basename.should.equal(basename);
           res.body.tiles.length.should.be.greaterThan(0);
         }).end(done);
     });
@@ -64,6 +63,6 @@ describe('Metadata', function() {
     });
   });
 
-  testTileJSON('/styles/bright/rendered.json', 'bright');
-  testTileJSON('/data/zurich-vector.json', 'zurich-vector');
+  testTileJSON('/styles/test-style/rendered.json');
+  testTileJSON('/data/openmaptiles.json');
 });

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() {