leaflet

Share cached fetched tiles among many instances on the same page


Sometimes I need to have more than one LeafletJS map on the same page. That is, I instantiate two or more LeafletJS Map objects which they share the same geographical vicinity (say 200km x 200km) but with different centers.

Is there a way to have all the LeafletJS map objects on the same page share the tiles cache so that each Map object does not (re-)fetch the same tiles?


Solution

  • Leaflet itself doesn’t provide a special “shared cache” for multiple maps. But browsers automatically cache tile requests, so if your maps use the same L.tileLayer URL and options, the tiles will only be downloaded once (assuming the tile server sets proper cache headers).