3rd Party External PBF Vector Source (doc & example?)

[canadaka]

I am unable to get MVT/PBF vector tiles working from an external http:// source. I don't see any documentation or examples of this.

The sources docs page only mentions topoJSON and doens't actually give any info or example of using a 3rd party url: https://www.mapbox.com/mapbox-gl-style-spec/#sources

I created a very simple Style JSON file that includes:

"sources": {
    "trailforks": {
      "type": "vector",
      "url": "http://domain.com/{z}/{x}/{y}.pbf",
      "maxzoom": 15
    }
  },

Along with trying to specify a source in the JS

var test = new mapboxgl.Source({
        type: 'vector',
        url: 'http://domain.com/{z}/{x}/{y}.pbf'
    });
    map.addSource('test1', test);

Nothing loads and the Chrome console log has errors:
Line #5433
GET http://domain.com/%7Bz%7D/%7Bx%7D/%7By%7D.pbf net::ERR_NAME_NOT_RESOLVED
Line #2618
Uncaught #

[jfirebaugh]

GET http://domain.com/%7Bz%7D/%7Bx%7D/%7By%7D.pbf net::ERR_NAME_NOT_RESOLVED

net::ERR_NAME_NOT_RESOLVED indicates that DNS resolution failed for the requested domain. Is "domain.com" the actual domain in your style?

[canadaka]

no, the actual domain si not domain.com and it resolves, we have some test tiles on http://domain.com/vectiles2/{z}/{x}/{y}.pbf
But that URL in the Console error still contains the {z}/{x}/{y} should that have been converted to actual numbers in the request?
http://domain.com/vectiles2/9/97/192.pbf

[jfirebaugh]

Oh, I see the issue now. If you supply a "url" property in the source it must be a URL to TileJSON. If you want to supply a tile template URL, you need to use the TileJSON "tiles" array property:

    "trailforks": {
      "type": "vector",
      "tiles": ["http://domain.com/{z}/{x}/{y}.pbf"],
      "maxzoom": 15
    }

See https://www.mapbox.com/mapbox-gl-style-spec/#sources

[canadaka]

Thanks, that works! That defiantly was not clear from that doc/spec document.

My goal is to try and load pre-generated tiles from a local source (eventually on mobile), rather than http url.

Is it possible to load the tiles from a local source, the most simple being file:// I guess.
But ideally the tiles in some sort of container like a SQLite DB.

[timrobertson100]

Hi @canadaka - I hit the same issue as you on this.

The call to load the tiles is executing this method: https://github.com/mapbox/mapbox-gl-js/blob/master/js/util/browser/ajax.js#L23

You might want to explore overloading that function to do what you want there?

[MajuSadagopan]

I'm hosting pbf tiles generated using tippecanoe on S3 and I can't seem to get tiles to render. The tiles seem to be loading in the network panel but nothing renders. This tileset works perfectly with OpenLayers 4.

I sometimes get this error when panning around the map but nothing outside of that.
(VM3578 mapbox-gl.js:501)

map.addLayer({
        "id": "soils",
        "type": "fill",
        "source": {
            "type": "vector",
            "tiles": ["https://d2jyc3sz0j3f3j.cloudfront.net/soi151_vectortiles/{z}/{x}/{y}.pbf"],
        },
        "source-layer": "soi151_vectortiles",
        "paint": {
            "fill-color": "rgb(53, 175, 109)",
            "fill-outline-color": "rgb(53, 175, 109)"
        }
    });