As presented in a talk at FOSS4G Mapbox Studio allows to create Mapbox vector tiles and export them as a .mbtiles file.
The mapbox-gl.js 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 which can serve image tiles out of .mbtiles files:
My webpage uses mapbox-gl v0.4.0:
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:7Since 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
أكثر...
The mapbox-gl.js 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 which can serve image tiles out of .mbtiles files:
My webpage uses mapbox-gl v0.4.0:
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:7Since 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
أكثر...