As presented in a [talk at FOSS4G][1] Mapbox Studio allows to create Mapbox vector tiles and export them as a `.mbtiles` file.

The [mapbox-gl.js][2] library can be used to dynamically style and render Mapbox vector tiles on client (browser) side.

The missing part: How can I self-host Mapbox vector tiles (`.mbtiles`) so that I can consume them with mapbox-gl.js?

Note: I know that Mapbox Studio can upload the vector tiles to the Mapbox server and let it host the tiles. But that's no option for me, I want to host the vector tiles on my own server.

**Edit3: The TileStream approach below turned out to be a dead end. See my answer for a working solution with Tilelive.**

**Edit:**

I tried [TileStream][3] which can serve image tiles out of `.mbtiles` files:

My webpage uses mapbox-gl v0.4.0:

    <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>

and it creates a mapboxgl.Map in a JavaScript script:

      var map = new mapboxgl.Map({
        container: 'map',
        center: [46.8104, 8.2452],
        zoom: 9,
        style: 'c.json'
      });

The `c.json` style file configures the vector tile source:

    {
      "version": 6,
      "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
      "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
      "constants": {
        "@land": "#808080",
        "@earth": "#805040",
        "@water": "#a0c8f0",
        "@road": "#000000"
      },
      "sources": {
        "osm_roads": {
          "type": "vector",
          "url": "tile.json"
        }
      },
      "layers": [{
        "id": "background",
        "type": "background",
        "paint": {
          "background-color": "@land"
        }
      }, {
        "id": "roads",
        "type": "line",
        "source": "osm_roads",
        "source-layer": "roads",
        "paint": {
          "line-color": "@road"
        }
      }]
    }

... with the following TileJSON specification in `tile.json`:

    {
      "tilejson": "2.1.0",
      "tiles": [
        "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
      ],
      "minzoom": 0,
      "maxzoom": 12
    }

... which points to my TileStream server running at `localhost:8888`.
TileStream has been started with:

    node index.js start --tiles="..\tiles"

... where the `..\tiles` folder contains my `osm_roads.mbtiles` file.

With this setup, I can open my webpage but only see the background layer. In the browser network trace I can see that tiles are indeed loaded when I zoom in, but the browser JavaScript error console contains several errors of the form

    Error: Invalid UTF-8 codepoint: 160      in mapbox-gl.js:7

Since vector tiles are not `.png` images but rather ProtoBuf files, the tiles URL `http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbf` would actually make more sense, but that doesn't work.

Any ideas?

**Edit 2: Added link to TileStream**

  [1]: http://vimeo.com/106228141
  [2]: https://www.mapbox.com/mapbox-gl/
  [3]: https://github.com/mapbox/tilestream