ryaa
commented
7 years ago Below is the method to download and save tiles for offline mode
_downloadOfflineMap(ticketDetail: TicketDetail) {
return new Promise<TicketDetail>((resolve: Function, reject: Function) => {
if (this.isOnline && ticketDetail && ticketDetail.work_area) {
let ZOOM_MIN = 16;
let ZOOM_MAX = 20;
let FOLDER_NAME = 'OfflineTileLayer';
let streetsLayer = null;
let satelliteLayer = null;
let promiseForStreetsLayerInit = new Promise((resolve: Function, reject: Function) => {
try {
streetsLayer = L.tileLayerCordova('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoon: ZOOM_MIN,
maxZoom: ZOOM_MAX,
id: 'mapbox.streets',
accessToken: MAPBOX_API_KEY,
// these are specific to L.TileLayer.Cordova and mostly specify where to store the tiles on disk
folder: FOLDER_NAME,
name: 'streetsLayer',
debug: true
}, () => {
resolve();
});
} catch (error) {
this.logger.error('TicketsList: error occurred while settings up downloading map tiles for offline support: ' + JSON.stringify(error));
let appError = new AppError(false, 'Downloading map tiles for offline support failed.');
reject(appError);
}
});
let promiseForSatelliteLayerInit = new Promise((resolve: Function, reject: Function) => {
try {
satelliteLayer = L.tileLayerCordova('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoon: ZOOM_MIN,
maxZoom: ZOOM_MAX,
id: 'mapbox.streets-satellite',
accessToken: MAPBOX_API_KEY,
// these are specific to L.TileLayer.Cordova and mostly specify where to store the tiles on disk
folder: FOLDER_NAME,
name: 'satelliteLayer',
debug: true
}, () => {
resolve();
});
} catch (error) {
this.logger.error('TicketsList: error occurred while settings up downloading map tiles for offline support: ' + JSON.stringify(error));
let appError = new AppError(false, 'Downloading map tiles for offline support failed.');
reject(appError);
}
});
Promise.all([promiseForStreetsLayerInit, promiseForSatelliteLayerInit])
.then(() => {
let geoJSONLayer = L.geoJSON(ticketDetail.work_area);
let _bounds = geoJSONLayer.getBounds();
// calculate tiles to cache based on the bounds and going down to a stated range of zoom levels
let tile_list = streetsLayer.calculateXYZListFromBounds(_bounds, ZOOM_MIN, ZOOM_MAX);
//let center = _bounds.getCenter();
//let tile_list = streetsLayer.calculateXYZListFromPyramid(center.lat, center.lng, ZOOM_MIN, ZOOM_MAX);
let promiseForStreetsLayerDownload = new Promise((resolve: Function, reject: Function) => {
streetsLayer.downloadXYZList(
// 1st param: a list of XYZ objects indicating tiles to download
tile_list,
// 2nd param: overwrite existing tiles on disk?
// if no then a tile already on disk will be kept, which can be a big time saver
false, //true,
// 3rd param: progress callback
// receives the number of tiles downloaded and the number of tiles total
// caller can calculate a percentage, update progress bar, etc.
function (done, total) {
var percent = Math.round(100 * done / total);
console.log(done + " / " + total + " = " + percent + "%");
},
// 4th param: complete callback
// no parameters are given, but we know we're done!
function () {
// for this demo, on success we use another L.TileLayer.Cordova feature and show the disk usage!
streetsLayer.getDiskUsage(function (filecount, bytes) {
var kilobytes = Math.round(bytes / 1024);
console.log("Done " + filecount + " files " + kilobytes + " kB");
});
resolve();
},
// 5th param: error callback
// parameter is the error message string
function (error) {
console.error("Failed; Error code: " + error.code);
reject();
}
);
});
let promiseForSatelliteLayerDownload = new Promise((resolve: Function, reject: Function) => {
satelliteLayer.downloadXYZList(
// 1st param: a list of XYZ objects indicating tiles to download
tile_list,
// 2nd param: overwrite existing tiles on disk?
// if no then a tile already on disk will be kept, which can be a big time saver
false, //true,
// 3rd param: progress callback
// receives the number of tiles downloaded and the number of tiles total
// caller can calculate a percentage, update progress bar, etc.
function (done, total) {
var percent = Math.round(100 * done / total);
console.log(done + " / " + total + " = " + percent + "%");
},
// 4th param: complete callback
// no parameters are given, but we know we're done!
function () {
// for this demo, on success we use another L.TileLayer.Cordova feature and show the disk usage!
streetsLayer.getDiskUsage(function (filecount, bytes) {
var kilobytes = Math.round(bytes / 1024);
console.log("Done " + filecount + " files " + kilobytes + " kB");
});
resolve();
},
// 5th param: error callback
// parameter is the error message string
function (error) {
console.error("Failed; Error code: " + error.code);
reject(error);
}
);
});
Promise.all([promiseForStreetsLayerDownload, promiseForSatelliteLayerDownload])
.then(() => {
resolve(ticketDetail);
})
.catch((error: any) => {
this.logger.error('TicketsList: error occurred while downloading map tiles for offline support: ' + JSON.stringify(error));
let appError = new AppError(false, 'Downloading map tiles for offline support failed.');
reject(appError);
});
})
.catch((appError: AppError) => {
reject(appError);
});
} else {
resolve(ticketDetail);
}
});
}and here is the code to load the map on a different page
loadMap() {
if (this.item && this.item.work_area) {
let ZOOM_MIN = 16;
let ZOOM_MAX = 20;
let FOLDER_NAME = 'OfflineTileLayer';
this.map = L.map("map", {
minZoom: ZOOM_MIN,
maxZoom: ZOOM_MAX,
zoomControl: false
});
let streetsLayer = null;
let satelliteLayer = null;
let promiseForStreetsLayerInit = new Promise((resolve: Function, reject: Function) => {
try {
streetsLayer = L.tileLayerCordova('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoon: ZOOM_MIN,
maxZoom: ZOOM_MAX,
id: 'mapbox.streets',
accessToken: MAPBOX_API_KEY,
// these are specific to L.TileLayer.Cordova and mostly specify where to store the tiles on disk
folder: FOLDER_NAME,
name: 'streetsLayer',
debug: true
}, () => {
resolve();
});
} catch (error) {
this.logger.error('TicketsList: error occurred while settings up downloading map tiles for offline support: ' + JSON.stringify(error));
let appError = new AppError(false, 'Downloading map tiles for offline support failed.');
reject(appError);
}
});
let promiseForSatelliteLayerInit = new Promise((resolve: Function, reject: Function) => {
try {
satelliteLayer = L.tileLayerCordova('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> | © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoon: ZOOM_MIN,
maxZoom: ZOOM_MAX,
id: 'mapbox.streets-satellite',
accessToken: MAPBOX_API_KEY,
// these are specific to L.TileLayer.Cordova and mostly specify where to store the tiles on disk
folder: FOLDER_NAME,
name: 'satelliteLayer',
debug: true
}, () => {
resolve();
});
} catch (error) {
this.logger.error('TicketsList: error occurred while settings up downloading map tiles for offline support: ' + JSON.stringify(error));
let appError = new AppError(false, 'Downloading map tiles for offline support failed.');
reject(appError);
}
});
Promise.all([promiseForStreetsLayerInit, promiseForSatelliteLayerInit])
.then(() => {
if (this.isOnline) {
streetsLayer.goOnline();
satelliteLayer.goOnline();
} else {
streetsLayer.goOffline();
satelliteLayer.goOffline();
}
streetsLayer.addTo(this.map);
let layerControl = L.control.layers({}, {});
layerControl.addBaseLayer(streetsLayer, 'Streets');
layerControl.addBaseLayer(satelliteLayer, 'Satellite');
this.map.layerControl = layerControl.addTo(this.map);
let geoJSONLayer = L.geoJSON(this.item.work_area);
let _bounds = geoJSONLayer.getBounds();
if (this.item.work_area.type == 'Point') {
this.map.fitBounds(_bounds);
geoJSONLayer.addTo(this.map);
} else {
let layerStyle = { fillColor: '#2190c4', color: '#25A0DA', weight: 3 };
geoJSONLayer.setStyle(() => { return layerStyle });
this.map.fitBounds(_bounds);
geoJSONLayer.addTo(this.map);
}
if (!this.isOnline) {
this.map.dragging.disable();
this.map.touchZoom.disable();
this.map.doubleClickZoom.disable();
this.map.scrollWheelZoom.disable();
this.map.boxZoom.disable();
}
}
}
gregallensworth
In my solution i need to store tiles for offline map support. I get bounds, invoke calculateXYZListFromBounds and download tiles using downloadXYZList. Everything is fine. However when I open the map in offline mode later, and leaflet tries to load tiles (from offline storage), some of the tiles are found and displayed on and some are not found For example, I see a lot of errors are below (/data/user/0/com.mobile.XXXXXXXXX/files/files/OfflineTileLayer//streetsLayer-17-30447-52707.png:1 GET file:///data/user/0/com.mobile.XXXXXX/files/files/OfflineTileLayer//streetsLayer-17-30447-52707.png net::ERR_FILE_NOT_FOUND).
I checked and the problem is that the urls generated by leaflet sometimes has different Y's For example for the above error, the first URL created by the lib is as below (there is not URL with ...52707.png
Note the difference in y - the leaflet asks for 52707 and calculateXYZListFromBounds/downloadXYZList used 52708
I use leaflet 1.0.2
Btw, if i set to calculate/download tiles for wide zoom range (for example 1-20) everything seems to be working fine but it takes too much tiles to download
Thanks you very much