Loading mapbox GL JS basemap style in Openlayers 3

Question

I'm trying to add a customized mapbox GL JS basemap (which has been styled by a coworker) inside existing Openlayers 3 code I have written, though am having trouble finding a solution to having both of these work together. So far I have been adding layers like in the example bellow without a problem:

      new ol.layer.Tile({
        title: 'Satellite',
        type: 'base',
        visible: false,
        source: new ol.source.XYZ({ //Mapbox layer with API Key
          url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}?access_token=API-KEY-HERE'
        })
      })

However when I want to add a Mapbox GL JS customized style like this, it does not work.

new ol.layer.Tile({
            title: 'CustomStyleMapboxGL',
            type: 'base',
            source: new ol.source.XYZ({
              url: 'https://api.mapbox.com/styles/v1/itatters/cjo09902ya4z92speha95h57d.html?fresh=true&title=true&access_token=API-KEY-HERE#16.0/45.505643/-73.576557/305'
            })
          })
})

If there are any ways of getting getting a Mapbox GL JS styled layer to work with Openlayers 3 (either in the way I've attempted in ex.2 or otherwise) that would be greatly appreciated! I have tried using the Mapbox API for all the code though ran into complications....

Answer 1

OpenLayers cannot parse Mapbox Style objects out of the box, but the ol-mapbox-style library adds support for it. Using it is quite straightforward:

import createMap from 'ol-mapbox-style';

createMap('map', 'https://api.mapbox.com/styles/v1/itatters/cjo09902ya4z92speha95h57d.html?fresh=true&title=true&access_token=API-KEY-HERE#16.0/45.505643/-73.576557/305')
.then(function(map) {
  // map is an ol/Map instance with the layers from the Mapbox style object
});