I am trying to process a vector tile source in OpenLayers using the VectorTile layer and source in OpenLayers 4.1. The backend is serving pbf (mvt-based) tiles from an mbtiles source. The tiles have many tens of thousands of features in some cases.

I am using the ol VectorTile layer and source, and the 'ol-mapbox-style' library to process the styles. OpenLayers bogs down with anything other than a very simple point style - like a simple circle fill color. Even adding a stroke slows it down, and complex data-defined styles will stall out and lock the browser (coloring based on feature attribute values).

Leaflet and mapbox-gl both process the same data without a problem.

Here is the code I am using to create the layer and apply the styling.

  var tilegrid = ol.tilegrid.createXYZ({tileSize: 512, maxZoom: 22});
  var vLayer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      format: new ol.format.MVT(),
      tileGrid: tilegrid,
      tilePixelRatio: 8,
      url: "https://mydomain.www/myFeatureLayer/{z}/{x}/{y}.pbf",
    opacity: .73,

  olms.applyStyle(vLayer, glStyle, 'sourceLayer').then(function() {

Does anyone have insight on processing/styling large numbers of features in OL4, using a mapbox tile source, and mapbox style definitions?

I will note - after writing this, I did remove the olms library, and made the styling a very simple OpenLayers style:

  var vectorStyle = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: circle

That lets the map move again even with all these features - almost as performant as a regular map, though a bit laggy - but it would be much better if I could leverage the mapbox native styling.

  • I am facing a similar problem. Did you find a better option? If so could you please post it as an answer? – wondim Sep 5 at 12:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.