Problem in displaying tile images using OpenLayers 3

Question

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.

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

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());

Answer 1

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
      })
})

Answer 2

I've found a working solution based on openlayers 3.7

i have explained the solution in this post:

https://groups.google.com/forum/#!msg/ol3-dev/FQRup_N1Ess/tF-6CyE35_UJ

Answer 3

For me, the problem was I was mentioning my cache tile server in the html file but not mentioning the correct port as I was running it exposing different port than the container, so make sure you use the same "different" port in your html as well.