[GIS] Mapbox GL Js: what is the sourceID

javascriptmapboxmapbox-gl-jsmapbox-studio

The documentation for Map.querySourceFeatures says it takes a parameter for sourceID – the ID of the vector tile or GeoJSON source. In their example, they add a source manually:

map.addSource('counties', {
    "type": "vector",
    "url": "mapbox://mapbox.82pkq93d"
});

And so the sourceID is counties.

If I create a Mapbox style in Mapbox Studio and publish it with a url, say:

mapbox://styles/mycoolcompany/mycoolmap123

and pass that directly to the Map constructor like this:

this.map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mycoolcompany/mycoolmap123',
    center: [-123.12, 49.28],
    zoom: 5,
});

How can I get (or set?) the styleID programatically? I'm trying different combinations of things from Mapbox Studio but querySourceFeatures returns an empty array every time with no exceptions or indication of what it's missing.

More succinctly: how do I use querySourceFeatures on a home-made Mapbox Studio Style?

(mapbox-gl 0.36.0)

Best Answer

There isn't a public API to get all source IDs from a map, but

this.map.style.sourceCaches

will return an object wherein each key is a source ID and its value is a source cache (the class responsible for managing an individual source).

Note that Mapbox Studio automatically composites sources — so, if you've added a custom vector source, rather than having multiple vector sources you'll likely see just one (composite), and if you were to download the JSON stylesheet its URL would be something like

"url": "mapbox://mapbox.mapbox-streets-v7,mycoolcompany.randomsha"

so you'll probably be looking for a source called composite.

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] Get properties data from MapBox vector tile source

There's no specification for using vector tiles as a dataset. You'll probably need to add a dataset or source (such as GeoJSON) with the data you want as a layer.

Reference: https://www.mapbox.com/vector-tiles/specification/#not-included

Best Answer

Related Solutions

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

[GIS] Get properties data from MapBox vector tile source

Related Question