How to use OpenLayers vector tiles?

[MedaiP90]

We have a self-hosted tile server that provides OpenLayers vector tiles. We are trying to display a map using those tiles and the following component from your library:

<vl-layer-vector-tile>
  <vl-source-vector-tile v-bind:url="mapStyle" />
</vl-layer-vector-tile>

...

mapStyle: "https://api.maptiler.com/maps/basic-4326/style.json?key=SOME_KEY",

This result in an error:

Uncaught Error: Unimplemented type: 3
    at Pbf.skip (webpack-internal:///./node_modules/ol/node_modules/pbf/index.js:191)
    at Pbf.readFields (webpack-internal:///./node_modules/ol/node_modules/pbf/index.js:41)
    at MVT.readFeatures (webpack-internal:///./node_modules/ol/format/MVT.js:268)
    at VectorTile.eval (webpack-internal:///./node_modules/ol/featureloader.js:91)

Can please someone help us understanding how to configure the vl-layer-vector-tile and vl-source-vector-tile components? Since the official documentation has no information about.

[ghettovoice]

Hello @MedaiP90 ,
to render openlayers map from the mapbox json style you also need to ol-mapbox-style. Here is a description how to show maptiler maps with pure openlayers https://documentation.maptiler.com/hc/en-us/articles/4405445398929-Build-a-map-with-the-OpenLayers-Library

And here is a demo how to run all this stuff with vuelayers https://codesandbox.io/s/vuelayers-mapbox-styles-3zyl1?file=/src/App.vue

[MedaiP90]

Hello @MedaiP90 , to render openlayers map from the mapbox json style you also need to ol-mapbox-style. Here is a description how to show maptiler maps with pure openlayers https://documentation.maptiler.com/hc/en-us/articles/4405445398929-Build-a-map-with-the-OpenLayers-Library

And here is a demo how to run all this stuff with vuelayers https://codesandbox.io/s/vuelayers-mapbox-styles-3zyl1?file=/src/App.vue

Thanks for the reply. The solution works only with the satellite map (because its tiles are in .jpeg format and not .pbs -- vector tiles). Using another map style (like Basic (EPSG:4326)) results in an empty map.

[ghettovoice]

Seems that 4326 vector tilesets don't work correctly with openlayers v5.
There is a fork based on vuelayers v0.12 and openlayers v6.x https://codesandbox.io/s/vuelayers-mapbox-styles-forked-qqedv?file=/src/App.vue

[MedaiP90]

@ghettovoice it's working now, thanks a lot. Keep up the good work