I'm using OpenLayers v6.1.1 and I would like to ask you to confirm that my understanding is correct. Take a look at below image:

enter image description here

Am I right that there might be a situation that if I would take all tile images and put them next to each other then such map might be bigger to what I actually see on the screen?

Or the tile images should always match what is on the screen (nothing more)?

Why I'm asking...

I wanted to take picture of what I currently see on the screen and my idea was to simply get all tile images (get the grid using getTileGrid() and then forEachTileCoord() for my current view extent) and just concatenate them to have the map image, but the image is not what I see on the screen. Sometimes there is much more on the image edges or the image starts from the different place on the map then I see it on the screen.


  • I'm not using Node.js - any kind of server side (Node.js side) image manipulation will not work for me
  • I'm just including ol.js and the page and play with vanilla JavaScript
  • This definitely happens when your tile grid resolutions are different than your view resolutions. Without seeing your code it's hard to say more. – TomazicM Jan 27 at 18:39
  • Check the map export example openlayers.org/en/latest/examples/export-map.html example and the latest code for the PDF export example github.com/openlayers/openlayers/blob/master/examples/… which now gets around the browser compatibility issues of html-to-image – Mike Jan 27 at 19:46
  • That definitely happens always. Clients are downloading full tiles and they do not crop them by the extent of the view. – user30184 Jan 27 at 21:16
  • 1
    I would say that each one of three of us commenting has different understanding of what the question is all about. But we covered all of them :-) – TomazicM Jan 28 at 6:51
  • Thanks for all of the comments. I came up with the solution, take a look at my answer bellow. – Dawid Rutkowski Jan 29 at 7:22

I find a way to print only those tiles which I see by writing the following code:

var tileUrlFunction = tileSource.getTileUrlFunction(),
    grid = tileSource.getTileGrid(),
    view = map.getView(),
    extent = view.calculateExtent(),
    zoom = view.getZoom(),
    resolution = view.getResolution(),
    tilesData = new Array(); 

grid.forEachTileCoord(extent, zoom, function (tileCoord) {
    var tileExtent = grid.getTileCoordExtent(tileCoord),
        posX = Math.ceil((tileExtent[0] - extent[0]) / resolution),
        posY = Math.ceil((extent[3] - tileExtent[3]) / resolution);

        url: tileUrlFunction(tileCoord, 1, ol.proj.get('EPSG:3857')),
        x: posX,
        y: posY,
        tileSizeW: grid.tileSize_,
        tileSizeH: grid.tileSize_,              

This will fill tilesData array with all the information's I need:

  • URL to the file image
  • position - this is the most important as later on by server logic will use it to put images next to each other and make full currently visible on the screen map

The position will sometimes be negative and that is correct as some of the tiles are not fully visible. So I know how much to move the image outsize of the visible area - just like not fully visible tiles on the map.

enter image description here

To answer questions you will probably have:

  • no, I can't do it on the front-end (e.g.: by using jsPDF) like it is shown for example here https://openlayers.org/en/latest/examples/export-pdf.html?q=pdf - I'm doing more processing on the back-end to generate PDF (I'm adding there more data). In my case, I need tiles on the back-end.
  • I know that I don't need tileSizeH and tileSizeW as the single "size" would be enough (tiles are squares)
    • I'm not using Node.js, this is ASP.NET project
| 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.