The app crashes after saveTiles

[viacheslavspasibo]

Hi There!

I have an ionic gps tracking app which uses leaflet map. I integrated the plugin into the system and fire the "saveTiles" event every 1km...after the first try to save the tiles the app crashes. The error message is a Memory Pressure...however, my android phone has a free space of 4GB.

How can I fix?

[allartk]

Please provide code to repeat the error.

And check the ionic settings related to maximum storage.

[viacheslavspasibo]

I call saveTile function every 10sec which finds the save button on the leaflet map and emits the click event. The following code shows how I initialise the map and configure the save buttons

this.map = (L as any).map('map', { center: [51.505, -0.09], zoom: 16, trackResize: false }); let baseLayer = (L as any).tileLayer .offline(this.urlTemplate, { attribution: 'Map data {attribution.OpenStreetMap}', subdomains: 'abc', minZoom: 1 }) .addTo(this.map);

  this.map.setView(
    {
      lat: 52.5204345,
      lng: 13.4014027,
    },
    19
  );

  let that = this;
  let control = (L as any).control.savetiles(baseLayer, {
    zoomlevels: [19, 19], // optional zoomlevels to save, default current zoomlevel
    confirm(layer, successCallback) {
      console.log('layer: ', layer);
      successCallback();
    },
    confirmRemoval(layer, successCallback) {
      if (window.confirm('Remove all the tiles?')) {
        successCallback();
      }
    },
    saveText:
      '<i class="fa fa-download" aria-hidden="true" title="Save tiles"></i>',
    rmText: '<i class="fa fa-trash" aria-hidden="true"  title="Remove tiles"></i>',
  });
  control.addTo(this.map);

  let progress;
  baseLayer.on('savestart', (e) => {
    console.log('e: ', e);
    progress = 0;
    console.log(e._tilesforSave.length);
  });
  baseLayer.on('savetileend', () => {
    progress += 1;
    console.log("progress: " + progress);
  });

this.saveTilesSub = timer(0, 10000).subscribe(() => { if (navigator.onLine) { this.saveTile(); console.log('save tiles...') } });

==========

saveTile() { let doc = document.getElementsByClassName('savetiles')[1]; this.eventFire(doc, 'click'); }

eventFire(el, etype) {
    if (el.fireEvent) {
        el.fireEvent('on' + etype);
    } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
    }
}

[allartk]

I do not directly see an error, in your code, it is unclear for me if it has to do with the leaflet.offline library.

• Please check the precise exception thrown in javascript in your browser console / adb.
• Also I want to advise to use the api methods like https://github.com/allartk/leaflet.offline/blob/master/docs/api.md#module_TileManager.saveTile and use es6 import, and not fire clicks on a button.

[viacheslavspasibo]

Thanks for the hint. It followed your advice and it worked!

"Also I want to advise to use the api methods like https://github.com/allartk/leaflet.offline/blob/master/docs/api.md#module_TileManager.saveTile and use es6 import, and not fire clicks on a button."