I want my map to load/update dynamically as the user pans with mouse/finger drag. Currently, as I drag and expose new areas of the map, those areas generally stay blank/undrawn until I release the mouse button. In OpenLayers2 I didn't have this problem; the layers loaded/updated their contents as I dragged.

I see this post:

OpenLayers 3: Vector Layers not Drawing during animated panning or mouse-drag events

and it appears there is now an updateWhileAnimating flag for Vector layers. I want such a flag for Image and Tile/XYZ layers. Is there a reason that flag/functionality can only exist for Vector layers?

2 Answers 2


To avoid the blank areas on tiles you can set these options on ol.Map constructor:

var map = new ol.Map({
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,

And another setting that helps is preload option on layer constructor:

var hereLayer = new ol.layer.Tile({
    preload: Infinity,
    source: new ol.source.XYZ({

I don't know about ol.layer.Image.

  • Thanks, this addressed the XYZ issue so now my tiles fill in as I drag. Still hoping to get an answer on the Image layer question, but will accept this answer as correct if I do not.
    – M Katz
    Commented Jun 19, 2015 at 23:09
  • Your answer to my other question (gis.stackexchange.com/questions/151653/…) also answered my Image Layer problem.
    – M Katz
    Commented Jun 22, 2015 at 22:44

For image layers, you can set a bigger buffer around the viewport. This is done on the source and works for ol.source.ImageWMS and ol.source.ImageMapGuide:

new ol.source.ImageWMS({
  // ...
  ratio: 2

The default is 1.5, and with a ratio setting of 2 you can pan the map from edge to edge without seeing the edge of the layer image.

  • Thanks, this is a good solution for my WMS layers. But I actually have another use case, which I should have made clear up front: I am using an ImageCanvas layer to draw a custom graticule (lat/lon grid lines and labels -- I am doing this custom for various reasons because the default lat/lon grid doesn't do all I need). So what I want is for my canvasFunction to get called continuously as I pan the map so the lat/lon grid always looks good. As it is now, the grid and all the labels pan with the map and only update when I release the mouse.
    – M Katz
    Commented Jun 21, 2015 at 4:57
  • ol.source.ImageCanvas also has a ratio option, same as ol.source.WMS.
    – ahocevar
    Commented Jun 21, 2015 at 15:18
  • Thanks, but unless I'm misunderstanding something that doesn't solve it for me. In this case it's not that I'm worried about the user panning to an undrawn part of the layer. It's that I want the layer to update continuously as the pan happens so the labels of the lat/lon grid will always stay at the top and left side of the screen, and not, for instance, be dragged into the middle of the screen.
    – M Katz
    Commented Jun 22, 2015 at 5:16
  • This is a different use case. You'll have to use precompose/render/postcompose hooks of the map or a layer and draw your graticule and labels with the Immediate API.
    – ahocevar
    Commented Jun 22, 2015 at 12:10
  • Thank you, and sorry for throwing in a different use case there. I ended up solving it by using .on( "pointermove" ) to replace the DragPan interaction completely, as described here: gis.stackexchange.com/questions/151653/…
    – M Katz
    Commented Jun 22, 2015 at 22:48

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.