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.