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 – Gian Marco Artioli Jan 20 '15 at 10:52

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

I've found a working solution based on openlayers 3.7

i have explained the solution in this post:


| improve this answer | |

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.