I am working on a web application where users can view sequences of 5-10 GeoTiffs overlaid on a map, and played like a slideshow - show the first Geotiff, wait a few seconds, show the second, and so on. Strictly one at the time. The Geotiffs are served using WMS by a Geoserver instance on the same server.

Things can get really slow fetching them (we're talking 4-8 seconds for tiffs in the 2-10Mb range), and users complained, so I thought of loading all the geotiffs in a slideshow before playing it. However, I'm under the impression that Leaflet does not request the raster from Geoserver until its layer is actually added to the map.

What is an efficient technique, if at all possible, to load a group of Geotiffs asynchronously before adding them to the map?

  • Please don't just ask "Is there a way to....?", because you might get "yes" as the only answer. It's a part of asking good questions. Mar 16, 2016 at 12:30
  • I'll try and rephrase the question.
    – Btz
    Mar 16, 2016 at 12:34

1 Answer 1


If you're loading the geotiffs as L.ImageOverlay, then the overlays are firing a load event (it's undocumented, but it's there) you can use to sync things up, e.g.:

var firstImage = L.imageOverlay('foo.tiff', bounds);

firstImage.on('load', function(){
    var secondImage = L.imageOverlay(....).addTo(map);


If you're using L.TileLayers instead (e.g. to load WMS tiles from your Geoserver), they also implement a load event which fires as soon as all visible tiles have been loaded.

  • There are several approaches. You can add a L.ImageOverlay with zero opacity, add it, then make it opaque when appropiate. You can use a map pane which is invisible or behind other layers. You can also create an <img> for the geotiff, attach a handler to the load DOM event to it - the browser should cache the image properly and reduce the loading times of L.ImageOverlays. Lastly, service workers. Mar 16, 2016 at 13:06
  • The Geotiffs are served using WMS, not using ImageOverlay. In any case, I tried the first approach, loading them all, and adding them with opacity zero; while the loading times are more or less ok, for some reason when setting a specific Geotiff to opacity 1 to make it visible, Leaflet renders it incredibly slowly. We're talking about 1 to 2 full minutes.
    – Btz
    Mar 16, 2016 at 16:56
  • I strongly suggest you monitor the load on your geoserver machine, look at how much time your web browser spends just waiting for a response from GeoServer and consider using MapProxy to cache the WMS tiles. Mar 17, 2016 at 8:00

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.