[GIS] Generating and hosting vector tiles from GeoJSON – no errors, but no data

mapboxtile-servervector-tiles

I wish to construct a pipleline that takes GeoJSON through to self-hosted MapBox vector tiles specification.

My plan is:

Tippecanoe converts geojson to .mbt
mbutil converts mbt to tiles
tileserver-php exposes endpoint for tiles.

This seems to be possible, given the docs. I have put it all together. No errors are thrown by any process and tileserver is showing that my tileset exists. However, there is an empty preview of the data and HTTP GET requests to the Z/X/Y endpoint return an HTML page (Welcome to Maps hosted with TileServer-php v2.0). (Perhaps I need to curl with specific headers in order to test if it's working?)

My GeoJSON is an array of linestrings & is structured like this:

{
  "type": "FeatureCollection",
  "bbox": [-119.437,33.298,-116.724,34.583],
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-117.9756412,33.803147],
          [-117.9775983,33.8031329]
        ]
      },
      "properties": {
        ...
      }
    }, ...

Using tippecanoe – appears to be OK:

$ tippecanoe -o out.mbt in.json
For layer 0, using name "my_layer"
99641 features, 2896256 bytes of geometry, 2482729 bytes of metadata, 1532578 bytes of string pool
tile 5/5/12 size is 674507 with detail 12, >500000
tile 6/10/25 size is 537511 with detail 12, >500000
tile 6/11/25 size is 608121 with detail 12, >500000
tile 7/21/51 size is 665802 with detail 12, >500000
tile 7/22/51 size is 685644 with detail 12, >500000
tile 7/22/51 size is 538985 with detail 11, >500000
tile 8/44/102 size is 754537 with detail 12, >500000
tile 8/43/102 size is 750288 with detail 12, >500000
tile 8/44/102 size is 652762 with detail 11, >500000
tile 8/43/102 size is 633573 with detail 11, >500000
tile 8/44/102 size is 513572 with detail 10, >500000
tile 9/88/204 size is 518065 with detail 12, >500000
tile 9/87/204 size is 765483 with detail 12, >500000
tile 9/87/204 size is 697630 with detail 11, >500000
tile 9/87/204 size is 583396 with detail 10, >500000
  100.2%  14/2773/6531

Tileserver docs say it works better if I run mbutil over the mbt file first. I do this with the command mb-util out.mbt tiles. There's a lot of output in the format similar to:

flipping
INFO:mbutil.util:3774 / 3774 tiles exported

Afterwards, the directory tiles has a 3-levels deep nested structure with lots of files ending with png. Despite the extension, the OS cannot render these as raster images. But given what they're intended to do I assume they're not PNGs as I'm used to and that this is expected.

Finally, I push the tiles along with the Tileserver code onto a PHP-enabled host in ElasticBeanstalk. The app runs and presents me with my tileset, rendered as a completely empty (black) MapboxGL view.

Here, let me show you.

So it seems nothing threw any errors, but I don't have any data. How can I find where this all went wrong?

Best Answer

Vector tiles are served by tileserver-php correctly.

Here is an example: http://osm2vectortiles.tileserver.com/

Be sure you:

download the tileserver.php project as zip from github: https://github.com/klokantech/tileserver-php/archive/master.zip
unpack on your Apache+PHP hosting the complete content of the archive (tileserver.php as well as the .htaccess file)
upload to your hosting the vector tiles as a single MBTiles file. The file must have an extension .mbtiles and should be located in the same folder as the tileserver.php and .htaccess files are. It should have correct metadata table. If you generate it with MapBox Studio Classic it will have it. I expect tippecanoe utility will produce it in a correct format as well.

This is sufficient. You should get the x-ray viewer and nice URLs, including TileJSON usable in MapBox Studio Classic, MapBox GL JS, MapBox SDK for Android and iOS, OpenLayers, Leaflet with MVT extension, or any other compatible software.

This installation is step by step described at: http://www.maptiler.com/how-to/tileserver-php/ - vector tiles are hosted the same way as raster tiles generated by http://www.maptiler.com/.

If you are familiar with Docker / Kitematic - there is a ready to use image. Check Docker CLI tutorial: http://osm2vectortiles.org/docs/serve-vector-tiles/. The same applies for Kitematic graphical user interface for Docker.

I guess, the mistakes you may make in your workflow could be: using mbutil, naming the file with extension .mvt, not installing .htaccess on your web hosting.

Related Solutions

Self-Hosting Mapbox Tiles – Guide to Self-Hosting Mapbox Vector Tiles

As pointed out by @Greg, instead of TileStream (my first attempt) you should use Tilelive to host your own vector tiles.

Tilelive isn't a server itself but a backend framework that deals with tiles in different formats from different sources. But it's based on Node.js so you can turn it into a server in a pretty straight-forward way. To read tiles from a .mbtiles source as exported by Mapbox Studio, you need the node-mbtiles tilelive module.

Side note: Current Mapbox Studio has a bug under Windows and OS X that prevents an exported .mbtiles file to show up at your chosen destination. Workaround: Just grab the latest export-xxxxxxxx.mbtiles file in ~/.mapbox-studio/cache.

I found two server implementations (ten20 tile server by alexbirkett and TileServer by hanchao) who both use Express.js as a web app server.

Here is my minimalistic approach which is loosely based on these implementations:

Install Node.js
Grab the node packages with npm install @mapbox/tilelive @mapbox/mbtiles express

Implement the server in the file server.js:

 var express = require('express');
 var http = require('http');
 var app = express();
 var tilelive = require('tilelive');
 require('mbtiles').registerProtocols(tilelive);

 //Depending on the OS the path might need to be 'mbtiles:///' on OS X and linux
 tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {

     if (err) {
         throw err;
     }
     app.set('port', 7777);

     app.use(function(req, res, next) {
         res.header("Access-Control-Allow-Origin", "*");
         res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
         next();
     });

     app.get(/^\/v2\/tiles\/(\d+)\/(\d+)\/(\d+).pbf$/, function(req, res){

         var z = req.params[0];
         var x = req.params[1];
         var y = req.params[2];

         console.log('get tile %d, %d, %d', z, x, y);

         source.getTile(z, x, y, function(err, tile, headers) {
             if (err) {
                 res.status(404)
                 res.send(err.message);
                 console.log(err.message);
             } else {
               res.set(headers);
               res.send(tile);
             }
         });
     });

     http.createServer(app).listen(app.get('port'), function() {
         console.log('Express server listening on port ' + app.get('port'));
     });
 });

Note: The Access-Control-Allow-... headers enable cross-origin resource sharing (CORS) so webpages served from a different server may access the tiles.

Run it with node server.js

Set up the webpage using Mapbox GL JS in minimal.html:

 <!DOCTYPE html >
 <html>
   <head>
     <meta charset='UTF-8'/>
     <title>Mapbox GL JS rendering my own tiles</title>
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
     <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
     <style>
       body { margin:0; padding:0 }
       #map { position:absolute; top:0; bottom:50px; width:100%; }
     </style>
   </head>
   <body>
     <div id='map'>
     </div>
     <script>
       var map = new mapboxgl.Map({
         container: 'map',
         center: [46.8, 8.5],
         zoom: 7,
         style: 'minimal.json'
       });
     </script>
   </body>
 </html>

Indicate the location of the tile source and style the layers with the following minimal.json:

 {
   "version": 6,
   "constants": {
     "@background": "#808080",
     "@road": "#000000"
   },
   "sources": {
     "osm_roads": {
       "type": "vector",
       "tiles": [
         "http://localhost:7777/v2/tiles/{z}/{x}/{y}.pbf"
       ],
       "minzoom": 0,
       "maxzoom": 12
     }
   },
   "layers": [{
     "id": "background",
     "type": "background",
     "paint": {
       "background-color": "@background"
     }
   }, {
     "id": "roads",
     "type": "line",
     "source": "osm_roads",
     "source-layer": "roads",
     "paint": {
       "line-color": "@road"
     }
   }]
 }

Serve the webpage and rejoice.

[GIS] Highlighting polygons of Mapbox tileset on hover

To highlight all parts of a feature that is spread across tiles, Mapbox needs a way to associate features across tiles. Usually this is done via the id field in the vector tiles. When uploading a shapefile (or other data source) to Mapbox Studio, this is automatically done for you. If you're generating vector tiles yourself, e.g. with Tippecanoe, specify --generate-ids to ensure that features that span multiple tiles get assigned the same ID.

Once you've uploaded your data to Mapbox Studio, you can build upon the tutorial you linked and change the source to a vector tile source:

map.addSource("states", {
    "type": "vector",
    "url": "mapbox://kkaefer.1zk6ono0"
});

Then, add the source-layer property to the addLayer calls, and add the same name as the sourceLayer property to setFeatureState.

For a more thorough tutorial, have a look at https://blog.mapbox.com/going-live-with-electoral-maps-a-guide-to-feature-state-b520e91a22d

Best Answer

Related Solutions

Self-Hosting Mapbox Tiles – Guide to Self-Hosting Mapbox Vector Tiles

[GIS] Highlighting polygons of Mapbox tileset on hover

Related Question