Leaflet Offline Maps

Questions
1

Ok, I know this issue is not directly an F7 issue, but am using Leaflets in my F7 app and I am hopping to get some help from here.

Am trying to display offline maps using https://github.com/robertomlsoares/leaflet-offline

I have tried out the example at https://robertomlsoares.github.io/leaflet-offline/ on a stand-alone web page and it is working exactly as I need. Now, I am trying to add this example into my F7 app (v4 with Webpack), and am getting stuck with an error of “Uncaught TypeError: L.tileLayer.offline is not a function”

I have included the required leaflet scripts in the index page using tags, and added the following code to the pageInit of my map displaying page:

export default {
on:{
  pageInit: function() {
    var self = this;
    var app = self.$app;
    var $ = this.$;

    //'use strict';

    var tilesDb = {
        getItem: function (key) {
            return localforage.getItem(key);
        },

        saveTiles: function (tileUrls) {
            var self = this;

            var promises = [];

            for (var i = 0; i < tileUrls.length; i++) {
                var tileUrl = tileUrls[i];

                (function (i, tileUrl) {
                    promises[i] = new Promise(function (resolve, reject) {
                        var request = new XMLHttpRequest();
                        request.open('GET', tileUrl.url, true);
                        request.responseType = 'blob';
                        request.onreadystatechange = function () {
                            if (request.readyState === XMLHttpRequest.DONE) {
                                if (request.status === 200) {
                                    resolve(self._saveTile(tileUrl.key, request.response));
                                } else {
                                    reject({
                                        status: request.status,
                                        statusText: request.statusText
                                    });
                                }
                            }
                        };
                        request.send();
                    });
                })(i, tileUrl);
            }

            return Promise.all(promises);
        },

        clear: function () {
            return localforage.clear();
        },

        _saveTile: function (key, value) {
            return this._removeItem(key).then(function () {
                return localforage.setItem(key, value);
            });
        },

        _removeItem: function (key) {
            return localforage.removeItem(key);
        }
    };

    var map = L.map('map-id');
    var offlineLayer = L.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', tilesDb, {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abc',
        minZoom: 13,
        maxZoom: 19,
        crossOrigin: true
    });
    var offlineControl = L.control.offline(offlineLayer, tilesDb, {
        saveButtonHtml: '<i class="fa fa-download" aria-hidden="true"></i>',
        removeButtonHtml: '<i class="fa fa-trash" aria-hidden="true"></i>',
        confirmSavingCallback: function (nTilesToSave, continueSaveTiles) {
            if (window.confirm('Save ' + nTilesToSave + '?')) {
                continueSaveTiles();
            }
        },
        confirmRemovalCallback: function (continueRemoveTiles) {
            if (window.confirm('Remove all the tiles?')) {
                continueRemoveTiles();
            }
        },
        minZoom: 13,
        maxZoom: 19
    });

    offlineLayer.addTo(map);
    offlineControl.addTo(map);

    offlineLayer.on('offline:below-min-zoom-error', function () {
        alert('Can not save tiles below minimum zoom level.');
    });

    offlineLayer.on('offline:save-start', function (data) {
        console.log('Saving ' + data.nTilesToSave + ' tiles.');
    });

    offlineLayer.on('offline:save-end', function () {
        alert('All the tiles were saved.');
    });

    offlineLayer.on('offline:save-error', function (err) {
        console.error('Error when saving tiles: ' + err);
    });

    offlineLayer.on('offline:remove-start', function () {
        console.log('Removing tiles.');
    });

    offlineLayer.on('offline:remove-end', function () {
        alert('All the tiles were removed.');
    });

    offlineLayer.on('offline:remove-error', function (err) {
        console.error('Error when removing tiles: ' + err);
    });

    map.setView({
        lat: 0.369682, 
        lng: 32.612868
    }, 18); }}};

I imagine there is an issue with the function definitions and trying to integrate the different modules in the Webpack environment, unfortunately, my webpack experience is too limited for me to figure out where the issue is.

2

You are using webpack, did you install Leaflet that way? or just added the script?

pls try as the doc says

Install
If you use npm, you can install leaflet-offline by running: npm install leaflet-offline

and the, i think you should do something like this:

import L from 'leaflet-offline'
export default {
  // ypur code
}
3

I tried to install it from npm, but I got some errors, so I just added the script. When I just added the script, Leaflet works fine, but the offline library doesn’t.

It turns out my anti-virus was causing the npm errors, so I disabled it and was able to install the offline library through npm.

Now am getting a new error Uncaught TypeError: leaflet_offline__WEBPACK_IMPORTED_MODULE_0___default.a.map is not a function

4

I use Framework7 and LeafletJS to deliver two versions of my app - with and without in-built maps. The version with inbuilt maps (its a River Thames app and much of the river is not even covered with 4G) simply refers to the included map tiles like this:
L.tileLayer('tiles/{z}/{x}/{y}.png', { maxZoom: 15, minZoom: 9, maxNativeZoom: 14}).addTo(map),
App download links at support site

5

That is great! This works if, you have a predefined area of interest.

My intention is to have the user navigate to any area of his choice (spanning over 1000kms) and download and save the tiles of that area before hand, and then have them deleted after they serve their purpose. This library is the closest thing I have come across that can give me what I want.