Using Tessera on Mac OS X with Chrome and Mapbox Studio

Serve up those projects created with Mapbox-Studio to your browser and see how they look using leaflet.js. If you get adventurous you could even extend it to integrate other data sources to layer on top of your map. But first things first.

To get anything out of this you should have tessera installed globally.

npm install -g tessera

Once that's installed you'll need to install the requisite tilelive modules for your serving task at hand.

For example to just proxy tiles from a Stamen Server:

You’ll need tilelive-http module go to Terminal and enter

npm install -g tilelive-http

tessera http://tile.stamen.com/watercolor/{z}/{x}/{y}.png

Go to http://0.0.0.0:8080/#3/41.18/-81.04 in your browser and you should get an Leaflet map with Stamen tiles all up in there.

Now let’s check out what a project created in Mapbox Studio looks like using leaflet in a web browser. It’s possible to use local sources or Mapbox provided vector data.

Navigate to the directory containing the tm2 style you desire. For the example here run the commands from the folder with "vern.tm2" in it.

npm install -g tilelive-tmstyle
tessera tmstyle://./vern.tm2

Upon refreshing http://0.0.0.0:8080/#3/41.18/-81.04 there should be a leaflet map with the referenced Mapbox-Studio designed tiles.

And to see the tileJSON about what’s being served up go to http://0.0.0.0:8080/index.json in a browser (or cURL it or whatever). The JSON object served up has a bunch of metadata about our tiles like the format, bounds, scale, and the address to request tiles from.

The tileJSON is also what you need to give Mapbox-Studio if using a source served up by non Mapbox sources like Tessera. If you’d like to serve up a source make sure you have tilelive-tmsource installed and reference a .tm2source file. Like here Tessera will serve up the file pgtri.tm2source made by creating a source in Mapbox-Studio and saving it locally.

tessera tmsource://./pgtri.tm2source

So it’s probably best and easiest to just use that local source but hey, maybe you want to see how it performs before you try deploying it to servers that cost money.

It’s important to remember that the tm2source contains pointers to the data and doesn’t actually make copies of the data. So if a postgres table is referenced and that table gets dropped, or a referenced .shp file gets moved or deleted the given source will no longer work.

Once it’s serving you simply insert the tileJSON url as the reference source. Which by default is http://0.0.0.0:8080/index.json as above.

As of now it’s not possible to composite tileJSON sources or a number of locally hosted data sources not in the same .tm2source folder. But I haven’t hit a limit as to how much you can reference with a local source so you can always just keep adding references there.

Please share any examples of how and why to use Tessera with the world because it's hard to find resources for learning how to implement your own tileserver anywhere.