Destroy cached timesteps on pan/zoom

[jimjam-slam]

I'm using Leaflet.TimeDimension (1.0.0) to build an app that will display several animated WMS layers (one at a time!), and I'm starting to hit performance considerations. Basically, things grind to a halt if I try to pan/zoom when there are cached timesteps (even when I'm just working with one WMS layer).

Reading issues #10 and #54 and investigating the DOM in the Developer Tools, I can see that cached tiles for past/future timesteps are performing as expected: the past/future tiles that aren't displayed are no longer marked as loaded, and they're rerequested along with the present ones.

I think what might make my app faster is if the past/future layers were just removed from the DOM and/or destroyed when new tiles are requested for the present, so that only the tiles about to be displayed were requested.

I think my users would find it reasonable to expect a wait to buffer timesteps when they hit the Play button, but they might be more surprised to realise that performance is suffering because the same is happening when they pan or zoom—especially since they're essentially moving spatially then.

I'm hoping this behaviour is something I can control: I'm also anticipating a scenario where I automatically pan the viewpoint while animating a layer (a sort of Ken Burns effect kiosk mode when my app has been left to its own devices), and the present behaviour would be more useful in that instance (although I'm not sure if it's possible to cache tiles beyond the viewpoint spatially too).

But yeah: is there an event for new tile requests I can attach to and maybe expunge the timestep cache?

[jimjam-slam]

I'm currently trying to this by attaching a wipe cache function on resize, zoom and pan events. The idea is that it should loop through all the layers and remove any that have the style display: none (as the cached layers do):

function wipe_time_cache()
{
  if (app_mode == 'data')
    {
      this.eachLayer(function(layer) {
        console.log(layer);
        if (L.DomUtil.getStyle(layer.getContainer(), 'display') == 'none')
        {
          this.removeLayer(layer);
        }
      });
    }
}

// after map initialisation
mymap.on('zoomlevelschange resize movestart', wipe_time_cache, mymap);

This code runs successfully before I add my WMS layer (although the basemap is always visible, so it's not doing much), but when I try to add a WMS layer, I get an error:

Uncaught TypeError: layer.getContainer is not a function

It seems that the WMS layer doesn't have getContainer, even though it should inherit it from GridLayer. Is this because it's managed by TimeDimension? Is there a better way for me to handle this?

[jimjam-slam]

This solution seems to work well, and panning/zooming performance noticeably improves with the cached layers removed! (I am using jQuery for the iteration, though.)

function wipe_time_cache()
{
  current_time_id = mymap.timeDimension.getCurrentTime();

  // ... for each time layer synced to the time dimension...
  $.each(mymap.timeDimension._syncedLayers, function(sync_index, sync_value)
  {
    // ... and each time slice in the synced time layer...
    $.each(sync_value._layers, function(slice_index, slice_value)
    {
      // remove the slice if it doesn't match the current time
      if (slice_index != current_time_id)
      {
        console.log('Deleting cached time slice');
        mymap.removeLayer(slice_value);
      }
    });
  });
}

// after map initialisation
mymap.on('zoomlevelschange resize movestart', wipe_time_cache);