I'm having trouble with a WMTS source in my OpenLayers 3-driven web application.

The map is shown and the layer is rendered, but the 256x256 px tiles are rendered slightly downscaled. For instance, the section covered by this tile

Raw tile

looks like this when screen grabbed from the map

Rendered tile

(216x216 px)

The source in question is set up using WMTS' getCapabilities, so there's minimal manual labour going on:

function getSource(getCapabilitiesUrl) {
    var parser = new ol.format.WMTSCapabilities();
    return fetch(getCapabilitiesUrl)
        .then(function (resp) {
            return resp.text();
        .then(function (xml) {
            return parser.read(xml);
        .then(function (wmtsCap) {
            return new ol.source.WMTS(ol.source.WMTS.optionsFromCapabilities(wmtsCap, {
                layer: 'my-layer',
                matrixSet: 'EPSG:32633'

The projection is defined like this:

proj4.defs('EPSG:32633', '+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs');

Can anyone point me in the right direction as to how I can get OpenLayers to display the tiles at the right scale (i.e. unscaled)?

The problem exists in a clean environment without any CSS styling, so this should not be the source of the problem. I'd make a live demo for you to try, but the geoserver is unfortunately not available to the public.


This is the (anonymised) request for the 256x256 tile shown at the top of the post: https://example.com/geowebcache/service/wmts?layer=my-layer&‌​style=&tilematrixset‌​=32633&Service=WMTS&‌​Request=GetTile&Vers‌​ion=1.0.0&Format=ima‌​ge%2Fpng&TileMatrix=‌​32633%3A5&TileCol=9&‌​TileRow=12

  • What request is actually sent to the WMTS service?
    – nmtoken
    Commented Sep 9, 2016 at 6:59
  • @nmtoken: For the example tile in the post: https://example.com/geowebcache/service/wmts?layer=my-layer&style=&tilematrixset=32633&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=32633%3A5&TileCol=9&TileRow=12
    – Henrik
    Commented Sep 9, 2016 at 7:07
  • and when you run that request in a browser is the result a 256x256 image
    – nmtoken
    Commented Sep 9, 2016 at 7:49
  • @nmtoken Yep, the response would be the same as the first example png in the post.
    – Henrik
    Commented Sep 9, 2016 at 7:50
  • So the problem doesn't appear to be with the code that generates the request, or the projection, or the service, it must be with your client. Could you have a CSS stylesheet that is shrinking images/content by 85%
    – nmtoken
    Commented Sep 9, 2016 at 7:57

1 Answer 1


This was caused by the view not having the correct maximum resolution.

Given the getSource function above, I get a good result by setting up the view like this:

var source = getSource("http://example.com/wms?REQUEST=getcapabilities");
var tileGrid = source.getTileGrid();
var view = new ol.View({
    projection = source.getProjection(),
    maxResolution: tileGrid.getResolution(tileGrid.getMinZoom());

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.