How to set an extent to a VectorTile layer in OpenLayers 4.2.0?

Question

I'm currently adding a serie of Mapbox VectorTile layers in Open Layers 4.2.0. However a problem occurs; whenever I zoom out to far, my whole map turns grey and my network tab in the console will be filled with 404's explaining that there are tile's which aren't found at the Mapbox side. This ofcourse makes sense, because not all tile's loaded are present for Mapbox.

To elaborate with a little bit of code:

This is where a Mapbox layer is loaded:

var source = new ol.source.VectorTile({
    format: new ol.format.MVT(),
    tilePixelRatio: 16,
    url: 'https://{a-d}.tiles.mapbox.com/v4/' + layer.id + '/{z}/{x}/{y}.vector.pbf?access_token=' + this.mapboxGlToken
});

return new ol.layer.VectorTile({
    source:        source,
    minResolution: layer.minres,
    maxResolution: layer.maxres,
    style:         this.styles.normal,
    filter:        layer.filter,
    name:          layer.name
});

This will actually show the map (+ the vector tile, which are the red borders of the provinces of the Netherlands):

Hooray! However, if I look in my Firefox network tab:

There are lot's of 404 errors from Mapbox. At first, I thought I could ignore these, but they cause my whole application to stop rendering any further tile's, which is pretty annoying. I assume this happens because Open Layers tries to load tile's which are outside of the boundaries of the Mapbox layer.

I've googled a lot and tried a lot. Here's what I've tried:

The documentation about VectorTile in Open layers 4.2.0 specifies an option called TileGrid ( http://openlayers.org/en/latest/apidoc/ol.source.VectorTile.html ). I've tried many spin-offs of this feature but this doesn't solve my problem. It either doesn't render anything anymore, freeze my browser of it holds on to the original problem. I also have no idea how this works, but stating that it had an extent option, I thought I might give it a whirl.

So how do I set an extent for a layer? How do I tell the layer to only load the tiles from {x1,y1} to {x2,y2} ? I honestly don't know and any help would be appreciated.

Answer 1

It turned out that I was confusing ol.source.VectorTile and ol.layer.VectorTile (source or layer). The ol.layer.VectorTile 'class' did have an extent option and that is the correct way to set it.

There are some quirks with setting the extent. Every mapbox tileset has an extent of it's own (or bounds as it is called):

The bounds need to be converted from lat1, lng1, lat2, lng2 to pixels (correct me if I'm wrong here). The way to do that is to run from the webconsole:

ol.proj.fromLonLat([lat1, lng1]).concat(ol.proj.fromLonLat([lat2, lng2]))

This will give you the correct extent.

This extent needs to be implemented as such:

new ol.layer.VectorTile({
    source:        source,
    extent:        [convertedlat1, convertedLng1, convertedLat2, convertedLng2], // <---
    minResolution: layer.minres,
    maxResolution: layer.maxres,
    style:         this.styles.normal,
    filter:        layer.filter,
    name:          layer.name
});