CODEWITHSUNDEEP
javascriptmapsmapboxmapbox-gl-js
Thomas Owen
Thomas Owen

Reputation: 57

Do not refresh Mapbox tile source until map is idle

I am using Mapbox GL API V2.

I am loading 3rd party tiles like this:

    map.addSource('test', {
        'type': 'vector',
        "tiles": [
            "http://mytileserver/tiles/test/{z}/{x}/{y}"
        ]
    });

This works nicely - except as the user pans / drags the map the tiles are being loaded constantly. So much so that the tile server is having trouble keeping up.

I have added the following events to Mapbox:

map.on('movestart', () => {
    map.setLayoutProperty('test', 'visibility', 'none');
});

map.on('moveend', () => {
    map.setLayoutProperty('test', 'visibility', 'visible');
});

This works really well as it prevents the tiles from being loaded until the user has finished dragging the map. However, to achieve this it makes the existing tiles temporarily invisible until the map has stopped moving. This is not ideal.

Is there any way to keep the existing tiles on the screen as the map is being moved / panned - but (crucially) not actually update the tiles until the moveend event has occurred?

Thanks!

Upvotes: 0

Views: 679

Answers (1)

jscastro
jscastro

Reputation: 3780

There is an idle method you can use instead of moveend

map.on('idle', () => {
    map.setLayoutProperty('test', 'visibility', 'visible');
});

Upvotes: 1

Related Questions