I have been setting up my own MVT-service, which takes some GeoJSON input and convert it to MVT tiles. Then I've used Open Layers 4.6.5 to render the tiles.

The testdata I have been playing with is for the Norwegian Continental Shelf.

It all works great in EPSG:3857 projection, my tiles render nicely where they are supposed to be (I'm at zoom-level 2 for overview purposes). See the image below: EPSG:3857

However, I then try to render the same layer in WGS84 projection, and I get this display: EPSG:4326

This leaves two questions:

  1. The first thing is the location, ending up in Africa could mean that I have an axis problem. How do I change that?

  2. Secondly, despite of the location being wrong, I clearly see that the features still render in EPGS:3857 projection. So they are not reprojected according to the projection of the view object.

These are the relevant code snippets:

    //Define view projection to WGS 84
var viewProj = ol.proj.get('EPSG:4326');

//Use a baselayer with vector data
var countries = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/countries-110m.geojson',
        format: new ol.format.GeoJSON({
          defaultDataProjection: ol.proj.get('EPSG:4326'),
          featureProjection: viewProj

//Define a "custom" tilegrid so that we match the projection (and can get proper resolutions for the view later on)
var tileGrid = ol.tilegrid.createXYZ({
        extent: viewProj.getExtent(),
        tileSize: 256

//Set up the Vector Tile layer with a custom tileLoadFunction
var layer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
    attributions: '...',
    format: new ol.format.MVT(),
    tileGrid: tileGrid,
    tilePixelRatio: 16,
    tileLoadFunction: function(tile, url) {
      tile.setLoader(function() {
              headers: {
                    "my.custom.header": "my.custom.value"
            .then(function(responses) {
              return Promise.all([
            .then(function(results) {
              var format = tile.getFormat();
              var features = format.readFeatures(results[0]);
    url: "http://my/service/that/returns/mvt/tiles/"+"{z}/{x}/{y}.mvt?"

//Create the map object 
var map = new ol.Map({
target: 'map',
view: new ol.View({
      center: ol.proj.fromLonLat([8.0, 65.822], viewProj),
      projection: viewProj,
      zoom: 2,
      //Set the extent and resolutions to match the defined projection/tileGrid
      extent: viewProj.getExtent(),
      resolutions: tileGrid.getResolutions()

//add the layers

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.