2

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();
      }}
  • If zoom animation is enabled (and browser supports it) it should work as you want it to work. When zooming in, existing tiles are enlarged and then covered by actual tiles. When zooming out, existing tiles are shrinked and then covered by actual tiles. Please add relevant code to your question (and if possible some images illustrating how it is and how you want it to be). – TomazicM Mar 5 at 14:11
  • Thanks for the response ! Zoom animation is enabled by default, When I zoom in existing tiles gets covered by actual tiles (better resolution). However if I scroll/move the map it waits untill the actual tile gets rendered. While scrolling or moving I want to load the higher zoom level tile first (which may be blur , I am ok with that) and then immediately it gets replaced with the actual tile as per the internet speed. This way user does not need to wait till the actual tile appears . I am editing map code in my question. – user684805 Mar 5 at 14:27
1

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'
});
| improve this answer | |
  • Tiles at the same zoom level got pre-loaded and it was faster than before. With OSM as a base map it rendered very fast and felt like its s single image however with google mutant loading tiles were visible. Can we load/render tiles with lower zoom (say 16)level then current zoom (say 18) as well while moving automatically for the same extent or current map view. – user684805 Mar 6 at 11:13
  • Leaflet.GridLayer.GoogleMutant plugin is greatly modified version of standard L.GridLayer and as a consequence Leaflet.EdgeBuffer plugin does not work for layers based on GoogleMutant plugin. – TomazicM Mar 8 at 19:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.