[GIS] Problem in displaying tile images using OpenLayers 3

gdalopenlayerstile-map-servicetileswmts

I have problem with displaying my TMS layer using OpenLayers 3 (OL3).
This is my first time working with tile images this way so maybe it doesn't have to do anything with OL3, maybe I just don't understand it right.

However, I've downloaded sample .tif image from NaturalEarthData http://www.naturalearthdata.com/downloads/10m-raster-data/10m-natural-earth-1/ and then I generated my map tiles (for zoom levels 0-5 ) using gdal2tiles command. Tile images are placed in nested folders following the zoomLevel/xTile/yTile.png schema.

I created simple map using OL3 and added tile layer to it. At first zoom level it's displayed fine.

Zoom level 0

However, when I try to zoom in it doesn't work good because tile images are not merged correctly.

Zoom level 1

Can you please tell me where I'm going wrong, I tried to follow this example http://tileserver.maptiler.com/#nasa/ol3 but I just can't achieve same thing with my data.

You can see my code below:

var extent = ol.proj.transform([-180,-85.051129,179.976804,85.051129],
  'EPSG:4326', 'EPSG:3857');
var center = ol.proj.transform([-0.011598000000006436, 0],
  'EPSG:4326', 'EPSG:3857');


var map = new ol.Map({
  layers: [
    // new ol.layer.Tile({
    //   source: new ol.source.MapQuest({layer: 'osm'})
    // }),
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'static/website/NE1_HR_LC/NE1_HR_LC/{z}/{x}/{y}.png',
        extent: extent,
        minZoom: 0,
        maxZoom: 5,
        wrapx: false
      })
    })
  ],
  renderer: 'canvas',
  target: 'map',
  view: new ol.View({
    projection: 'EPSG:3857',
    center: center,
    zoom: 1
  })
});
map.getView().fitExtent(extent, map.getSize());

Best Answer

I've found problem by myself at the end. The reason why it didn't work is because my tiles were created using gdal2tiles and they were created using TMS scheme while examples at http://tileserver.maptiler.com/#nasa/ol3 works only for tiles generated using MapTiler which renders tiles following XYZ schema. Difference between those 2 types is well explained here http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/

However, this is code with correct layer definition for TMS tiles

var tms_layer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileUrlFunction: function(coordinate) {
          if(coordinate == null){
            return "";
          } 
          var z = coordinate.a;
          var x = coordinate.x;
          var y = (1 << z) - coordinate.y - 1;
          return 'static/website/NE1_HR_LC/NE1_HR_LC/' + z + '/' + x + '/' + y + '.png';
        },
        extent: extent,
        minZoom: 0,
        maxZoom: 5,
        wrapx: false
      })
})
Related Question