Mapbox Static Images API – Achieving Perfect Edges for Tile Positioning in Mapbox Static Images API

mapboxmapbox-studio

I'm working on a Python project that builds large hi-res images using tiles retrieved from the Mapbox static images API using customized styles designed in Mapbox studio.
https://docs.mapbox.com/api/maps/static-images/
(updated with correct link)

At the moment I have a proof of concept that works well at z15.5 but it won't work at other zoom levels without a good bit of work. I'm thinking there's a better/proper/elegant way to handle tile positioning.

Any suggestions on how to calculate the lat/lon for a second tile that aligns seamlessly with the first one? Longitude is easy enough, since the difference in distance between tiles stays the same every time. It's latitude that has the fun factor, since it changes for each tile.

I've tried using QGIS to export a large image but it didn't perform very well and pummeled the API usage.

Best Answer

After using Mercantile I got a better understanding of navigating the map grid. In the end I'm not using it in my project but it was a good hands on learning tool.

Basically, the step to the next tile needs to be scaled. This is because the static images API can return larger images that cover larger areas than the usual 512px grid tile. This turns out to be very simple. Instead of just going to the next tile over on the grid you need to go to the position that is requested_image_size / 512 away. So, a 1024px static images response will join seamlessly with one that is 2 grid tiles away, or 2.5 for a 1280px image.

I'm using this to generate images that are used for print so I'm not aiming for a fast web app. The standard grid tiles are perfect for interactive stuff. For my purposes this approach results in a faster final image.

Performance notes for a final image that's 10240px square:

64 requests for 1280px images: 79 seconds to complete
100 requests for 1024px images: 103 seconds to complete
400 requests for 512px images: 208 seconds to complete

This only works starting at z11 for 1024px images and z12 for 1280px. The grid needs enough tiles to accommodate larger sizes. Zoom levels below these thresholds will not join seamlessly.

Zoom levels below z11 need to be done with 512px tiles so I also have things setup to use the Static Tiles API for this scenario and maintain API usage cost efficiency at that tile size.

Related Solutions

QGIS – Using Mapbox Vector Tiles as a Basemap

Absolutely Matt. Using vectors as the datasource for maps is ideal for high resolution printed output and MapBox vector tiles work well to distribute large data like OSM efficiently. I think the problem in getting something like this working is purely on a software level - you need the capability to mosaic tiles together, apply styles to them, and then render seamlessly to avoid potential tile edge artifacts. You also need to take into account the output format - whether your print target format is PDF/SVG or high resolution PNG/JPEG will determine the optimal methods for seamless rendering.

Given that TileMill - through Mapnik's support for vector tiles - supports vector tiles already that might be the more feasible application to add this to. However, QGIS, being C++ and Python-based, could also use Mapnik directly - like in the Quantumnik plugin(https://github.com/springmeyer/quantumnik). QGIS's layout tools certainly provide more control for printed output than TileMill currently does.

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.

Best Answer

Related Solutions

QGIS – Using Mapbox Vector Tiles as a Basemap

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

Related Question