OfflineMap
OfflineMap copied to clipboard
Offline Map solution in web browser
Online Map examples in web browser
Main idea
Modern js map libraries support sync and async tiles loading. You can change this method to own where used some permanent storage. Each tile have unique src
so you can use unique id based on same data as src
to store tile data. All map scripts, styles and other files (marker images) can be placed to application cache manifest file.
Useful links
- http://gis.stackexchange.com/q/44813/31124
- http://stackoverflow.com/q/14113278/880326
Notes
This samples just proof of concept and if you should avoid use this solution if it posible because:
- cache can eat to many memory and trafic to cache
- cache of images can't be compressed
- cache can work slow especially for mobile browsers
- cache can't be shared between several domains, for each domain you should duplicate cache or use for example iframe with one domain to avoid duplication
If you can use any special application for offline maps as osmand then better use it.
If you can implement any proxy solution on your system for tiles storing then better use it.
Examples
Google Maps with localstorage:
Example and Code. This code can contradict Google Maps/Google Earth APIs Terms of Service par. 10.1.1.
Leaflet with IndexedDB and WebSQL:
Example and Code. MIT License.
You can find more examples with LeafLet and PouchDB there: http://tbicr.github.io/OfflineMap/.
Instead PouchDB also can used localForage, LargeLocalStorage and etc.
Mapbox (Modest Maps) with IndexedDB and WebSQL:
Example and Code. MIT License.
Open Layers with IndexedDB and WebSQL:
Example and Code. MIT License.