[GIS] Preload map tiles that are outside current map view in Leaflet

basemapleafletpanzoom

I am using Leaflet framework for showing basemaps and the GeoServer layers.

When I zoom out or pan the base map, tiles outside current view are first shown blank and then loaded with tile content. Here I need first the actual zoom level tiles to be already loaded and shown (little blur) and then the new zoom level tiles (which is more clear) when on map is zoomed/panned.

I tried updateWhenIdle, updateWhenZooming and maxNativeZoom option variables but still the same. How can I achieve this?

Creating a map object :

leafletMap() {

      if(!this.map)
      {
        this.map = new L.Map('map', { center: new L.LatLng(51.51, -0.11),crs:L.CRS.EPSG3857});
      }
      else
      {
         //this.map.invalidateSize();
      }}

Best Answer

What you require is loading map tiles that are outside current map view. This functionality is not included in native Leaflet library. The closest Leaflet gets to this is keepBuffer grid layer option, but it merely keeps already lodaded and shown tiles when they are panned outside map view.

But there is a solution in the form of Leaflet.EdgeBuffer plugin which does exactly what you need: beforehand loads tiles that are outside current vew. On the plugin home page it's stated that it's intended for Leaflet 1.0. I tested it with 1.6 and 1.7 beta and it still works.

Size of tile buffer is set by edgeBufferTiles option. Example of tile layer definition with hefty 5 rows/columns of tile buffer would be:

...
<script src="lib/Leaflet.EdgeBuffer/leaflet.edgebuffer.js"></script>
...
var myLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 17,
  minZoom: 5,
  edgeBufferTiles: 5,
  attribution: 'Map &copy; OpenStreetMap'
});
Related Question