0

I'm trying to add a tilelayer to a map, but the zoom level and x/y coords are not matching up in the network request for some reason.

Here's my code for the layer:

new TileLayer({
  source: new XYZ({
    url: 'myserver.com/tms/{z}/{x}/{-y}.png'
})

In the browser's network tab, the request looks something like myserver.com/tms/10/585/716.png and the response is an empty png file.

However when I take that url and manually decrease the zoom by 1, so it becomes myserver.com/tms/9/585/716.png I get the correct tile as a response. This is consistent across all zoom levels.

For reference, the OSM source layer works perfectly fine:

new TileLayer({
  source: new OSM(),
})

I'm guessing this is an issue on my part since the server is technically serving the right tiles but other than that I don't know what to do.

0

Your source has a non-standard grid where what is normally zoom level 0 is missing and consequently all other levels are offset by 1. You will need to set a custom tile grid based on a standard XYZ grid but omitting the first resolution

import TileGrid from 'ol/tilegrid/TileGrid.js';
import {createXYZ} from 'ol/tilegrid.js';
import {get as getProjection} from 'ol/proj.js';


new TileLayer({
  source: new XYZ({
    url: 'myserver.com/tms/{z}/{x}/{-y}.png',
    tileGrid: new TileGrid({
      extent: getProjection('EPSG:3857').getExtent(),
      resolutions: createXYZ().getResolutions().slice(1)
    })
  })
})
| 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.