CODEWITHSUNDEEP
androidcordovadictionarytilesleaflet
illwalkwithyou
illwalkwithyou

Reputation: 359

How to make map tiles load more efficiently using leaflet with an android app?

I am currently developing an android application that features a map using phonegap, cloudmade and leaflet. Is there a way I can somehow cache the map tiles on the android phone? Loading the map tiles from the server each time is quite slow.

Upvotes: 1

Views: 2016

Answers (1)

tbicr
tbicr

Reputation: 26080

This is only theoretic considerations and I don't known working implementations for leaflet. However I have some issue, but don't have time now to resolve it.

Web and phonegap storages:

  1. loacalstorage - synchronous, easy to implement with base64 url, small size 2.5-5MB (probably phonegap resolve localstorage small size issue).
  2. indexed db and web sql - asynchronous, size 50 MB (maybe more).
  3. phonegap file storage - asynchronous.

How implement:

Write own layer which will work with your storage, probably it will be difficult for asynchronous APIs.

You always can store tile as data url with base64 encoding. You can transform image by server url to data url with JS and canvas.

If you can use tile preloading easiest way to use file storage, because you can just use links to tiles on your file system.

For asychronous APIs you always can detect your tile by zoom, latitude and longitude: insert fake tile with zoom_lat_lng id and fake src, check tile in storage by this id, if tile found - load it, else load from server with caching.

UPD: See my caching solution with indexed db and web sql for example: https://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_site and example http://tbicr.github.com/OfflineMap/leaflet/index.html (now not fast on android).

Upvotes: 2

Related Questions