I recenty discovered the gdal2tiles.py tool which is working great with OpenLayers 2.x, but I wanted to use the new release of OL and I'm having some troubles. I have googled for a solution but i did not found a way to go. Here is my code, inspired from the solutions offered here: https://groups.google.com/forum/#!searchin/ol3-dev/TMS/ol3-dev/JLn0lfHvI7w/q7C3O8_b0-UJ (still referring to the dev version of OL3, different it seems to the release).

var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
  if (!tileCoord) { return ""; }

  var x = tileCoord[1];
  var y = tileCoord[2];
  var z = tileCoord[0];

  if (x < 0 || y < 0) { return "";}

  return 'http://localhost/map-tiles/'+ z.toString()+'/'+ x.toString() +'/'+y.toString() +'.png';

var layers = [
  new ol.layer.Tile({
    source: new ol.source.XYZ({
      tileUrlFunction: tileUrlFunction

var map = new ol.Map({
  target: 'map',
  layers: layers,
  renderer: 'canvas',
  view: new ol.View({
    center: [2900,-3900],
    zoom: 3

I've tried several combinations of the x, y and z assignment without success. Tiles on the browser are completely wrong and or missing.

  • Did you manage to solve this issue or find a way to load tiles locally ?
    – Alophind
    Oct 7, 2014 at 19:39
  • No @Alophind, I opted for OpenLayer 2.x in my project...
    – bradypus
    Oct 8, 2014 at 11:49
  • Your code seems correct. What you can do is to check in the Firefox/Chrome developer tools which URLs is the page trying to download. Maybe the coordinates are not what you would expect, or you need to calculate a modulo. Apr 23, 2016 at 18:04

2 Answers 2


The main point is that by default OpenLayers 3 follows the widely-used Google grid where x 0 and y 0 are in the top left. Grids like TMS where x 0 and y 0 are in the bottom left can be used by using the {-y} placeholder in the URL template, and tileUrlFunction is only necessary when really a custom tile grid is utilized.

When using gdal2tiles, the following should work:

var layers = [
  new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://localhost/map-tiles/{z}/{x}/{-y}.png'

I've managed to solve this in a different way. I used this post http://www.aubrett.com/InformationTechnology/Geospatial/gdal2tilesTMSStructure.aspx to create TMS tiles and than using ol.source.XYZ to display them.

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.