[GIS] Vector map – Multiple local sources with Mapbox-GL

mapbox-glopenstreetmaposm2vectortilesvector-tiles

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?

Best 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

Related Question