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());
  • I also have problems with openlayers 3 and TMS layers. any help is very very apreciated! I work with a local italian projection (EPSG:3003 Monte Mario Italy zone 1) and I had loaded this projection in my project for evitate to reproject all of my data. I had created the tile pyramid with the last version of gdal2tiles (the version shipped with the last version of maptiler open source [see trac.osgeo.org/gdal/ticket/2052] to be able to generate jpeg tiles instead of png tiles) my problem is that I don't be able to assign the correct extent to my page. If I assign to the montemarioPro Commented Jan 20, 2015 at 10:52

3 Answers 3


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
  • Nice self answer.. Thanks for committing the knowledge back out
    – user33290
    Commented Jan 20, 2015 at 13:51

I've found a working solution based on openlayers 3.7

i have explained the solution in this post:



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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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