From 680bb397d29a1d52a60394d177bb5ffc200cdbb1 Mon Sep 17 00:00:00 2001
From: Andy Gup <agup2001@msn.com>
Date: Tue, 10 Jun 2014 14:16:13 -0600
Subject: [PATCH] download tiles now works

---
 samples/test2.html | 108 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 97 insertions(+), 11 deletions(-)

diff --git a/samples/test2.html b/samples/test2.html
index ca38571..61c4349 100644
--- a/samples/test2.html
+++ b/samples/test2.html
@@ -112,18 +112,27 @@
 
                 initAppCacheManager();
 
-                var tileLayer;
                 var _isOnline = true;
                 var defaultSymbol;
-                var busStopFeatureLayer;
-                var appCacheManager;
 
                 // Variables for editing handling
+                var busStopFeatureLayer;
                 var offlineFeaturesManager;
                 var pendingEdits = document.getElementById("pending-edits");
                 var imgOfflineIndicator = document.getElementById("img-offline-indicator");
 
+                // Variables for handling tiles
+                var tileLayer;
+                var _currentExtent = null;
+                var _wantToCancel;
+                var globalState = {};
+                var btnGetTiles = document.getElementById("btn-get-tiles");
+                // Important settings for determining which tile layers gets stored for offline use.
+                var minZoomAdjust = -1, maxZoomAdjust = 1, resetZoom = 18;
+                var EXTENT_BUFFER = 0; //buffers the map extent in meters
+
                 // Misc.
+                var appCacheManager;
                 var btnOnlineOffline = document.getElementById("btn-online-offline");
 
                 // Symbols and images
@@ -131,9 +140,6 @@
                 var redPinImage = new Image().src = redPinPath;
                 var bluePinPath = "../samples/images/blue-pin.png";
 
-                // Important settings for determining which tile layers gets stored for offline use.
-                var minZoomAdjust = -1, maxZoomAdjust = 1, resetZoom = 18;
-
                 // Modify symbol size based on screen size.
                 // Bigger screens get smaller symbols. Smaller screens get larger symbols.
                 if (document.documentElement.clientHeight > 768 || document.documentElement.clientWidth > 1024) {
@@ -161,7 +167,7 @@
 
                     //Make sure map shows up after a browser refresh
                     Offline.check();
-                    Offline.state === 'up' ? zoom = 18 : zoom = 17;
+                    Offline.state === 'up' ? resetZoom = 18 : resetZoom = 17;
 
                     tileLayer = new OfflineTilesEnabler("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",function(evt){
                         console.log("Tile Layer Loaded.");
@@ -185,7 +191,9 @@
                     busStopFeatureLayer.setRenderer(new SimpleRenderer(defaultSymbol));
 
                     busStopFeatureLayer.on("update-end",function(evt){
+                        on(btnGetTiles,"click",downloadTiles);
                         initOfflineFeaturesMgr();
+                        
                         var features = evt.target.graphics;
 
                         // Convert existing feature graphics into JSON.
@@ -204,8 +212,17 @@
                         })
                     });
 
+                    map.on("zoom-end",function(evt){
+                        _currentExtent = evt.extent;
+                    });
+
+                    map.on("pan-end",function(evt){
+                       _currentExtent = evt.extent;
+                    });
+
                     map.on("load",function(evt){
 
+                        _currentExtent = evt.map.extent;
                         updateOfflineUsage();
 
                         if(_isOnline == false){
@@ -275,16 +292,85 @@
                  * ************************************
                  */
 
+                /**
+                 * Manually starts the process to download and store tiles
+                 * in the local database
+                 */
+                function downloadTiles(){
+                    tileLayer.deleteAllTiles(function(success,err){
+                        if(success == false){
+                            alert("There was a problem deleting the tile cache");
+                        }
+                        else{
+                            console.log("success deleting tile cache");
+
+                            if( globalState.downloadState == 'downloading')
+                            {
+                                console.log("cancel!");
+                                _wantToCancel = true;
+                                btnGetTiles.innerHTML = "cancelling..";
+                            }
+                            else
+                            {
+                                var zoom = getMinMaxZoom();
+
+                                var extent = tileLayer.getExtentBuffer(EXTENT_BUFFER,_currentExtent);
+                                _wantToCancel = false;
+                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, reportProgress.bind(this));
+                                globalState.downloadState = 'downloading';
+                            }
+                        }
+                    }.bind(this))
+                }
+
+                /**
+                 * Reports the process while downloading tiles.
+                 */
+                function reportProgress(progress)
+                {
+                    console.log("downloading tiles...");
+                    if(progress.hasOwnProperty("countNow")){
+                        var percent = Math.floor(progress.countNow / progress.countMax * 100);
+                        btnGetTiles.innerHTML = 'Saving to phone ' + percent + "% - Tap to Cancel";
+                    }
+
+                    if( progress.finishedDownloading )
+                    {
+                        btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
+                        updateOfflineUsage();
+
+                        if( progress.cancelRequested )
+                        {
+                            globalState.downloadState = 'cancelled';
+                            alert("Tile download was cancelled");
+                        }
+                        else
+                        {
+                            globalState.downloadState = 'downloaded';
+                            alert("Tile download complete");
+                        }
+
+                        btnGetTiles.innerHTML = '1. Download Tiles';
+                    }
+                    return _wantToCancel; //determines if a cancel request has been issued
+                }
+
                 /**
                  * Utility function to validate min and max zoom settings of the map
                  */
                 function getMinMaxZoom(){
 
                     var zoom = {};
-                    var min = map.getLevel() + minZoomAdjust;
-                    var max = map.getLevel() + maxZoomAdjust;
-                    var mMaxZoom = map.getMaxZoom();
-                    var mMinZoom = map.getMinZoom();
+                    var min = tileLayer.getLevel() + minZoomAdjust;
+                    var max = tileLayer.getLevel() + maxZoomAdjust;
+                    var mMaxZoom;
+                    tileLayer.getMaxZoom(function(result){
+                        mMaxZoom = result;
+                    });
+                    var mMinZoom;
+                    tileLayer.getMinZoom(function(result){
+                        mMinZoom = result;
+                    });
                     zoom.max = Math.min(mMaxZoom, max);  //prevent errors by setting the tile layer floor
                     zoom.min = Math.max(mMinZoom, min);   //prevent errors by setting the tile layer ceiling