I am struggling to understand how to render vector tiles in Openlayers 3. this is probably due to me not understanding Z/X/Y tiles.

I have created an mbtile source and am serving it using tileserver-gl-light from a geojson data source using the EPSG:4326 projection.

tileserver-gl-light tiles.mbtiles

Works fine when I view them at (tileserver-gl-client):-


And I get a tile downloaded with:-


How can I now display this layer in openlayers? I have looked at the example here but there is no mention of projection. I tried the following code

var map = new ol.Map({
    layers: [
      new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
            url: 'http://SERVER:8080/data/tiles/{z}/{x}/{y}.pbf'
    target: 'map',
    view: new ol.View({
      center: [125,83],
      zoom: 8

But have no idea how to centre it to the area I want which is -4.2376,52.0528 Zoom level 8 in EPSG:4326

When I zoom or pan I get errors like:-

GET http://SERVER:8080/data/sn_all/8/128/123.pbf 404 (Not Found)
GET 404 (Not Found)

Which makes me think my projection is not right?


A complete example of using vector tiles hosted by TileServerGL (from MBTiles) in OpenLayers viewer is prepared here:


Technically, the default projection of the tiles inside the MBTiles is Mercator EPSG:3857.

For demo of different viewers of OpenMapTiles see https://openmaptiles.org/viewers/

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.