openstreetmap - Vector map - Multiple local sources with Mapbox-GL

I'm building a web map using Mapbox-GL (renderer) and OSM2Vectortiles (vector map tiles).

• Since the OpenStreetMap's data are insufficient in my country, I've used QGIS and Satelite images to add some roads, POIs,... and converted to vector tiles (PBF files).


• It's quite difficult and time-consuming to merge my data with OSM, and then convert the whole complex things again.


• I know that Mapbox support multiple sources, but I only found examples where the sources coming from Mapbox. I'd like to serve the tiles without Mapbox's cloud services.

Is it possible to use multiple sources (OSM2Vectortiles + My rendered tiles) with Mapbox-GL-js?

Answer

You can easily combine multiple tiles in your JSON GL style.

Just define more identifiers in the sources section and point them to different tiles (http or mbtiles).

"sources": {

  "osm2vectortiles": {
    "type": "vector",
    "url": "https://osm2vectortiles.tileserver.com/v2.json"
  },
  "naturalearth": {
    "type": "vector",
    "maxzoom": 7,
    "tiles": [
       "http://naturalearthtiles.org/tiles/natural_earth.vector/{z}/{x}/{y}.pbf"
    ]

  }
},

This is supported in all MapBox SDKs (JavaScript / Android / iOS / ..)

Our TileServer-GL will also rasterize such styles into raster tiles and give you sample viewers out of the box for such JSON style. See: http://blog.klokantech.com/2016/08/tileserver-gl-maps-with-gl-json-styles.html