From 302cb8c7b79a0b7708dce29912990914cb3c2eba Mon Sep 17 00:00:00 2001
From: Code WvS <code-wvs@quantentunnel.de>
Date: Sun, 22 Mar 2015 17:23:07 +0100
Subject: support tile caching (WIP)

---
 snap.html | 44 +++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 3 deletions(-)

(limited to 'snap.html')

diff --git a/snap.html b/snap.html
index 06843c8..4a7d5d1 100755
--- a/snap.html
+++ b/snap.html
@@ -11,6 +11,8 @@
         <script type="text/javascript" src="Leaflet.Coordinates-0.1.4.min.js"></script>
         <script type="text/javascript" src="leaflet-geodesy.js"></script>
         <script type="text/javascript" src="leaflet-pip.min.js"></script>
+        <script type="text/javascript" src="pouchdb-3.3.1.min.js"></script>
+        <script type="text/javascript" src="L.TileLayer.PouchDBCached.js"></script>
         <script type="text/javascript" src="peer.js"></script>
         <script type="text/javascript" src="morphic.js"></script>
         <script type="text/javascript" src="widgets.js"></script>
@@ -93,9 +95,46 @@
                     });
                 });
 
-                layer = L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.jpg70?access_token=pk.eyJ1IjoiY29kZS13dnMiLCJhIjoielU1N2dQayJ9.miUjtJaW7Y_Xx46dC6m0LA', {
+                // TODO: too much repeated code, shorten the url part
+                if ("connection" in navigator) {
+                    // mobile cordova app
+                    console.log('DEBUG - detected mobile');
+                    state = navigator.connection.type;
+                    // download everything & in high resolution
+                    if (state == Connection.ETHERNET || state == Connection.WIFI) {
+                        layer = L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiY29kZS13dnMiLCJhIjoielU1N2dQayJ9.miUjtJaW7Y_Xx46dC6m0LA', {
+                            useCache: true,
+                            cacheMaxAge: 604800000, // one week
                             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-                }).addTo(map);
+                        });
+                        new OSMBuildings(map).load();
+                    // download low-res and cache as much as possible
+                    // we do not need OSMBuildings here
+                    } else if (state == Connection.CELL) {
+                        layer = L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.jpg70?access_token=pk.eyJ1IjoiY29kZS13dnMiLCJhIjoielU1N2dQayJ9.miUjtJaW7Y_Xx46dC6m0LA', {
+                            useCache: true,
+                            cacheMaxAge: 604800000, // one week
+                            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                        });
+                    // shit, we're offline - let's hope there is something cached
+                    // OSMBuildings won't work, anyway
+                    } else {
+                        layer = L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.jpg70?access_token=pk.eyJ1IjoiY29kZS13dnMiLCJhIjoielU1N2dQayJ9.miUjtJaW7Y_Xx46dC6m0LA', {
+                            useCache: true,
+                            useOnlyCache: true,
+                            cacheMaxAge: 604800000, // one week
+                            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                        });
+                    }
+                } else {
+                    // desktop
+                    layer = L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiY29kZS13dnMiLCJhIjoielU1N2dQayJ9.miUjtJaW7Y_Xx46dC6m0LA', {
+                        useCache: true,
+                        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+                    });
+                    new OSMBuildings(map).load();
+                }
+                layer.addTo(map);
                 L.control.coordinates({
                     decimals: 7,
                     enableUserInput: false,
@@ -108,7 +147,6 @@
                 map.locate({watch: true, enableHighAccuracy: true});
 
                 // OSMBuildings provides fancy 3D buildings
-                new OSMBuildings(map).load();
 
                 // A Sprite's X position is mapped to longitude
                 // A Sprite's Y position is mapped to latitude
-- 
cgit v1.3.1