Mapbox WMTS support in OpenLayers

Question

I have created a Mapbox style using Mapbox Studio and set it to be used over WMTS. The URL of the style is:

https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token

where styleId, username and token are variable fields.

When I try to create a WMTS layer in OpenLayers using the url above, the tileGrid is created successfully using createFromCapabilitiesMatrixSet but I get a response error Invalid query param layer from Mapbox.

After some investigation, I noticed that:

The response error persists for all query parameters that are appended from OpenLayers when creating the tile load function. It looks like that Mapbox does not recognise them properly.
OpenLayers website and Mapbox also give examples on using XYZ layers for integration between them.

So, is this some kind of unsupported feature of OpenLayers or do I need to configure anything additional when creating the WMTS OpenLayers?

Mike Mike · Accepted Answer · 2018-12-01T00:34:49

It's much simpler to set up as a standard OpenLayers XYZ layer using

  url: 'https://api.mapbox.com/styles/v1/username/styleId/tiles/{z}/{x}/{y}?access_token=token'

as in the examples.

Mapbox provides WMTS support for compatibility with some other systems. It can also be used in OpenLayers, the setup would be

  var parser = new ol.format.WMTSCapabilities();
  fetch('https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token').then(function(response) {
      return response.text();
  }).then(function(text) {

      var layer = new ol.layer.Tile({
          source: new ol.source.WMTS(
              ol.source.WMTS.optionsFromCapabilities(parser.read(text), {
                  layer: 'styleId',
                  matrixSet: 'EPSG:3857'
              })
          )
      });

      ....
      ....
      ....
      ....

  });

Both methods will ultimately load the same tile urls, so there's no advantage in using WMTS where XYZ is supported.

Mapbox WMTS support in OpenLayers

1 Answers