If you are using QGIS, you could utilise the OpenLayers plugin. Progams such as Mapertive can download tiles from OpenStreetMap, using the generate-tiles method. Other programs may be available for other sources. Mapertive exports the images into the 'Tiles' subfolder.
Once you have the tiles downloaded, make a copy of one of the files in the qgis\python\plugins\openlayers_plugin\html folder, except modify the statement which creates a layer.
In this example I am using MS Windows, and OpenStreetMap. I would replace
var osm = new OpenLayers.Layer.OSM(
"OpenStreetMap",
"http://tile.openstreetmap.org/${z}/${x}/${y}.png",
with:
var osm = new OpenLayers.Layer.OSM(
"OpenStreetMap",
"C:/Path-to/Maperitive-latest/Maperitive/Tiles/${z}/${x}/${y}.png",
I saved this file as qgis\python\plugins\openlayers_plugin\html\osm_local.html
Last thing to do is modify the openlayers_plugin.py file, by registering the new html file.
# Layers
self.olLayerTypeRegistry = OlLayerTypeRegistry()
# Add this
self.olLayerTypeRegistry.add( OlLayerType(self, 'OpenStreetMap (Cache)', 'osm_icon.png', 'osm_local.html', True) )
After restarting QGIS, you will have a new option in the OpenLayers menu
So I was able to fix the problem by using the code inspector on the Leaflet example
The <script> portion looks like this:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'examples.map-i86knfo3'
}).addTo(map);
No idea what's triggering the issue, though.
Best Answer
This probably has nothing to do with Leaflet — it requests tile images the same way as other JS libraries, and caching is fully handled by the browser. Check your browser/devtools settings.