CODEWITHSUNDEEP
javascriptleafletreact-leaflet
Francois T
Francois T

Reputation: 40

React Leaflet - get Tiles Offline

I use leaflet.offline which allows to save the tiles in indexedDB. The backup is done by a click on a button 'L.control'. I would like this backup to be automatic each time you start a map (without button). How to do it with leaflet.offline or do you know another way, please?

Layer creation - works fine

const tileLayerOffline = L.tileLayer.offline(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    subdomains: "abc",
    crossOrigin: true,
    minZoom: 13,
    maxZoom: 16,
  }
)

Launch button

const controlSaveTiles = L.control.savetiles(tileLayerOffline, {
  zoomlevels: [13, 16], // optional zoomlevels to save, default current zoomlevel
});
controlSaveTiles.addTo(map);

Upvotes: 1

Views: 616

Answers (1)

teddybeard
teddybeard

Reputation: 2014

Looking at the source code, the savetiles control button triggers the _saveTiles() method. You can call this method directly on the controlSaveTiles variable which contains a reference to the savetiles control.

const controlSaveTiles = L.control.savetiles(tileLayerOffline, {
  zoomlevels: [13, 16]
});
controlSaveTiles._saveTiles(); // no need to addTo(map), just save

Code that creates the control buttons: https://github.com/allartk/leaflet.offline/blob/master/src/ControlSaveTiles.js#L123

Method that saves the tiles: https://github.com/allartk/leaflet.offline/blob/master/src/ControlSaveTiles.js#L144

Upvotes: 2

Related Questions