How do I abort outstanding map tile request with OpenLayers when the zoom changes?

Question

I have an OpenLayers map with a TMS layer. For each zoom change, my map makes about 56 requests for map tiles (depending on the map/screen size). If the user rapidly zooms in or out, all these map tile requests get queued up in order, and my understanding is that the map tile requests from OpenLayers are not called asynchronously. So if a user zooms in or out rapidly, there ends up being many requests for map tiles that are no longer needed, and the ones that are needed will not load in until all previous requests are made.

Is there any way to abort pending map tile requests when the zoom changes? If not through OpenLayers, is there some way to abort all pending requests to a specific URL?

As far as OPEN LAYER api explains, there are events like KEY UP, KEY DOWN and so on. If you can control the events to send request once the key is up. And there is a function destroy() which can help you in removing previous piled up requests. — Murtaza Khursheed Hussain, Apr 03 '12 at 09:27
There is a class called control you can check here http://dev.openlayers.org/releases/OpenLayers-2.11/doc/apidocs/files/OpenLayers/Control-js.html#OpenLayers.Control which handles all this. Hope it helps. Regards — Murtaza Khursheed Hussain, Apr 03 '12 at 09:30

score 2 · Accepted Answer · answered Aug 21 '12 at 10:32

Update to OpenLayers 2.12 or above, because since this version the tile queue has been enhanced and will now avoid old requests. To cite from the OpenLayers 2.12 Release Notes:

The tiling code has been overhauled so tile loading in grid layers is now done in a queue. The tile queue gives more control on the tile requests sent to the server. Pending requests for tiles that are not needed any more (e.g. after zooming or panning) are avoided, which increases performance and reduces server load.

Is this still valid? The code is no longer present in master, and seems to have been replaced by something similar; better? However, the issue still exists in my clients. — relet, Nov 22 '13 at 22:52

score 1 · Answer 2 · answered Aug 21 '12 at 10:10

1

When you have defined zooming by mousewheel, you can use the following code to prevent loading tiles for all intermediate zoomlevels:

new OpenLayers.Control.Navigation({
    "zoomWheelEnabled": true,
    "mouseWheelOptions": {
        "interval": 250, 
        "cumulative": true
    }
})

answered Aug 21 '12 at 10:10

janb

1,057
1
9
11

I don't know what version [this cumulative feature](https://github.com/openlayers/openlayers/commit/6223d7fd82b93abd362bdc9630585c351829da93) was removed, but it is no longer present in the current repository or latest stable release of OpenLayers. – Luc Apr 26 '23 at 15:41

score 0 · Answer 3 · answered Apr 26 '23 at 16:10

For each zoom change, my map makes about 56 requests for map tiles (depending on the map/screen size). If the user rapidly zooms in or out, all these map tile requests get queued up

You can avoid requests for each zoom level that the user passes through as suggested by janb (their code does not work in the latest release anymore).

By default, MouseWheelZoom waits 80 milliseconds after the first scroll event before doing anything (timeout:80) and does not allow zooming more than one click at a time (maxDelta:1) (the documentation doesn't say why these speed bumps are in place). While it waits for the timeout, no zooming happens and so no intermediate zoom levels are loaded. By setting maxDelta to a greater value, the user can skip over zoom levels if they scroll more than one click within the timeout period.

You could make the application more responsive by reducing the 80 milliseconds, but eventually you forego the chance of zooming fast enough to skip loading zoom levels.

Another setting I found relevant is the animation duration. It stacks animations instead of waiting for them to complete, so this (thankfully) does not limit the user (so many applications make the user wait for an animation before interaction is enabled). Try setting it to 2500 ms and then scroll at different points on the map while the animation is still going :). The default is 250 ms but I find a slightly lower value to feel more responsive.

From some testing, 6 zoom levels is about the most precise I can do without ending up in a place I didn't intend to. This may not be a good default for everyone, but maxDelta:6 seems to be a good value for me. Setting a timeout of 30 ms resulted in it not accumulating all the zooming I tried to do at once, so 40 ms strikes a good balance for me between doing what the user asked and no unnecessary waiting.

let map = new ol.Map({
    interactions: ol.interaction.defaults.defaults({
        mouseWheelZoom: false,
    }).extend([
        new ol.interaction.MouseWheelZoom({
            maxDelta: 6,
            timeout: 40,
            duration: 150,
        }),
    ]),
});

The code seems a bit unwieldy but this is how an example overrides the default MouseWheelZoom options.

How do I abort outstanding map tile request with OpenLayers when the zoom changes?

3 Answers3