From 6c919336312e7433b81e71d7e0b052c915258e93 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 12:07:24 -0600 Subject: [PATCH 01/57] rename getstarted to getstarted-tiles.html --- demo/{getstarted.html => getstarted-tiles.html} | 2 +- demo/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename demo/{getstarted.html => getstarted-tiles.html} (99%) diff --git a/demo/getstarted.html b/demo/getstarted-tiles.html similarity index 99% rename from demo/getstarted.html rename to demo/getstarted-tiles.html index 43427959..c6aa720b 100644 --- a/demo/getstarted.html +++ b/demo/getstarted-tiles.html @@ -63,7 +63,7 @@
diff --git a/demo/index.html b/demo/index.html index aa0358c8..81442fac 100644 --- a/demo/index.html +++ b/demo/index.html @@ -34,7 +34,7 @@
From 2698bb8b893942c9829d177c8954ae8ddd8592e5 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 12:56:41 -0600 Subject: [PATCH 02/57] adds separate api doc for offlineTilesEnablerLayer --- doc/offlinetilesenablerlayer.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 doc/offlinetilesenablerlayer.md diff --git a/doc/offlinetilesenablerlayer.md b/doc/offlinetilesenablerlayer.md new file mode 100644 index 00000000..e69de29b From a9bfb4750d6329943c79d49c6e0d73d45ad65a34 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 12:57:14 -0600 Subject: [PATCH 03/57] Initial commit for api-doc page --- demo/api-doc.html | 162 +++++++++++++++++++++++++++++++++++++ demo/getstarted-tiles.html | 1 + demo/index.html | 1 + 3 files changed, 164 insertions(+) create mode 100644 demo/api-doc.html diff --git a/demo/api-doc.html b/demo/api-doc.html new file mode 100644 index 00000000..90b93b05 --- /dev/null +++ b/demo/api-doc.html @@ -0,0 +1,162 @@ + + + + + + + + + Offline-editor-js + + + + + + + + + + + + + + + + + + + + + + + +
+
+

API Docs

+

Documentation for all offline libraries in this repo.

+
+
+ +
+ +
+
+ +
+
+

Offline Tiles - Basic

+

The offline-tiles-basic-min.js library is for use with ArcGIS.com web maps and partial/intermittently offline use cases. + You won't be able to restart or reload your app when using this library offline. +

+
+
+ +
+
+ +
+
+

Offline Tiles - Advanced

+

The offline-tiles-advanced-min.js library is for use with tiled map services in partial or fully offline use cases. + If you have a requirement to reload or restart your app while offline you should use this library. +

+
+
+ +
+
+ +
+
+

Offline Features

+

The offline-edit-min.js library is for working with ArcGIS JS API points, lines and polygons in partial or fully offline use cases. +

+
+
+ +
+
+ +
+
+

Offline TPK

+

The offline-tpk-min.js library is for working with TPK files in partial or fully offline use cases. + TPK files are binary tile image packages. They can be used stand-alone or alongside tiled base maps. +

+
+
+ +
+
+ +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/demo/getstarted-tiles.html b/demo/getstarted-tiles.html index c6aa720b..fdb231ef 100644 --- a/demo/getstarted-tiles.html +++ b/demo/getstarted-tiles.html @@ -64,6 +64,7 @@
diff --git a/demo/index.html b/demo/index.html index 81442fac..13ca26f7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -35,6 +35,7 @@
From fed32633a674d0bf6149239f7ae40e59b653b896 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 13:08:01 -0600 Subject: [PATCH 04/57] updates to tiles api docs --- doc/offlinetilesenabler.md | 45 +++------------------------------ doc/offlinetilesenablerlayer.md | 41 ++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 42 deletions(-) diff --git a/doc/offlinetilesenabler.md b/doc/offlinetilesenabler.md index dfd0f817..88afe874 100644 --- a/doc/offlinetilesenabler.md +++ b/doc/offlinetilesenabler.md @@ -3,12 +3,10 @@ API Doc for OfflineTilesEnabler There are two different libraries for taking tiles offline: `offline-tiles-basic-min.js` and `offline-tiles-advanced-min.js`. The basic library is for use with ArcGIS.com web maps and partial/intermittently offline use cases. You won't be able to restart or reload your app when using this library offline. -If you have a requirement for restarting or reloading the app while offline then you should use the advanced library. The `offline-tiles-advanced-min.js` library lets you create a custom basemap layer that extends TiledMapServiceLayer. To view the docs for this library scroll down on this page. +If you have a requirement for restarting or reloading the app while offline then you should use the advanced library. The `offline-tiles-advanced-min.js` library lets you create a custom basemap layer that extends TiledMapServiceLayer. ##O.esri.Tiles.OfflineTilesEnabler -Extends and overrides a tiled map service. For use with ArcGIS.com maps or partial-offline situations that don't require a browser restart or reload. - -Provides the ability to customize the extent used to cut the tiles. See the detailed description of `basemap.prepareForOffline()` in the "How To Use" section below to learn different options. +The `offline-tiles-basic-min.js` library provides the following tools for working with with ArcGIS.com maps or tiled map services in partial-offline situations that don't require a browser restart or reload. ###Constructor Constructor | Description @@ -36,41 +34,4 @@ Methods | Returns | Description ###Properties Property | Description --- | --- -`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is to use the internal resource-proxy path: `libs/offline-editor-js/resource-proxy/proxy.php.` Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). - - - -##O.esri.Tiles.OfflineTilesEnablerLayer -Extends and overrides a tiled map service. This library can be used in situations where an offline browser restart or reload is required. - -###Constructor -Constructor | Description ---- | --- -`O.esri.Tiles.OfflineTilesEnablerLayer(url,callback,state)` | Creates an instance of the offlineTilesEnabler class. This library allows you to extend an ArcGISTiledMapServiceLayer with offline capability as well as manage the online/offline resynchronization process. Any Esri basemap REST endpoint should work. The state property is a boolean for specifying if the application is intializing the layer online (true) or offline (false). When you first load the map you should set this property to `true`. - - -###Methods -Methods | Returns | Description ---- | --- | --- -`goOffline()` | nothing | This method puts the layer in offline mode. When in offline mode, the layer will not fetch any tile from the remote server. It will look up the tiles in the indexed db database and display them in the layer. If the tile can't be found in the local database it will show up blank (even if there is actual connectivity). The pair of methods `goOffline()` and `goOnline() `allows the developer to manually control the behaviour of the layer. Used in conjunction with the offline dectection library, you can put the layer in the appropriate mode when the offline condition changes. -`goOnline()` | nothing | This method puts the layer in online mode. When in online mode, the layer will behave as regular layers, fetching all tiles from the remote server. If there is no internet connectivity the tiles may appear thanks to the browsers cache, but no attempt will be made to look up tiles in the local database. -`getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified extent and zoom level, and the estimated byte size of such tiles. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. -`getExtentBuffer(buffer,extent)`| Extent | Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. -`getTileUrlsByExtent(extent, level)` | Array | Returns an array of tile urls within a given map extent and zoom level. -`deleteAllTiles(callback)` | `callback(boolean, errors)` | Clears the local cache of tiles. -`getOfflineUsage(callback)` | `callback(size, error)` | Gets the size in bytes of the local tile cache. -`getTilePolygons(callback)` | `callback(polygon, error)` | Gets polygons representing all cached tiles. This is helpful to give users a visual feedback of the current content of the tile cache. -`saveToFile(filename, callback)` | `callback( boolean, error)` | Saves tile cache into a portable csv format. -`loadFromFile(filename, callback)` | `callback( boolean, error)` | Reads a csv file into local tile cache. -`estimateTileSize(callback)` | `callback(number)` | Retrieves one tile from a layer and then returns its size. -`prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. See the "How To Use" section below to learn more about customizing the use of this method. -`getMaxZoom(callback)` | `callback(number)` | Returns the maximum zoom level of the layer. -`getMinZoom(callback)` | `callback(number)` | Returns the minimum zoom level of the layer. - - -###Properties -Property | Description ---- | --- -`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is to use the internal resource-proxy path: `libs/offline-editor-js/resource-proxy/proxy.php.` Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). - - +`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is to use the internal resource-proxy path: `libs/offline-editor-js/resource-proxy/proxy.php.` Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). \ No newline at end of file diff --git a/doc/offlinetilesenablerlayer.md b/doc/offlinetilesenablerlayer.md index e69de29b..8141b855 100644 --- a/doc/offlinetilesenablerlayer.md +++ b/doc/offlinetilesenablerlayer.md @@ -0,0 +1,41 @@ +API Doc for OfflineTilesEnablerLayer +==================================== + +There are two different libraries for taking tiles offline: `offline-tiles-basic-min.js` and `offline-tiles-advanced-min.js`. The basic library is for use with ArcGIS.com web maps and partial/intermittently offline use cases. You won't be able to restart or reload your app when using this library offline. + +If you have a requirement for restarting or reloading the app while offline then you should use the advanced library. The `offline-tiles-advanced-min.js` library lets you create a custom basemap layer that extends TiledMapServiceLayer. + +##O.esri.Tiles.OfflineTilesEnablerLayer +The `offline-tiles-advanced-min.js` library provides the following tools for working with tiled map services. This library is designed for both partial and full offline use cases, and it will work if you have a requirement for browser reloads or restarts while offline. + +###Constructor +Constructor | Description +--- | --- +`O.esri.Tiles.OfflineTilesEnablerLayer(url,callback,state)` | Creates an instance of the offlineTilesEnabler class. This library allows you to extend an ArcGISTiledMapServiceLayer with offline capability as well as manage the online/offline resynchronization process. Any Esri basemap REST endpoint should work. The state property is a boolean for specifying if the application is intializing the layer online (true) or offline (false). When you first load the map you should set this property to `true`. + + +###Methods +Methods | Returns | Description +--- | --- | --- +`goOffline()` | nothing | This method puts the layer in offline mode. When in offline mode, the layer will not fetch any tile from the remote server. It will look up the tiles in the indexed db database and display them in the layer. If the tile can't be found in the local database it will show up blank (even if there is actual connectivity). The pair of methods `goOffline()` and `goOnline() `allows the developer to manually control the behaviour of the layer. Used in conjunction with the offline dectection library, you can put the layer in the appropriate mode when the offline condition changes. +`goOnline()` | nothing | This method puts the layer in online mode. When in online mode, the layer will behave as regular layers, fetching all tiles from the remote server. If there is no internet connectivity the tiles may appear thanks to the browsers cache, but no attempt will be made to look up tiles in the local database. +`getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified extent and zoom level, and the estimated byte size of such tiles. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. +`getExtentBuffer(buffer,extent)`| Extent | Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. +`getTileUrlsByExtent(extent, level)` | Array | Returns an array of tile urls within a given map extent and zoom level. +`deleteAllTiles(callback)` | `callback(boolean, errors)` | Clears the local cache of tiles. +`getOfflineUsage(callback)` | `callback(size, error)` | Gets the size in bytes of the local tile cache. +`getTilePolygons(callback)` | `callback(polygon, error)` | Gets polygons representing all cached tiles. This is helpful to give users a visual feedback of the current content of the tile cache. +`saveToFile(filename, callback)` | `callback( boolean, error)` | Saves tile cache into a portable csv format. +`loadFromFile(filename, callback)` | `callback( boolean, error)` | Reads a csv file into local tile cache. +`estimateTileSize(callback)` | `callback(number)` | Retrieves one tile from a layer and then returns its size. +`prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. See the "How To Use" section below to learn more about customizing the use of this method. +`getMaxZoom(callback)` | `callback(number)` | Returns the maximum zoom level of the layer. +`getMinZoom(callback)` | `callback(number)` | Returns the minimum zoom level of the layer. + + +###Properties +Property | Description +--- | --- +`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is null. All ArcGIS Online-based services uses CORS. If you are using a non-CORS enabled server you'll need a proxy. Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). + + From 3bba39c1e5983e2ec17009ed8b20c2466bd4b9e1 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 13:11:50 -0600 Subject: [PATCH 05/57] updates to features and tpk api doc --- doc/offlinefeaturesmanager.md | 4 ++-- doc/tpklayer.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/doc/offlinefeaturesmanager.md b/doc/offlinefeaturesmanager.md index 63b1004e..2f3ace26 100644 --- a/doc/offlinefeaturesmanager.md +++ b/doc/offlinefeaturesmanager.md @@ -1,8 +1,8 @@ API OfflineFeaturesManager -================================== +========================== ##O.esri.Edit.OfflineFeaturesManager -Extends and overrides a feature layer. This library allows you to extend esri.layers.FeatureLayer objects with offline capability and manage the resync process. +The `offline-edit-min.js` library provides the following tools for working with esri.layers.FeatureLayer objects while partially or fully offline. ###Constructor diff --git a/doc/tpklayer.md b/doc/tpklayer.md index 80c9800f..e22c6e0b 100644 --- a/doc/tpklayer.md +++ b/doc/tpklayer.md @@ -3,7 +3,7 @@ API Doc for TPKLayer ##O.esri.TPK.TPKLayer -Extends a tiled map service and provides the ability to display tiles from a .tpk (ArcGIS Tile Page). +The `offline-tpk-min.js` library extends a tiled map service and provides the following tools for working with and displaying tiles from a .tpk file (ArcGIS Tile Package). ###Constructor From 8aefee64ab11afbeb387554b14a613b5210c8700 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 14:43:54 -0600 Subject: [PATCH 06/57] replace api doc links in readme --- README.md | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/README.md b/README.md index 211162c3..241b2853 100644 --- a/README.md +++ b/README.md @@ -35,22 +35,7 @@ __Attachment Support__: Attachments are supported with some limitations. See doc #API Doc -##Offline Editing of Geographic Features -Extends and overrides an ArcGIS Feature Layer. This library allows you to extend esri.layers.FeatureLayer with offline capabilities and to manage the resync process. - -* __Click [here](doc/offlinefeaturesmanager.md) to see the full API doc for `offline-edit-min.js`__ - - -##Offline Mapping Tiles -Extends and overrides a tiled map service. Provides the ability to customize the extent used to cut the tiles. See the detailed description of basemap.prepareForOffline() in the "How To Use" section to learn different options. - -* __Click [here](doc/offlinetilesenabler.md) to see the full API doc for `offline-tiles-basic-min.js and offline-tiles-advanced-min.js`__ - -##TPKLayer - -You can display TPK files with this library. TPK's are binary tile package files. Extends TileMapServiceLayer. Go [here](http://resources.arcgis.com/en/help/main/10.1/index.html#//00170000017w000000) for more information on how to create a TPK file. - -* __Click [here](doc/tpklayer.md) to see the full API doc for `offline-tpk-min.js`__ +Go __[here](demo/api-doc.html)__ for a listing of the API docs. ##How to use From a396847b43aca56626c8e114236dc6f78f8672ea Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 14:44:38 -0600 Subject: [PATCH 07/57] Rebuilt Get Started nav menu --- demo/api-doc.html | 2 +- demo/getstarted-agol.html | 736 +++++++++++++++++++++++++++++++++++ demo/getstarted-editing.html | 736 +++++++++++++++++++++++++++++++++++ demo/getstarted-tiles.html | 15 +- demo/getstarted-tpk.html | 736 +++++++++++++++++++++++++++++++++++ demo/index.html | 13 +- 6 files changed, 2234 insertions(+), 4 deletions(-) create mode 100644 demo/getstarted-agol.html create mode 100644 demo/getstarted-editing.html create mode 100644 demo/getstarted-tpk.html diff --git a/demo/api-doc.html b/demo/api-doc.html index 90b93b05..9efba7cb 100644 --- a/demo/api-doc.html +++ b/demo/api-doc.html @@ -74,7 +74,7 @@

API Docs

-

Documentation for all offline libraries in this repo.

+

Documentation for the offline JavaScript libraries in this repo.

diff --git a/demo/getstarted-agol.html b/demo/getstarted-agol.html new file mode 100644 index 00000000..85d32e7a --- /dev/null +++ b/demo/getstarted-agol.html @@ -0,0 +1,736 @@ + + + + + + + + + Offline-editor-js + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Getting Started

+

Basic steps for working with ArcGIS.com base maps for offline.

+ +
+
+ +
+ +
+
+ + + +
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references. Then test to make sure map loads.

+
+ 
+                        
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                            <title>Simple Map</title>
+                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                            <style>
+                            html, body, #map {
+                            height: 100%;
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                            }
+                            body {
+                            background-color: #000000;
+                            overflow: hidden;
+                            font-family: "Trebuchet MS";
+                            }
+                            </style>
+
+                            <!-- Include a reference to offline.js which detects online/offline conditions -->
+                            <script src="../vendor/offline/offline.min.js"></script>
+                            <script>
+                            // Set the online/offline detection options.
+                            // More info at: http://github.hubspot.com/offline/docs/welcome/
+                            Offline.options = {
+                            checks: {
+                            image: {
+                            url: function() {
+                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                            }
+                            },
+                            active: 'image'
+                            }
+                            }
+                            </script>
+
+                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                            <script src="http://js.arcgis.com/3.10/"></script>
+                            </head>
+
+                            <body>
+                            <div id="map"></div>
+
+                            <script>
+                            var map;
+
+                            // Make sure to reference the tiles library within the require statement!
+                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+                            map = new Map("map", {
+                            basemap: "topo",
+                            center: [-122.45, 37.75], // longitude, latitude
+                            zoom: 13
+                            });
+                            });
+                            </script>
+                            </body>
+                            </html>
+
+                        
+
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Configure tiled basemap to work offline

+

This initializes the offline-editor-js library. Test to make sure map loads.

+
+ + 
+                        
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                            <title>Simple Map</title>
+                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                            <style>
+                            html, body, #map {
+                            height: 100%;
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                            }
+                            body {
+                            background-color: #000000;
+                            overflow: hidden;
+                            font-family: "Trebuchet MS";
+                            }
+                            </style>
+
+                            <!-- Include a reference to offline.js which detects online/offline conditions -->
+                            <script src="../vendor/offline/offline.min.js"></script>
+                            <script>
+                            // Set the online/offline detection options.
+                            // More info at: http://github.hubspot.com/offline/docs/welcome/
+                            Offline.options = {
+                            checks: {
+                            image: {
+                            url: function() {
+                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                            }
+                            },
+                            active: 'image'
+                            }
+                            }
+                            </script>
+
+                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                            <script src="http://js.arcgis.com/3.10/"></script>
+                            </head>
+
+                            <body>
+                            <div id="map"></div>
+
+                            <script>
+                            var map;
+
+                            // Make sure to reference the offline tiles library within the require statement!
+                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+
+                            // Check if browser state is online or offline
+                            Offline.check();
+                            Offline.on('up down', updateState );
+
+                            // Initialize Esri.Map
+                            map = new Map("map", {
+                            //basemap: "topo", // comment out this basemap!
+                            center: [-122.45, 37.75], // longitude, latitude
+                            zoom: 13
+                            });
+
+                            // Now we initialize a topo tiled basemap service to be offline-enabled.
+                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                            function(evt){
+                            console.log("Offline tile lib enabled. App is: " + Offline.state);
+                            },
+                            true);
+
+                            // Add our offline tile layer to the map instead of using the default basemap!
+                            map.addLayer(tileLayer);
+
+                            // Set the tileLayer online or offline.
+                            // When set to offline, the map will look for tiles in the tiles database
+                            function updateState(){
+                            if(Offline.state === 'up'){
+                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                            }
+                            else{
+                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                            }
+                            }
+
+                            });
+                            </script>
+                            </body>
+                            </html>
+
+                        
+
+
NOTE: Replace paths with your references.
+ +
+ +
+

Step 4: Configure tiles download.

+

Enable the ability to download tiles as well the ability to toggle online and offline.

+
+ + + +
+ + +
+
+
+                            
+
+                                <!DOCTYPE html>
+                                <html>
+                                <head>
+                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                                <title>Simple Map</title>
+                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                                <style>
+                                html, body, #map {
+                                height: 100%;
+                                width: 100%;
+                                margin: 0;
+                                padding: 0;
+                                }
+                                body {
+                                background-color: #000000;
+                                overflow: hidden;
+                                font-family: "Trebuchet MS";
+                                }
+                                </style>
+
+                                <!-- Include a reference to offline.js which detects online/offline conditions -->
+                                <script src="../vendor/offline/offline.min.js"></script>
+                                <script>
+                                // Set the online/offline detection options.
+                                // More info at: http://github.hubspot.com/offline/docs/welcome/
+                                Offline.options = {
+                                checks: {
+                                image: {
+                                url: function() {
+                                return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                                (Math.floor(Math.random() * 1000000000));
+                                }
+                                },
+                                active: 'image'
+                                }
+                                }
+                                </script>
+
+                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                                <script src="http://js.arcgis.com/3.10/"></script>
+                                </head>
+
+                                <body>
+
+                                <!-- Create two buttons -->
+                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
+                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
+                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
+
+                                <div id="map"></div>
+
+                                <script>
+                                var map;
+
+                                // Make sure to reference the offline tiles library within the require statement!
+                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
+                                function(Map,on){
+
+                                // Check if browser state is online or offline
+                                Offline.check();
+                                Offline.on('up down', updateState );
+
+                                // For cancelling the download of tiles
+                                var _wantToCancel;
+
+                                // Set up min and max boundaries for retrieving tiles
+                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
+
+                                // Set up button click listeners.
+                                var btnGetTiles = document.getElementById("btn-get-tiles");
+                                var btnOnlineOffline = document.getElementById("btn-online-offline");
+                                var btnPanLeft = document.getElementById("btn-pan-left");
+
+                                on(btnGetTiles,"click",downloadTiles);
+                                on(btnOnlineOffline,"click",goOnlineOffline);
+                                on(btnPanLeft,"click",panLeft);
+
+                                // Initialize Esri.Map
+                                map = new Map("map", {
+                                //basemap: "topo", // comment out this basemap!
+                                center: [-122.45, 37.75], // longitude, latitude
+                                zoom: 13
+                                });
+
+                                // Now we initialize a topo tiled basemap service to be offline-enabled.
+                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                                function(evt){
+                                console.log("Offline tile lib enabled. App is: " + Offline.state);
+                                },
+                                true);
+
+                                // Set the min and max zoom levels for when retrieving tiles
+                                // This helps manage the amount of database space used.
+                                map.on("load",function(evt){
+                                tileLayer.getMaxZoom(function(result){
+                                mMaxZoom = result;
+                                });
+                                tileLayer.getMinZoom(function(result){
+                                mMinZoom = result;
+                                });
+                                })
+
+                                // Add our offline tile layer to the map instead of using the default basemap!
+                                map.addLayer(tileLayer);
+
+                                function downloadTiles(){
+
+                                // First we need to empty the database.
+                                tileLayer.deleteAllTiles(function(success,err){
+
+                                var zoom = getMinMaxZoom();
+                                var extent = tileLayer.getExtentBuffer(0,map.extent);
+
+                                // Begin downloading tiles
+                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
+
+                                if( progress.cancelRequested )
+                                {
+                                alert("Tile download was cancelled");
+                                }
+                                else
+                                {
+                                alert("Tile download complete");
+                                }
+
+                                btnGetTiles.innerHTML = '1. Download Tiles';
+                                }
+                                return _wantToCancel; //determines if a cancel request has been issued
+                                });
+                                });
+                                }
+
+                                // Force the tileLayer between online and offline
+                                function goOnlineOffline(){
+                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
+                                btnOnlineOffline.innerHTML = "2. Go Online";
+                                tileLayer.goOffline();
+                                document.body.style.backgroundColor = "red";
+                                console.log("tileLayer is offline");
+                                }
+                                else{
+                                btnOnlineOffline.innerHTML = "2. Go Offline";
+                                tileLayer.goOnline();
+                                document.body.style.backgroundColor = "black";
+                                console.log("tileLayer is online");
+                                }
+                                }
+
+
+                                // Set the tileLayer online or offline.
+                                // When set to offline, the map will look for tiles in the tiles database
+                                function updateState(){
+                                if(Offline.state === 'up'){
+                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                                }
+                                else{
+                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                                }
+                                }
+
+                                // Utility function to validate min and max zoom settings of the map
+                                function getMinMaxZoom(){
+
+                                var zoom = {};
+                                var min = tileLayer.getLevel() + minZoomAdjust;
+                                var max = tileLayer.getLevel() + maxZoomAdjust;
+                                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
+
+                                return zoom;
+                                }
+
+                                function panLeft(){
+                                map.panLeft();
+                                }
+
+                                });
+                                </script>
+                                </body>
+                                </html>
+
+                            
+
+
NOTE: Replace paths with your references.
+
+ +
+
+
+
+ + + +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html new file mode 100644 index 00000000..b75afd28 --- /dev/null +++ b/demo/getstarted-editing.html @@ -0,0 +1,736 @@ + + + + + + + + + Offline-editor-js + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Getting Started

+

Basic steps for working with Editing of geographic features for offline.

+ +
+
+ +
+ +
+
+ + + +
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references. Then test to make sure map loads.

+
+ 
+                        
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                            <title>Simple Map</title>
+                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                            <style>
+                            html, body, #map {
+                            height: 100%;
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                            }
+                            body {
+                            background-color: #000000;
+                            overflow: hidden;
+                            font-family: "Trebuchet MS";
+                            }
+                            </style>
+
+                            <!-- Include a reference to offline.js which detects online/offline conditions -->
+                            <script src="../vendor/offline/offline.min.js"></script>
+                            <script>
+                            // Set the online/offline detection options.
+                            // More info at: http://github.hubspot.com/offline/docs/welcome/
+                            Offline.options = {
+                            checks: {
+                            image: {
+                            url: function() {
+                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                            }
+                            },
+                            active: 'image'
+                            }
+                            }
+                            </script>
+
+                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                            <script src="http://js.arcgis.com/3.10/"></script>
+                            </head>
+
+                            <body>
+                            <div id="map"></div>
+
+                            <script>
+                            var map;
+
+                            // Make sure to reference the tiles library within the require statement!
+                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+                            map = new Map("map", {
+                            basemap: "topo",
+                            center: [-122.45, 37.75], // longitude, latitude
+                            zoom: 13
+                            });
+                            });
+                            </script>
+                            </body>
+                            </html>
+
+                        
+
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Configure tiled basemap to work offline

+

This initializes the offline-editor-js library. Test to make sure map loads.

+
+ + 
+                        
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                            <title>Simple Map</title>
+                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                            <style>
+                            html, body, #map {
+                            height: 100%;
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                            }
+                            body {
+                            background-color: #000000;
+                            overflow: hidden;
+                            font-family: "Trebuchet MS";
+                            }
+                            </style>
+
+                            <!-- Include a reference to offline.js which detects online/offline conditions -->
+                            <script src="../vendor/offline/offline.min.js"></script>
+                            <script>
+                            // Set the online/offline detection options.
+                            // More info at: http://github.hubspot.com/offline/docs/welcome/
+                            Offline.options = {
+                            checks: {
+                            image: {
+                            url: function() {
+                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                            }
+                            },
+                            active: 'image'
+                            }
+                            }
+                            </script>
+
+                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                            <script src="http://js.arcgis.com/3.10/"></script>
+                            </head>
+
+                            <body>
+                            <div id="map"></div>
+
+                            <script>
+                            var map;
+
+                            // Make sure to reference the offline tiles library within the require statement!
+                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+
+                            // Check if browser state is online or offline
+                            Offline.check();
+                            Offline.on('up down', updateState );
+
+                            // Initialize Esri.Map
+                            map = new Map("map", {
+                            //basemap: "topo", // comment out this basemap!
+                            center: [-122.45, 37.75], // longitude, latitude
+                            zoom: 13
+                            });
+
+                            // Now we initialize a topo tiled basemap service to be offline-enabled.
+                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                            function(evt){
+                            console.log("Offline tile lib enabled. App is: " + Offline.state);
+                            },
+                            true);
+
+                            // Add our offline tile layer to the map instead of using the default basemap!
+                            map.addLayer(tileLayer);
+
+                            // Set the tileLayer online or offline.
+                            // When set to offline, the map will look for tiles in the tiles database
+                            function updateState(){
+                            if(Offline.state === 'up'){
+                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                            }
+                            else{
+                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                            }
+                            }
+
+                            });
+                            </script>
+                            </body>
+                            </html>
+
+                        
+
+
NOTE: Replace paths with your references.
+ +
+ +
+

Step 4: Configure tiles download.

+

Enable the ability to download tiles as well the ability to toggle online and offline.

+
+ + + +
+ + +
+
+
+                            
+
+                                <!DOCTYPE html>
+                                <html>
+                                <head>
+                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                                <title>Simple Map</title>
+                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                                <style>
+                                html, body, #map {
+                                height: 100%;
+                                width: 100%;
+                                margin: 0;
+                                padding: 0;
+                                }
+                                body {
+                                background-color: #000000;
+                                overflow: hidden;
+                                font-family: "Trebuchet MS";
+                                }
+                                </style>
+
+                                <!-- Include a reference to offline.js which detects online/offline conditions -->
+                                <script src="../vendor/offline/offline.min.js"></script>
+                                <script>
+                                // Set the online/offline detection options.
+                                // More info at: http://github.hubspot.com/offline/docs/welcome/
+                                Offline.options = {
+                                checks: {
+                                image: {
+                                url: function() {
+                                return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                                (Math.floor(Math.random() * 1000000000));
+                                }
+                                },
+                                active: 'image'
+                                }
+                                }
+                                </script>
+
+                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                                <script src="http://js.arcgis.com/3.10/"></script>
+                                </head>
+
+                                <body>
+
+                                <!-- Create two buttons -->
+                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
+                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
+                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
+
+                                <div id="map"></div>
+
+                                <script>
+                                var map;
+
+                                // Make sure to reference the offline tiles library within the require statement!
+                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
+                                function(Map,on){
+
+                                // Check if browser state is online or offline
+                                Offline.check();
+                                Offline.on('up down', updateState );
+
+                                // For cancelling the download of tiles
+                                var _wantToCancel;
+
+                                // Set up min and max boundaries for retrieving tiles
+                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
+
+                                // Set up button click listeners.
+                                var btnGetTiles = document.getElementById("btn-get-tiles");
+                                var btnOnlineOffline = document.getElementById("btn-online-offline");
+                                var btnPanLeft = document.getElementById("btn-pan-left");
+
+                                on(btnGetTiles,"click",downloadTiles);
+                                on(btnOnlineOffline,"click",goOnlineOffline);
+                                on(btnPanLeft,"click",panLeft);
+
+                                // Initialize Esri.Map
+                                map = new Map("map", {
+                                //basemap: "topo", // comment out this basemap!
+                                center: [-122.45, 37.75], // longitude, latitude
+                                zoom: 13
+                                });
+
+                                // Now we initialize a topo tiled basemap service to be offline-enabled.
+                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                                function(evt){
+                                console.log("Offline tile lib enabled. App is: " + Offline.state);
+                                },
+                                true);
+
+                                // Set the min and max zoom levels for when retrieving tiles
+                                // This helps manage the amount of database space used.
+                                map.on("load",function(evt){
+                                tileLayer.getMaxZoom(function(result){
+                                mMaxZoom = result;
+                                });
+                                tileLayer.getMinZoom(function(result){
+                                mMinZoom = result;
+                                });
+                                })
+
+                                // Add our offline tile layer to the map instead of using the default basemap!
+                                map.addLayer(tileLayer);
+
+                                function downloadTiles(){
+
+                                // First we need to empty the database.
+                                tileLayer.deleteAllTiles(function(success,err){
+
+                                var zoom = getMinMaxZoom();
+                                var extent = tileLayer.getExtentBuffer(0,map.extent);
+
+                                // Begin downloading tiles
+                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
+
+                                if( progress.cancelRequested )
+                                {
+                                alert("Tile download was cancelled");
+                                }
+                                else
+                                {
+                                alert("Tile download complete");
+                                }
+
+                                btnGetTiles.innerHTML = '1. Download Tiles';
+                                }
+                                return _wantToCancel; //determines if a cancel request has been issued
+                                });
+                                });
+                                }
+
+                                // Force the tileLayer between online and offline
+                                function goOnlineOffline(){
+                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
+                                btnOnlineOffline.innerHTML = "2. Go Online";
+                                tileLayer.goOffline();
+                                document.body.style.backgroundColor = "red";
+                                console.log("tileLayer is offline");
+                                }
+                                else{
+                                btnOnlineOffline.innerHTML = "2. Go Offline";
+                                tileLayer.goOnline();
+                                document.body.style.backgroundColor = "black";
+                                console.log("tileLayer is online");
+                                }
+                                }
+
+
+                                // Set the tileLayer online or offline.
+                                // When set to offline, the map will look for tiles in the tiles database
+                                function updateState(){
+                                if(Offline.state === 'up'){
+                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                                }
+                                else{
+                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                                }
+                                }
+
+                                // Utility function to validate min and max zoom settings of the map
+                                function getMinMaxZoom(){
+
+                                var zoom = {};
+                                var min = tileLayer.getLevel() + minZoomAdjust;
+                                var max = tileLayer.getLevel() + maxZoomAdjust;
+                                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
+
+                                return zoom;
+                                }
+
+                                function panLeft(){
+                                map.panLeft();
+                                }
+
+                                });
+                                </script>
+                                </body>
+                                </html>
+
+                            
+
+
NOTE: Replace paths with your references.
+
+ +
+
+
+
+ + + +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/getstarted-tiles.html b/demo/getstarted-tiles.html index fdb231ef..4ac391f1 100644 --- a/demo/getstarted-tiles.html +++ b/demo/getstarted-tiles.html @@ -63,7 +63,18 @@
@@ -74,7 +85,7 @@

Getting Started

-

Basic steps for working with web map tiles while offline.

+

Basic steps for working with tiled base map services for offline.

diff --git a/demo/getstarted-tpk.html b/demo/getstarted-tpk.html new file mode 100644 index 00000000..54887f80 --- /dev/null +++ b/demo/getstarted-tpk.html @@ -0,0 +1,736 @@ + + + + + + + + + Offline-editor-js + + + + + + + + + + + + + + + + + + + + + + + +
+
+

Getting Started

+

Basic steps for working with TPK pages for offline.

+ +
+
+ +
+ +
+
+ + + +
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references. Then test to make sure map loads.

+
+ 
+                        
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                            <title>Simple Map</title>
+                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                            <style>
+                            html, body, #map {
+                            height: 100%;
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                            }
+                            body {
+                            background-color: #000000;
+                            overflow: hidden;
+                            font-family: "Trebuchet MS";
+                            }
+                            </style>
+
+                            <!-- Include a reference to offline.js which detects online/offline conditions -->
+                            <script src="../vendor/offline/offline.min.js"></script>
+                            <script>
+                            // Set the online/offline detection options.
+                            // More info at: http://github.hubspot.com/offline/docs/welcome/
+                            Offline.options = {
+                            checks: {
+                            image: {
+                            url: function() {
+                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                            }
+                            },
+                            active: 'image'
+                            }
+                            }
+                            </script>
+
+                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                            <script src="http://js.arcgis.com/3.10/"></script>
+                            </head>
+
+                            <body>
+                            <div id="map"></div>
+
+                            <script>
+                            var map;
+
+                            // Make sure to reference the tiles library within the require statement!
+                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+                            map = new Map("map", {
+                            basemap: "topo",
+                            center: [-122.45, 37.75], // longitude, latitude
+                            zoom: 13
+                            });
+                            });
+                            </script>
+                            </body>
+                            </html>
+
+                        
+
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Configure tiled basemap to work offline

+

This initializes the offline-editor-js library. Test to make sure map loads.

+
+ + 
+                        
+                            <!DOCTYPE html>
+                            <html>
+                            <head>
+                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                            <title>Simple Map</title>
+                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                            <style>
+                            html, body, #map {
+                            height: 100%;
+                            width: 100%;
+                            margin: 0;
+                            padding: 0;
+                            }
+                            body {
+                            background-color: #000000;
+                            overflow: hidden;
+                            font-family: "Trebuchet MS";
+                            }
+                            </style>
+
+                            <!-- Include a reference to offline.js which detects online/offline conditions -->
+                            <script src="../vendor/offline/offline.min.js"></script>
+                            <script>
+                            // Set the online/offline detection options.
+                            // More info at: http://github.hubspot.com/offline/docs/welcome/
+                            Offline.options = {
+                            checks: {
+                            image: {
+                            url: function() {
+                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                            }
+                            },
+                            active: 'image'
+                            }
+                            }
+                            </script>
+
+                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                            <script src="http://js.arcgis.com/3.10/"></script>
+                            </head>
+
+                            <body>
+                            <div id="map"></div>
+
+                            <script>
+                            var map;
+
+                            // Make sure to reference the offline tiles library within the require statement!
+                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+
+                            // Check if browser state is online or offline
+                            Offline.check();
+                            Offline.on('up down', updateState );
+
+                            // Initialize Esri.Map
+                            map = new Map("map", {
+                            //basemap: "topo", // comment out this basemap!
+                            center: [-122.45, 37.75], // longitude, latitude
+                            zoom: 13
+                            });
+
+                            // Now we initialize a topo tiled basemap service to be offline-enabled.
+                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                            function(evt){
+                            console.log("Offline tile lib enabled. App is: " + Offline.state);
+                            },
+                            true);
+
+                            // Add our offline tile layer to the map instead of using the default basemap!
+                            map.addLayer(tileLayer);
+
+                            // Set the tileLayer online or offline.
+                            // When set to offline, the map will look for tiles in the tiles database
+                            function updateState(){
+                            if(Offline.state === 'up'){
+                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                            }
+                            else{
+                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                            }
+                            }
+
+                            });
+                            </script>
+                            </body>
+                            </html>
+
+                        
+
+
NOTE: Replace paths with your references.
+ +
+ +
+

Step 4: Configure tiles download.

+

Enable the ability to download tiles as well the ability to toggle online and offline.

+
+ + + +
+ + +
+
+
+                            
+
+                                <!DOCTYPE html>
+                                <html>
+                                <head>
+                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+                                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+                                <title>Simple Map</title>
+                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+                                <style>
+                                html, body, #map {
+                                height: 100%;
+                                width: 100%;
+                                margin: 0;
+                                padding: 0;
+                                }
+                                body {
+                                background-color: #000000;
+                                overflow: hidden;
+                                font-family: "Trebuchet MS";
+                                }
+                                </style>
+
+                                <!-- Include a reference to offline.js which detects online/offline conditions -->
+                                <script src="../vendor/offline/offline.min.js"></script>
+                                <script>
+                                // Set the online/offline detection options.
+                                // More info at: http://github.hubspot.com/offline/docs/welcome/
+                                Offline.options = {
+                                checks: {
+                                image: {
+                                url: function() {
+                                return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                                (Math.floor(Math.random() * 1000000000));
+                                }
+                                },
+                                active: 'image'
+                                }
+                                }
+                                </script>
+
+                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+                                <script src="http://js.arcgis.com/3.10/"></script>
+                                </head>
+
+                                <body>
+
+                                <!-- Create two buttons -->
+                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
+                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
+                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
+
+                                <div id="map"></div>
+
+                                <script>
+                                var map;
+
+                                // Make sure to reference the offline tiles library within the require statement!
+                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
+                                function(Map,on){
+
+                                // Check if browser state is online or offline
+                                Offline.check();
+                                Offline.on('up down', updateState );
+
+                                // For cancelling the download of tiles
+                                var _wantToCancel;
+
+                                // Set up min and max boundaries for retrieving tiles
+                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
+
+                                // Set up button click listeners.
+                                var btnGetTiles = document.getElementById("btn-get-tiles");
+                                var btnOnlineOffline = document.getElementById("btn-online-offline");
+                                var btnPanLeft = document.getElementById("btn-pan-left");
+
+                                on(btnGetTiles,"click",downloadTiles);
+                                on(btnOnlineOffline,"click",goOnlineOffline);
+                                on(btnPanLeft,"click",panLeft);
+
+                                // Initialize Esri.Map
+                                map = new Map("map", {
+                                //basemap: "topo", // comment out this basemap!
+                                center: [-122.45, 37.75], // longitude, latitude
+                                zoom: 13
+                                });
+
+                                // Now we initialize a topo tiled basemap service to be offline-enabled.
+                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                                function(evt){
+                                console.log("Offline tile lib enabled. App is: " + Offline.state);
+                                },
+                                true);
+
+                                // Set the min and max zoom levels for when retrieving tiles
+                                // This helps manage the amount of database space used.
+                                map.on("load",function(evt){
+                                tileLayer.getMaxZoom(function(result){
+                                mMaxZoom = result;
+                                });
+                                tileLayer.getMinZoom(function(result){
+                                mMinZoom = result;
+                                });
+                                })
+
+                                // Add our offline tile layer to the map instead of using the default basemap!
+                                map.addLayer(tileLayer);
+
+                                function downloadTiles(){
+
+                                // First we need to empty the database.
+                                tileLayer.deleteAllTiles(function(success,err){
+
+                                var zoom = getMinMaxZoom();
+                                var extent = tileLayer.getExtentBuffer(0,map.extent);
+
+                                // Begin downloading tiles
+                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
+
+                                if( progress.cancelRequested )
+                                {
+                                alert("Tile download was cancelled");
+                                }
+                                else
+                                {
+                                alert("Tile download complete");
+                                }
+
+                                btnGetTiles.innerHTML = '1. Download Tiles';
+                                }
+                                return _wantToCancel; //determines if a cancel request has been issued
+                                });
+                                });
+                                }
+
+                                // Force the tileLayer between online and offline
+                                function goOnlineOffline(){
+                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
+                                btnOnlineOffline.innerHTML = "2. Go Online";
+                                tileLayer.goOffline();
+                                document.body.style.backgroundColor = "red";
+                                console.log("tileLayer is offline");
+                                }
+                                else{
+                                btnOnlineOffline.innerHTML = "2. Go Offline";
+                                tileLayer.goOnline();
+                                document.body.style.backgroundColor = "black";
+                                console.log("tileLayer is online");
+                                }
+                                }
+
+
+                                // Set the tileLayer online or offline.
+                                // When set to offline, the map will look for tiles in the tiles database
+                                function updateState(){
+                                if(Offline.state === 'up'){
+                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                                }
+                                else{
+                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                                }
+                                }
+
+                                // Utility function to validate min and max zoom settings of the map
+                                function getMinMaxZoom(){
+
+                                var zoom = {};
+                                var min = tileLayer.getLevel() + minZoomAdjust;
+                                var max = tileLayer.getLevel() + maxZoomAdjust;
+                                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
+
+                                return zoom;
+                                }
+
+                                function panLeft(){
+                                map.panLeft();
+                                }
+
+                                });
+                                </script>
+                                </body>
+                                </html>
+
+                            
+
+
NOTE: Replace paths with your references.
+
+ +
+
+
+
+ + + +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 13ca26f7..c987a4b2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -34,7 +34,18 @@
From 7c3c95ab48e6ea7ab28886f41a85fe793cb524a9 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 16:41:32 -0600 Subject: [PATCH 08/57] Initial pass at TPK Get Started --- demo/getstarted-tpk.html | 1062 ++++++++++++++++++-------------------- 1 file changed, 492 insertions(+), 570 deletions(-) diff --git a/demo/getstarted-tpk.html b/demo/getstarted-tpk.html index 54887f80..371f77ad 100644 --- a/demo/getstarted-tpk.html +++ b/demo/getstarted-tpk.html @@ -85,475 +85,480 @@

Getting Started

-

Basic steps for working with TPK pages for offline.

+

Basic steps for working with TPK packages for offline.

- -
-
- - - -
-
-

Step 1: Fork or clone offline-editor-js

-

Here are the important directories to know:

-
    -
  • \dist - concatenated library source and minified library files.
    • -
  • \samples - examples that demonstrate the library's functionality.
    • -
  • \vendor - contains IndexedDBShim and offline.js libraries
    • -
-
- -
-
-

Step 2: Fill in the basics

-

Add the basic library references. Then test to make sure map loads.

-
+ +
+
+ + + +
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references and CSS. Then test to make sure application loads. + There won't be a map to display just yet, you'll only see the header bar.

+ 
                         
-                            <!DOCTYPE html>
-                            <html>
-                            <head>
-                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                            <title>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
-
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // Set the online/offline detection options.
-                            // More info at: http://github.hubspot.com/offline/docs/welcome/
-                            Offline.options = {
-                            checks: {
-                            image: {
-                            url: function() {
-                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                            (Math.floor(Math.random() * 1000000000));
-                            }
-                            },
-                            active: 'image'
-                            }
-                            }
-                            </script>
-
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
-
-                            <body>
-                            <div id="map"></div>
-
-                            <script>
-                            var map;
-
-                            // Make sure to reference the tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
-                            map = new Map("map", {
-                            basemap: "topo",
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
-                            });
-                            </script>
-                            </body>
-                            </html>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #ffffff;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+        #map{
+            position: absolute;
+            left: 0;
+            z-index: 1;
+        }
+        #header-div{
+            font-family: helvetica, serif;
+            background: #000000;
+            color: #ffffff;
+            width: 100%;
+            height: 90px;
+            display:inline-block;
+            vertical-align:middle;
+            line-height: 50px;
+            padding-left: 8px;
+        }
+        #input-container{
+            position: absolute;
+        }
+        #url-input{
+            position: relative;
+            /* float: left; */
+            padding-left: 10px;
+            margin-left: 10px;
+            margin-top: 40px;
+            width: 250px;
+        }
+        #url-btn{
+            position: relative;
+            /*float: left;*/
+        }
+        #header-title{
+            position: relative;
+            float: right;
+            padding-right: 15px;
+        }
+    </style>
+
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
+
+<body>
+
+    <div id="header-div">
+        <div id="input-container">
+            <input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
+            <button id="url-btn">Get file via url</button>
+        </div>
+        <div id="header-title">TPKLayer demo</div>
+    </div>
+
+    <div id="map"></div>
+
+    <script>
+        var map;
+
+        // Make sure to reference the tpk library within the require statement!
+        require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
+
+            var map, tpkLayer;
+
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
-
-
-

Step 3: Configure tiled basemap to work offline

-

This initializes the offline-editor-js library. Test to make sure map loads.

-
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Retrieve TPK.

+

You should get an alert when TPK is fully downloaded.

+ 
                         
-                            <!DOCTYPE html>
-                            <html>
-                            <head>
-                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                            <title>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
-
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // Set the online/offline detection options.
-                            // More info at: http://github.hubspot.com/offline/docs/welcome/
-                            Offline.options = {
-                            checks: {
-                            image: {
-                            url: function() {
-                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                            (Math.floor(Math.random() * 1000000000));
-                            }
-                            },
-                            active: 'image'
-                            }
-                            }
-                            </script>
-
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
-
-                            <body>
-                            <div id="map"></div>
-
-                            <script>
-                            var map;
-
-                            // Make sure to reference the offline tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
-
-                            // Check if browser state is online or offline
-                            Offline.check();
-                            Offline.on('up down', updateState );
-
-                            // Initialize Esri.Map
-                            map = new Map("map", {
-                            //basemap: "topo", // comment out this basemap!
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
-
-                            // Now we initialize a topo tiled basemap service to be offline-enabled.
-                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
-                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-                            function(evt){
-                            console.log("Offline tile lib enabled. App is: " + Offline.state);
-                            },
-                            true);
-
-                            // Add our offline tile layer to the map instead of using the default basemap!
-                            map.addLayer(tileLayer);
-
-                            // Set the tileLayer online or offline.
-                            // When set to offline, the map will look for tiles in the tiles database
-                            function updateState(){
-                            if(Offline.state === 'up'){
-                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                            }
-                            else{
-                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                            }
-                            }
-
-                            });
-                            </script>
-                            </body>
-                            </html>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #ffffff;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+        #map{
+            position: absolute;
+            left: 0;
+            z-index: 1;
+        }
+        #header-div{
+            font-family: helvetica, serif;
+            background: #000000;
+            color: #ffffff;
+            width: 100%;
+            height: 90px;
+            display:inline-block;
+            vertical-align:middle;
+            line-height: 50px;
+            padding-left: 8px;
+        }
+        #input-container{
+            position: absolute;
+        }
+        #url-input{
+            position: relative;
+            /* float: left; */
+            padding-left: 10px;
+            margin-left: 10px;
+            margin-top: 40px;
+            width: 250px;
+        }
+        #url-btn{
+            position: relative;
+            /*float: left;*/
+        }
+        #header-title{
+            position: relative;
+            float: right;
+            padding-right: 15px;
+        }
+    </style>
+
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
+
+<body>
+
+    <div id="header-div">
+        <div id="input-container">
+            <input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
+            <button id="url-btn">Get file via url</button>
+        </div>
+        <div id="header-title">TPKLayer demo</div>
+    </div>
+
+    <div id="map"></div>
+
+    <script>
+        var map;
+
+        // Make sure to reference the tpk library within the require statement!
+        require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
+
+            var map, tpkLayer;
+
+            var url = document.getElementById("url-input");
+            var urlInputBtn = document.getElementById("url-btn");
+            urlInputBtn.onclick = function(){
+                getTPK();
+            };
+
+            // Initialize the Map and the TPKLayer
+            function initMap(entries){
+                tpkLayer = new O.esri.TPK.TPKLayer();
+                tpkLayer.on("progress", function (evt) {
+                    console.log("Loading tpk...");
+                })
+                tpkLayer.extend(entries);
+
+                map = new Map("map");
+                map.addLayer(tpkLayer);
+            }
+
+            // Retrieve the TPK file via an HTTP request
+            function getTPK(){
+                urlInputBtn.innerHTML = "Get file via url";
+
+                var xhrRequest = new XMLHttpRequest();
+                xhrRequest.open("GET", url.value, true);
+                xhrRequest.responseType = "blob";
+                xhrRequest.onprogress = function(evt){
+                    var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
+                    urlInputBtn.innerHTML = "Get file via url " + percent + "%";
+                    console.log("Begin downloading remote tpk file...")
+                }
+
+                xhrRequest.error = function(err){console.log("ERROR")}
+
+                xhrRequest.onload = function(oEvent) {
+                    if(this.status == 200) {
+                        console.log("Remote tpk download finished.")
+                        alert("We have TPK!");
+                    }
+                    else{
+                        alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
+                    }
+                };
+
+                xhrRequest.send();
+            }
+
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
+
NOTE: Replace paths with your references.
-
+
-
-

Step 4: Configure tiles download.

-

Enable the ability to download tiles as well the ability to toggle online and offline.

-
+
+

Step 4: Unzip and display TPK tiles.

+

In this step we unzip the TPK file and then hand the result to TPKLayer.

+
- + -
+
-
-
-
+                    

+                        

+                        
                             
 
-                                <!DOCTYPE html>
-                                <html>
-                                <head>
-                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                                <title>Simple Map</title>
-                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                                <style>
-                                html, body, #map {
-                                height: 100%;
-                                width: 100%;
-                                margin: 0;
-                                padding: 0;
-                                }
-                                body {
-                                background-color: #000000;
-                                overflow: hidden;
-                                font-family: "Trebuchet MS";
-                                }
-                                </style>
-
-                                <!-- Include a reference to offline.js which detects online/offline conditions -->
-                                <script src="../vendor/offline/offline.min.js"></script>
-                                <script>
-                                // Set the online/offline detection options.
-                                // More info at: http://github.hubspot.com/offline/docs/welcome/
-                                Offline.options = {
-                                checks: {
-                                image: {
-                                url: function() {
-                                return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                                (Math.floor(Math.random() * 1000000000));
-                                }
-                                },
-                                active: 'image'
-                                }
-                                }
-                                </script>
-
-                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
-                                <script src="http://js.arcgis.com/3.10/"></script>
-                                </head>
-
-                                <body>
-
-                                <!-- Create two buttons -->
-                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
-                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
-                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
-
-                                <div id="map"></div>
-
-                                <script>
-                                var map;
-
-                                // Make sure to reference the offline tiles library within the require statement!
-                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
-                                function(Map,on){
-
-                                // Check if browser state is online or offline
-                                Offline.check();
-                                Offline.on('up down', updateState );
-
-                                // For cancelling the download of tiles
-                                var _wantToCancel;
-
-                                // Set up min and max boundaries for retrieving tiles
-                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
-
-                                // Set up button click listeners.
-                                var btnGetTiles = document.getElementById("btn-get-tiles");
-                                var btnOnlineOffline = document.getElementById("btn-online-offline");
-                                var btnPanLeft = document.getElementById("btn-pan-left");
-
-                                on(btnGetTiles,"click",downloadTiles);
-                                on(btnOnlineOffline,"click",goOnlineOffline);
-                                on(btnPanLeft,"click",panLeft);
-
-                                // Initialize Esri.Map
-                                map = new Map("map", {
-                                //basemap: "topo", // comment out this basemap!
-                                center: [-122.45, 37.75], // longitude, latitude
-                                zoom: 13
-                                });
-
-                                // Now we initialize a topo tiled basemap service to be offline-enabled.
-                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
-                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-                                function(evt){
-                                console.log("Offline tile lib enabled. App is: " + Offline.state);
-                                },
-                                true);
-
-                                // Set the min and max zoom levels for when retrieving tiles
-                                // This helps manage the amount of database space used.
-                                map.on("load",function(evt){
-                                tileLayer.getMaxZoom(function(result){
-                                mMaxZoom = result;
-                                });
-                                tileLayer.getMinZoom(function(result){
-                                mMinZoom = result;
-                                });
-                                })
-
-                                // Add our offline tile layer to the map instead of using the default basemap!
-                                map.addLayer(tileLayer);
-
-                                function downloadTiles(){
-
-                                // First we need to empty the database.
-                                tileLayer.deleteAllTiles(function(success,err){
-
-                                var zoom = getMinMaxZoom();
-                                var extent = tileLayer.getExtentBuffer(0,map.extent);
-
-                                // Begin downloading tiles
-                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
-
-                                if( progress.cancelRequested )
-                                {
-                                alert("Tile download was cancelled");
-                                }
-                                else
-                                {
-                                alert("Tile download complete");
-                                }
-
-                                btnGetTiles.innerHTML = '1. Download Tiles';
-                                }
-                                return _wantToCancel; //determines if a cancel request has been issued
-                                });
-                                });
-                                }
-
-                                // Force the tileLayer between online and offline
-                                function goOnlineOffline(){
-                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
-                                btnOnlineOffline.innerHTML = "2. Go Online";
-                                tileLayer.goOffline();
-                                document.body.style.backgroundColor = "red";
-                                console.log("tileLayer is offline");
-                                }
-                                else{
-                                btnOnlineOffline.innerHTML = "2. Go Offline";
-                                tileLayer.goOnline();
-                                document.body.style.backgroundColor = "black";
-                                console.log("tileLayer is online");
-                                }
-                                }
-
-
-                                // Set the tileLayer online or offline.
-                                // When set to offline, the map will look for tiles in the tiles database
-                                function updateState(){
-                                if(Offline.state === 'up'){
-                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                                }
-                                else{
-                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                                }
-                                }
-
-                                // Utility function to validate min and max zoom settings of the map
-                                function getMinMaxZoom(){
-
-                                var zoom = {};
-                                var min = tileLayer.getLevel() + minZoomAdjust;
-                                var max = tileLayer.getLevel() + maxZoomAdjust;
-                                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
-
-                                return zoom;
-                                }
-
-                                function panLeft(){
-                                map.panLeft();
-                                }
-
-                                });
-                                </script>
-                                </body>
-                                </html>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #ffffff;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+        #map{
+            position: absolute;
+            left: 0;
+            z-index: 1;
+        }
+        #header-div{
+            font-family: helvetica, serif;
+            background: #000000;
+            color: #ffffff;
+            width: 100%;
+            height: 90px;
+            display:inline-block;
+            vertical-align:middle;
+            line-height: 50px;
+            padding-left: 8px;
+        }
+        #input-container{
+            position: absolute;
+        }
+        #url-input{
+            position: relative;
+            /* float: left; */
+            padding-left: 10px;
+            margin-left: 10px;
+            margin-top: 40px;
+            width: 250px;
+        }
+        #url-btn{
+            position: relative;
+            /*float: left;*/
+        }
+        #header-title{
+            position: relative;
+            float: right;
+            padding-right: 15px;
+        }
+    </style>
+
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
+
+<body>
+
+    <div id="header-div">
+        <div id="input-container">
+            <input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
+            <button id="url-btn">Get file via url</button>
+        </div>
+        <div id="header-title">TPKLayer demo</div>
+    </div>
+
+    <div id="map"></div>
+
+    <script>
+        var map;
+
+        // Make sure to reference the tpk library within the require statement!
+        require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
+
+            var map, tpkLayer;
+
+            var url = document.getElementById("url-input");
+            var urlInputBtn = document.getElementById("url-btn");
+            urlInputBtn.onclick = function(){
+                getTPK();
+            };
+
+            // Initialize the Map and the TPKLayer
+            function initMap(entries){
+                tpkLayer = new O.esri.TPK.TPKLayer();
+                tpkLayer.on("progress", function (evt) {
+                    console.log("Loading tpk...");
+                })
+                tpkLayer.extend(entries);
+
+                map = new Map("map");
+                map.addLayer(tpkLayer);
+            }
+
+            // Retrieve the TPK file via an HTTP request
+            function getTPK(){
+                urlInputBtn.innerHTML = "Get file via url";
+
+                var xhrRequest = new XMLHttpRequest();
+                xhrRequest.open("GET", url.value, true);
+                xhrRequest.responseType = "blob";
+                xhrRequest.onprogress = function(evt){
+                    var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
+                    urlInputBtn.innerHTML = "Get file via url " + percent + "%";
+                    console.log("Begin downloading remote tpk file...")
+                }
 
-                            
-                        

-
NOTE: Replace paths with your references.

-

+                xhrRequest.error = function(err){console.log("ERROR")}
 
-

-    

-        

-            

-                
-                
-                
-            

-            
-        

-    

-    

-        

-            

-        

-    

+                xhrRequest.onload = function(oEvent) {
+                    if(this.status == 200) {
+                        console.log("Remote tpk download finished.")
+                        zipParser(this.response);
+                    }
+                    else{
+                        alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
+                    }
+                };
+
+                xhrRequest.send();
+            }
+
+            // Parse the zip file contents into a zip.Entries object
+            function zipParser(blob){
+
+                O.esri.zip.createReader(new O.esri.zip.BlobReader(blob), function (zipReader) {
+                    zipReader.getEntries(function (entries) {
+                        initMap(entries);
+                        zipReader.close(function(evt){
+                            console.log("Done reading zip file.")
+                        })
+                    }, function (err) {
+                        alert("There was a problem reading the file!: " + err);
+                    })
+                })
+            }
 
-

-

-
-
- -
-
-
-
-
+ }); + </script> +</body> +</html> - - - + + +
NOTE: Replace paths with your references. This sample may look different than our live sample.
+
+ +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+ +
+ +
+
+ +
+
+
+
+
@@ -564,41 +569,19 @@

Step 4: Configure tiles download.

var map; // Make sure to reference the offline tiles library within the require statement! - require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], + require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on,Bootstrapmap){ - // Check if browser state is online or offline - Offline.check(); - Offline.on('up down', updateState ); - - // For cancelling the download of tiles - var _wantToCancel; - - // Set up min and max boundaries for retrieving tiles - var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom; - - // Set up button click listeners. - var btnGetTiles = document.getElementById("btn-get-tiles"); - var btnOnlineOffline = document.getElementById("btn-online-offline"); - var btnPanLeft = document.getElementById("btn-pan-left"); - var imgOfflineIndicator = document.getElementById("img-offline-indicator"); - - var redPinPath = "../samples/images/red-pin.png"; - var bluePinPath = "../samples/images/blue-pin.png" - - on(btnGetTiles,"click",downloadTiles); - on(btnOnlineOffline,"click",goOnlineOffline); - on(btnPanLeft,"click",panLeft); + var map, tpkLayer; - $(document).ready(function () { - $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { - if (e.target.text === "Map") { - showMap("mapDiv"); - } - }); - }); + var url = document.getElementById("url-input"); + var urlInputBtn = document.getElementById("url-btn"); + urlInputBtn.onclick = function(){ + getTPK(); + }; - function showMap(){ + // Initialize the Map and the TPKLayer + function initMap(entries){ if(map){ map.destroy(); @@ -606,119 +589,58 @@

Step 4: Configure tiles download.

map = Bootstrapmap.create("mapDiv",{ //basemap: "topo", // comment out this basemap! - center: [-122.45, 37.75], // longitude, latitude - zoom: 15 }); - // Now we initialize the basemap to be offline-enabled. This is out new basemap. - tileLayer = O.esri.Tiles.OfflineTileEnablerLayer( - "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", - function(evt){ - console.log("Offline tile lib enabled. App is: " + Offline.state); - }, - true); - - // Set the min and max zoom for when retrieving tiles - map.on("load",function(evt){ - tileLayer.getMaxZoom(function(result){ - mMaxZoom = result; - }); - tileLayer.getMinZoom(function(result){ - mMinZoom = result; - }); + tpkLayer = new O.esri.TPK.TPKLayer(); + tpkLayer.on("progress", function (evt) { + console.log("TPK loading..."); }) + tpkLayer.extend(entries); - - // Add our offline tile layer to the map instead of using the default basemap! - map.addLayer(tileLayer); - } - - function downloadTiles(){ - - // First we need to empty the database. - tileLayer.deleteAllTiles(function(success,err){ - - var zoom = getMinMaxZoom(); - var extent = tileLayer.getExtentBuffer(0,map.extent); - - // Begin downloading tiles - tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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"; - - if( progress.cancelRequested ) - { - alert("Tile download was cancelled"); - } - else - { - alert("Tile download complete"); - } - - btnGetTiles.innerHTML = '1. Download Tiles'; - - btnOnlineOffline.disabled = false; - btnGetTiles.disabled = true; - } - return _wantToCancel; //determines if a cancel request has been issued - }); - }); + map.addLayer(tpkLayer); } - // Force the tileLayer between online and offline - function goOnlineOffline(){ + function getTPK(){ - btnPanLeft.disabled = false; + urlInputBtn.innerHTML = "Get file via url"; - if(btnOnlineOffline.innerHTML == "2. Go Offline"){ - btnOnlineOffline.innerHTML = "2. Go Online"; - tileLayer.goOffline(); - imgOfflineIndicator.src = redPinPath; - console.log("tileLayer is offline"); + var xhrRequest = new XMLHttpRequest(); + xhrRequest.open("GET", url.value, true); + xhrRequest.responseType = "blob"; + xhrRequest.onprogress = function(evt){ + var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0); + urlInputBtn.innerHTML = "Get file via url " + percent + "%"; + console.log("Begin downloading remote tpk file...") } - else{ - btnOnlineOffline.innerHTML = "2. Go Offline"; - tileLayer.goOnline(); - imgOfflineIndicator.src = bluePinPath; - console.log("tileLayer is online"); - } - } + xhrRequest.error = function(err){console.log("ERRROR")} - // Set the tileLayer online or offline. - // When set to offline, the map will look for tiles in the tiles database - function updateState(){ - if(Offline.state === 'up'){ - if(typeof tileLayer != "undefined") tileLayer.goOnline(); - imgOfflineIndicator.src = bluePinPath; - } - else{ - if(typeof tileLayer != "undefined") tileLayer.goOffline(); - imgOfflineIndicator.src = redPinPath; - } - } - - // Utility function to validate min and max zoom settings of the map - function getMinMaxZoom(){ + xhrRequest.onload = function(oEvent) { + if(this.status == 200) { + console.log("Remote tpk download finished."); + zipParser(this.response) + } + else{ + alert("There was a problem loading the file. " + this.status + ": " + this.statusText ) + } + }; - var zoom = {}; - var min = tileLayer.getLevel() + minZoomAdjust; - var max = tileLayer.getLevel() + maxZoomAdjust; - 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 + xhrRequest.send(); - return zoom; } - function panLeft(){ - map.panLeft(); + function zipParser(blob){ + + O.esri.zip.createReader(new O.esri.zip.BlobReader(blob), function (zipReader) { + zipReader.getEntries(function (entries) { + initMap(entries); + zipReader.close(function(evt){ + console.log("Done reading zip file.") + }) + }, function (err) { + alert("There was a problem reading the file!: " + err); + }) + }) } }); From 59bface60cda94e9975184ae3f11178bd1f716ce Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 16:45:12 -0600 Subject: [PATCH 09/57] removed unused CSS properties --- demo/getstarted-tpk.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/demo/getstarted-tpk.html b/demo/getstarted-tpk.html index 371f77ad..21c91e40 100644 --- a/demo/getstarted-tpk.html +++ b/demo/getstarted-tpk.html @@ -161,7 +161,6 @@

Step 2: Fill in the basics

} #url-input{ position: relative; - /* float: left; */ padding-left: 10px; margin-left: 10px; margin-top: 40px; @@ -169,7 +168,6 @@

Step 2: Fill in the basics

} #url-btn{ position: relative; - /*float: left;*/ } #header-title{ position: relative; @@ -260,7 +258,6 @@

Step 3: Retrieve TPK.

} #url-input{ position: relative; - /* float: left; */ padding-left: 10px; margin-left: 10px; margin-top: 40px; @@ -268,7 +265,6 @@

Step 3: Retrieve TPK.

} #url-btn{ position: relative; - /*float: left;*/ } #header-title{ position: relative; @@ -418,7 +414,6 @@

Step 4: Unzip and display TPK tiles.

} #url-input{ position: relative; - /* float: left; */ padding-left: 10px; margin-left: 10px; margin-top: 40px; @@ -426,7 +421,6 @@

Step 4: Unzip and display TPK tiles.

} #url-btn{ position: relative; - /*float: left;*/ } #header-title{ position: relative; From 403b534ff4b581ed4c0694dbff16b4cfcda65637 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 16:53:09 -0600 Subject: [PATCH 10/57] included updated Get Started pulldown --- demo/api-doc.html | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/demo/api-doc.html b/demo/api-doc.html index 9efba7cb..8c81e75b 100644 --- a/demo/api-doc.html +++ b/demo/api-doc.html @@ -63,7 +63,18 @@
From 88e7ec0f31f01c60d9193e83316c4f99003a3846 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 17:49:06 -0600 Subject: [PATCH 11/57] removed proxy toggle button --- samples/tiles-indexed-db.html | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/samples/tiles-indexed-db.html b/samples/tiles-indexed-db.html index e0b0dd37..fb4e1bba 100644 --- a/samples/tiles-indexed-db.html +++ b/samples/tiles-indexed-db.html @@ -187,7 +187,6 @@

Map: [none]

Load from File -
@@ -236,7 +235,6 @@

Map: [none]

bootstrapmap: "//esri.github.io/bootstrap-map-js/src/js/bootstrapmap" } } - window.proxyPath = "../lib/resource-proxy/proxy.php"; @@ -423,7 +421,6 @@

Map: [none]

on(dojo.byId('show-stored-tiles'),'click', toggleShowStoredTiles); on(dojo.byId('save-file'),'click', saveToFile); on(dojo.byId('file-select'),'change', loadFromFile); - on(dojo.byId('use-proxy'),'click', toggleProxy); dojo.byId('go-online-btn').style.display = "none"; esri.show(dojo.byId('ready-to-download-ui')); esri.hide(dojo.byId('downloading-ui')); @@ -447,7 +444,6 @@

Map: [none]

esri.hide(dojo.byId('go-online-btn')); dojo.byId('update-offline-usage').disabled = true; dojo.byId('show-stored-tiles').disabled = true; - dojo.byId('use-proxy').disabled = true; esri.hide(dojo.byId('downloading-ui')); showAlert("alert-danger","Failed initializing storage, probably your browser doesn't support IndexedDB nor WebSQL"); @@ -750,16 +746,6 @@

Map: [none]

}); } - function toggleProxy() - { - if( basemapLayer.offline.proxyPath !== null ) - basemapLayer.offline.proxyPath = null; - else - basemapLayer.offline.proxyPath = window.proxyPath || "../lib/resource-proxy/proxy.php"; - - dojo.byId('using-proxy').innerHTML = basemapLayer.offline.proxyPath? "Yes" : "No"; - } - function showAlert(type, msg) { var icon = ""; From e7fb98535617f88fd630450f794eb431d799fb30 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 17:52:48 -0600 Subject: [PATCH 12/57] Steps 1 - 3 done --- demo/getstarted-agol.html | 713 +++++++++++++++++--------------------- 1 file changed, 325 insertions(+), 388 deletions(-) diff --git a/demo/getstarted-agol.html b/demo/getstarted-agol.html index 85d32e7a..b8f8ad35 100644 --- a/demo/getstarted-agol.html +++ b/demo/getstarted-agol.html @@ -91,450 +91,387 @@

Getting Started

- -
-
- - - -
-
-

Step 1: Fork or clone offline-editor-js

-

Here are the important directories to know:

-
    -
  • \dist - concatenated library source and minified library files.
    • -
  • \samples - examples that demonstrate the library's functionality.
    • -
  • \vendor - contains IndexedDBShim and offline.js libraries
    • -
-
- -
-
-

Step 2: Fill in the basics

-

Add the basic library references. Then test to make sure map loads.

-
+ +
+
+ + + +
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references. Then test to make sure map loads.

+ 
                         
-                            <!DOCTYPE html>
-                            <html>
-                            <head>
-                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                            <title>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
-
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // Set the online/offline detection options.
-                            // More info at: http://github.hubspot.com/offline/docs/welcome/
-                            Offline.options = {
-                            checks: {
-                            image: {
-                            url: function() {
-                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
+
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // Set the online/offline detection options.
+        // More info at: http://github.hubspot.com/offline/docs/welcome/
+        Offline.options = {
+            checks: {
+                image: {
+                    url: function() {
+                        return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
                             (Math.floor(Math.random() * 1000000000));
-                            }
-                            },
-                            active: 'image'
-                            }
-                            }
-                            </script>
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                            <body>
-                            <div id="map"></div>
+<body>
+    <div id="map"></div>
 
-                            <script>
-                            var map;
+    <script>
+        var map;
 
-                            // Make sure to reference the tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
-                            map = new Map("map", {
-                            basemap: "topo",
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
-                            });
-                            </script>
-                            </body>
-                            </html>
+        // Make sure to reference the tiles library within the require statement!
+        require([
+            "esri/map",
+            "dojo/on",
+            "esri/arcgis/utils",
+            "../offline-editor-js-3/dist/offline-tiles-basic-src.js",
+            "dojo/domReady!"],
+            function(Map,on,arcgisUtils) {
+
+                // Load the map
+                arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","map").then(function(response){
+                    var map = response.map;
+                });
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
-
-
-

Step 3: Configure tiled basemap to work offline

-

This initializes the offline-editor-js library. Test to make sure map loads.

-
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Extend basemap using the offline library

+

This initializes the offline-tiles-basic library and tells it which tiled map service layer to use for offline. Test to make sure map loads.

+ 
                         
-                            <!DOCTYPE html>
-                            <html>
-                            <head>
-                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                            <title>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
-
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // Set the online/offline detection options.
-                            // More info at: http://github.hubspot.com/offline/docs/welcome/
-                            Offline.options = {
-                            checks: {
-                            image: {
-                            url: function() {
-                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
+
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // Set the online/offline detection options.
+        // More info at: http://github.hubspot.com/offline/docs/welcome/
+        Offline.options = {
+            checks: {
+                image: {
+                    url: function() {
+                        return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
                             (Math.floor(Math.random() * 1000000000));
-                            }
-                            },
-                            active: 'image'
-                            }
-                            }
-                            </script>
-
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                            <body>
-                            <div id="map"></div>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                            <script>
-                            var map;
+<body>
+    <div id="map"></div>
 
-                            // Make sure to reference the offline tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+    <script>
+        var map;
 
-                            // Check if browser state is online or offline
-                            Offline.check();
-                            Offline.on('up down', updateState );
+        // Make sure to reference the tiles library within the require statement!
+        require([
+            "esri/map",
+            "dojo/on",
+            "esri/arcgis/utils",
+            "../offline-editor-js-3/dist/offline-tiles-basic-src.js",
+            "dojo/domReady!"],
+            function(Map,on,arcgisUtils) {
 
-                            // Initialize Esri.Map
-                            map = new Map("map", {
-                            //basemap: "topo", // comment out this basemap!
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
+                var basemapLayer;
 
-                            // Now we initialize a topo tiled basemap service to be offline-enabled.
-                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
-                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-                            function(evt){
-                            console.log("Offline tile lib enabled. App is: " + Offline.state);
-                            },
-                            true);
+                // Initialize the offline tiles library.
+                var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler();
 
-                            // Add our offline tile layer to the map instead of using the default basemap!
-                            map.addLayer(tileLayer);
+                // Load the map
+                arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","map").then(function(response){
+                    var map = response.map;
 
-                            // Set the tileLayer online or offline.
-                            // When set to offline, the map will look for tiles in the tiles database
-                            function updateState(){
-                            if(Offline.state === 'up'){
-                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                            }
-                            else{
-                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                            }
-                            }
+                    // Get a reference to the primary tiled basemap layer
+                    basemapLayer = map.getLayer( map.layerIds[0] );
 
-                            });
-                            </script>
-                            </body>
-                            </html>
+                    // Extend the tiled basemap layer for offline use
+                    offlineTilesEnabler.extend(basemapLayer,function(success) {
+                        if (success) {
+                            console.log("SUCCESS")
+                        }
+                    })
+                });
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
+
NOTE: Replace paths with your references.
-
+
-
-

Step 4: Configure tiles download.

-

Enable the ability to download tiles as well the ability to toggle online and offline.

-
+
+

Step 4: Configure tiles download.

+

Enable the ability to download tiles as well the ability to toggle online and offline.

+
- + -
+
-
-
-
+                    

+                        

+                        
                             
 
-                                <!DOCTYPE html>
-                                <html>
-                                <head>
-                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                                <title>Simple Map</title>
-                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                                <style>
-                                html, body, #map {
-                                height: 100%;
-                                width: 100%;
-                                margin: 0;
-                                padding: 0;
-                                }
-                                body {
-                                background-color: #000000;
-                                overflow: hidden;
-                                font-family: "Trebuchet MS";
-                                }
-                                </style>
-
-                                <!-- Include a reference to offline.js which detects online/offline conditions -->
-                                <script src="../vendor/offline/offline.min.js"></script>
-                                <script>
-                                // Set the online/offline detection options.
-                                // More info at: http://github.hubspot.com/offline/docs/welcome/
-                                Offline.options = {
-                                checks: {
-                                image: {
-                                url: function() {
-                                return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                                (Math.floor(Math.random() * 1000000000));
-                                }
-                                },
-                                active: 'image'
-                                }
-                                }
-                                </script>
-
-                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
-                                <script src="http://js.arcgis.com/3.10/"></script>
-                                </head>
-
-                                <body>
-
-                                <!-- Create two buttons -->
-                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
-                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
-                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
-
-                                <div id="map"></div>
-
-                                <script>
-                                var map;
-
-                                // Make sure to reference the offline tiles library within the require statement!
-                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
-                                function(Map,on){
-
-                                // Check if browser state is online or offline
-                                Offline.check();
-                                Offline.on('up down', updateState );
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
+
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // Set the online/offline detection options.
+        // More info at: http://github.hubspot.com/offline/docs/welcome/
+        Offline.options = {
+            checks: {
+                image: {
+                    url: function() {
+                        return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                                // For cancelling the download of tiles
-                                var _wantToCancel;
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                                // Set up min and max boundaries for retrieving tiles
-                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                                // Set up button click listeners.
-                                var btnGetTiles = document.getElementById("btn-get-tiles");
-                                var btnOnlineOffline = document.getElementById("btn-online-offline");
-                                var btnPanLeft = document.getElementById("btn-pan-left");
+<body>
+    <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
+    <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
+    <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
+    <div id="map"></div>
 
-                                on(btnGetTiles,"click",downloadTiles);
-                                on(btnOnlineOffline,"click",goOnlineOffline);
-                                on(btnPanLeft,"click",panLeft);
+    <script>
+        var map;
 
-                                // Initialize Esri.Map
-                                map = new Map("map", {
-                                //basemap: "topo", // comment out this basemap!
-                                center: [-122.45, 37.75], // longitude, latitude
-                                zoom: 13
-                                });
+        // Make sure to reference the tiles library within the require statement!
+        require([
+            "esri/map",
+            "dojo/on",
+            "esri/arcgis/utils",
+            "../offline-editor-js-3/dist/offline-tiles-basic-src.js",
+            "dojo/domReady!"],
+            function(Map,on,arcgisUtils) {
 
-                                // Now we initialize a topo tiled basemap service to be offline-enabled.
-                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
-                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-                                function(evt){
-                                console.log("Offline tile lib enabled. App is: " + Offline.state);
-                                },
-                                true);
-
-                                // Set the min and max zoom levels for when retrieving tiles
-                                // This helps manage the amount of database space used.
-                                map.on("load",function(evt){
-                                tileLayer.getMaxZoom(function(result){
-                                mMaxZoom = result;
-                                });
-                                tileLayer.getMinZoom(function(result){
-                                mMinZoom = result;
-                                });
-                                })
-
-                                // Add our offline tile layer to the map instead of using the default basemap!
-                                map.addLayer(tileLayer);
-
-                                function downloadTiles(){
-
-                                // First we need to empty the database.
-                                tileLayer.deleteAllTiles(function(success,err){
-
-                                var zoom = getMinMaxZoom();
-                                var extent = tileLayer.getExtentBuffer(0,map.extent);
-
-                                // Begin downloading tiles
-                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
-                                }
+                var basemapLayer;
 
-                                if( progress.finishedDownloading )
-                                {
-                                btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
+                // Check if browser state is online or offline
+                Offline.check();
+                Offline.on('up down', updateState );
 
-                                if( progress.cancelRequested )
-                                {
-                                alert("Tile download was cancelled");
-                                }
-                                else
-                                {
-                                alert("Tile download complete");
-                                }
+                // Set up button click listeners.
+                var btnGetTiles = document.getElementById("btn-get-tiles");
+                var btnOnlineOffline = document.getElementById("btn-online-offline");
+                var btnPanLeft = document.getElementById("btn-pan-left");
 
-                                btnGetTiles.innerHTML = '1. Download Tiles';
-                                }
-                                return _wantToCancel; //determines if a cancel request has been issued
-                                });
-                                });
-                                }
+                on(btnGetTiles,"click",downloadTiles);
+                on(btnOnlineOffline,"click",goOnlineOffline);
+                on(btnPanLeft,"click",panLeft);
 
-                                // Force the tileLayer between online and offline
-                                function goOnlineOffline(){
-                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
-                                btnOnlineOffline.innerHTML = "2. Go Online";
-                                tileLayer.goOffline();
-                                document.body.style.backgroundColor = "red";
-                                console.log("tileLayer is offline");
-                                }
-                                else{
-                                btnOnlineOffline.innerHTML = "2. Go Offline";
-                                tileLayer.goOnline();
-                                document.body.style.backgroundColor = "black";
-                                console.log("tileLayer is online");
-                                }
-                                }
+                // Initialize the offline tiles library.
+                var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler();
 
+                // Load the map
+                arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","map").then(function(response){
+                    var map = response.map;
 
-                                // Set the tileLayer online or offline.
-                                // When set to offline, the map will look for tiles in the tiles database
-                                function updateState(){
-                                if(Offline.state === 'up'){
-                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                                }
-                                else{
-                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                                }
-                                }
+                    // Get a reference to the primary tiled basemap layer
+                    basemapLayer = map.getLayer( map.layerIds[0] );
 
-                                // Utility function to validate min and max zoom settings of the map
-                                function getMinMaxZoom(){
+                    // Extend the tiled basemap layer for offline use
+                    offlineTilesEnabler.extend(basemapLayer,function(success) {
+                        if (success) {
+                            console.log("SUCCESS")
+                        }
+                    })
+                });
 
-                                var zoom = {};
-                                var min = tileLayer.getLevel() + minZoomAdjust;
-                                var max = tileLayer.getLevel() + maxZoomAdjust;
-                                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
+                // Force the tileLayer between online and offline
+                function goOnlineOffline(){
+                    if(btnOnlineOffline.innerHTML == "2. Go Offline"){
+                        btnOnlineOffline.innerHTML = "2. Go Online";
+                        basemapLayer.goOffline();
+                        document.body.style.backgroundColor = "red";
+                        console.log("Map is offline");
+                    }
+                    else{
+                        btnOnlineOffline.innerHTML = "2. Go Offline";
+                        basemapLayer.goOnline();
+                        document.body.style.backgroundColor = "black";
+                        console.log("Map is online");
+                    }
+                }
 
-                                return zoom;
-                                }
+                // Set the ArcGIS.com map online or offline.
+                // When set offline it will look for tiles in the tiles database
+                function updateState(){
+                    if(Offline.state === 'up'){
+                        if(typeof basemapLayer != "undefined") basemapLayer.goOnline();
+                    }
+                    else{
+                        if(typeof basemapLayer != "undefined") basemapLayer.goOffline();
+                    }
+                }
 
-                                function panLeft(){
-                                map.panLeft();
-                                }
+                function panLeft(){
+                    map.panLeft();
+                }
 
-                                });
-                                </script>
-                                </body>
-                                </html>
+            } // main function
+        );
+    </script>
+</body>
+</html>
 
                             
                         

-
NOTE: Replace paths with your references.

-

-
-

-    

-        

-            

-                
-                
-                
-            

-            
-        

-    

-    

-        

-            

-        

-    

-
-

-

-
-
- -
-
-
-
+
NOTE: Replace paths with your references.
+
+ +
+
+
+
+ + + +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
From 79be4d4c95f608f387bd11e870c405a0ad35b660 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 17:53:09 -0600 Subject: [PATCH 13/57] removed unused comment --- demo/getstarted-tiles.html | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/getstarted-tiles.html b/demo/getstarted-tiles.html index 4ac391f1..027de173 100644 --- a/demo/getstarted-tiles.html +++ b/demo/getstarted-tiles.html @@ -357,7 +357,6 @@

Step 4: Configure tiles download.

<body> - <!-- Create two buttons --> <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button> <button class="basic-btn" id="btn-online-offline">2. Go Offline</button> <button class="basic-btn" id="btn-pan-left">3. Pan left</button> From 03cfea63051a834a996e3fea703505a04d76d250 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 2 Oct 2014 17:53:41 -0600 Subject: [PATCH 14/57] initial stubs --- demo/getstarted-editing.html | 748 +++++++++++++++++------------------ 1 file changed, 374 insertions(+), 374 deletions(-) diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html index b75afd28..3cb8a93f 100644 --- a/demo/getstarted-editing.html +++ b/demo/getstarted-editing.html @@ -85,456 +85,456 @@

Getting Started

-

Basic steps for working with Editing of geographic features for offline.

+

Basic steps for working with Editing geographic features for offline.

- -
-
- - - -
-
-

Step 1: Fork or clone offline-editor-js

-

Here are the important directories to know:

-
    -
  • \dist - concatenated library source and minified library files.
    • -
  • \samples - examples that demonstrate the library's functionality.
    • -
  • \vendor - contains IndexedDBShim and offline.js libraries
    • -
-
- -
-
-

Step 2: Fill in the basics

-

Add the basic library references. Then test to make sure map loads.

-
+ +
+
+ + + +
+
+

Step 1: Fork or clone offline-editor-js

+

Here are the important directories to know:

+
    +
  • \dist - concatenated library source and minified library files.
    • +
  • \samples - examples that demonstrate the library's functionality.
    • +
  • \vendor - contains IndexedDBShim and offline.js libraries
    • +
+
+ +
+
+

Step 2: Fill in the basics

+

Add the basic library references. Then test to make sure map loads.

+ 
                         
-                            <!DOCTYPE html>
-                            <html>
-                            <head>
-                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                            <title>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
-
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // Set the online/offline detection options.
-                            // More info at: http://github.hubspot.com/offline/docs/welcome/
-                            Offline.options = {
-                            checks: {
-                            image: {
-                            url: function() {
-                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
+
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // Set the online/offline detection options.
+        // More info at: http://github.hubspot.com/offline/docs/welcome/
+        Offline.options = {
+            checks: {
+                image: {
+                    url: function() {
+                        return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
                             (Math.floor(Math.random() * 1000000000));
-                            }
-                            },
-                            active: 'image'
-                            }
-                            }
-                            </script>
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                            <body>
-                            <div id="map"></div>
+<body>
+    <div id="map"></div>
 
-                            <script>
-                            var map;
+    <script>
+        var map;
 
-                            // Make sure to reference the tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
-                            map = new Map("map", {
-                            basemap: "topo",
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
-                            });
-                            </script>
-                            </body>
-                            </html>
+        // Make sure to reference the tiles library within the require statement!
+        require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+            map = new Map("map", {
+                basemap: "topo",
+                center: [-122.45, 37.75], // longitude, latitude
+                zoom: 13
+            });
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
-
-
-

Step 3: Configure tiled basemap to work offline

-

This initializes the offline-editor-js library. Test to make sure map loads.

-
+
NOTE: Replace paths with your references.
+
+
+

Step 3: Configure tiled basemap to work offline

+

This initializes the offline-editor-js library. Test to make sure map loads.

+ 
                         
-                            <!DOCTYPE html>
-                            <html>
-                            <head>
-                            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                            <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                            <title>Simple Map</title>
-                            <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                            <style>
-                            html, body, #map {
-                            height: 100%;
-                            width: 100%;
-                            margin: 0;
-                            padding: 0;
-                            }
-                            body {
-                            background-color: #000000;
-                            overflow: hidden;
-                            font-family: "Trebuchet MS";
-                            }
-                            </style>
-
-                            <!-- Include a reference to offline.js which detects online/offline conditions -->
-                            <script src="../vendor/offline/offline.min.js"></script>
-                            <script>
-                            // Set the online/offline detection options.
-                            // More info at: http://github.hubspot.com/offline/docs/welcome/
-                            Offline.options = {
-                            checks: {
-                            image: {
-                            url: function() {
-                            return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
+
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // Set the online/offline detection options.
+        // More info at: http://github.hubspot.com/offline/docs/welcome/
+        Offline.options = {
+            checks: {
+                image: {
+                    url: function() {
+                        return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
                             (Math.floor(Math.random() * 1000000000));
-                            }
-                            },
-                            active: 'image'
-                            }
-                            }
-                            </script>
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                            <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                            <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                            <script src="http://js.arcgis.com/3.10/"></script>
-                            </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                            <body>
-                            <div id="map"></div>
+<body>
+    <div id="map"></div>
 
-                            <script>
-                            var map;
+    <script>
+        var map;
 
-                            // Make sure to reference the offline tiles library within the require statement!
-                            require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
+        // Make sure to reference the offline tiles library within the require statement!
+        require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
 
-                            // Check if browser state is online or offline
-                            Offline.check();
-                            Offline.on('up down', updateState );
+            // Check if browser state is online or offline
+            Offline.check();
+            Offline.on('up down', updateState );
 
-                            // Initialize Esri.Map
-                            map = new Map("map", {
-                            //basemap: "topo", // comment out this basemap!
-                            center: [-122.45, 37.75], // longitude, latitude
-                            zoom: 13
-                            });
+            // Initialize Esri.Map
+            map = new Map("map", {
+                //basemap: "topo", // comment out this basemap!
+                center: [-122.45, 37.75], // longitude, latitude
+                zoom: 13
+            });
 
-                            // Now we initialize a topo tiled basemap service to be offline-enabled.
-                            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+            // Now we initialize a topo tiled basemap service to be offline-enabled.
+            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
                             "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
                             function(evt){
-                            console.log("Offline tile lib enabled. App is: " + Offline.state);
+                                console.log("Offline tile lib enabled. App is: " + Offline.state);
                             },
                             true);
 
-                            // Add our offline tile layer to the map instead of using the default basemap!
-                            map.addLayer(tileLayer);
+            // Add our offline tile layer to the map instead of using the default basemap!
+            map.addLayer(tileLayer);
 
-                            // Set the tileLayer online or offline.
-                            // When set to offline, the map will look for tiles in the tiles database
-                            function updateState(){
-                            if(Offline.state === 'up'){
-                            if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                            }
-                            else{
-                            if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                            }
-                            }
+            // Set the tileLayer online or offline.
+            // When set to offline, the map will look for tiles in the tiles database
+            function updateState(){
+                if(Offline.state === 'up'){
+                    if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                }
+                else{
+                    if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                }
+            }
 
-                            });
-                            </script>
-                            </body>
-                            </html>
+        });
+    </script>
+</body>
+</html>
-
NOTE: Replace paths with your references.
+
NOTE: Replace paths with your references.
-
+
-
-

Step 4: Configure tiles download.

-

Enable the ability to download tiles as well the ability to toggle online and offline.

-
+
+

Step 4: Configure tiles download.

+

Enable the ability to download tiles as well the ability to toggle online and offline.

+
- + -
+
-
-
-
+                    

+                        

+                        
                             
 
-                                <!DOCTYPE html>
-                                <html>
-                                <head>
-                                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-                                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-                                <title>Simple Map</title>
-                                <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
-                                <style>
-                                html, body, #map {
-                                height: 100%;
-                                width: 100%;
-                                margin: 0;
-                                padding: 0;
-                                }
-                                body {
-                                background-color: #000000;
-                                overflow: hidden;
-                                font-family: "Trebuchet MS";
-                                }
-                                </style>
-
-                                <!-- Include a reference to offline.js which detects online/offline conditions -->
-                                <script src="../vendor/offline/offline.min.js"></script>
-                                <script>
-                                // Set the online/offline detection options.
-                                // More info at: http://github.hubspot.com/offline/docs/welcome/
-                                Offline.options = {
-                                checks: {
-                                image: {
-                                url: function() {
-                                return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                                (Math.floor(Math.random() * 1000000000));
-                                }
-                                },
-                                active: 'image'
-                                }
-                                }
-                                </script>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
+    <title>Simple Map</title>
+    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <style>
+        html, body, #map {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #000000;
+            overflow: hidden;
+            font-family: "Trebuchet MS";
+        }
+    </style>
+
+    <!-- Include a reference to offline.js which detects online/offline conditions -->
+    <script src="../vendor/offline/offline.min.js"></script>
+    <script>
+        // Set the online/offline detection options.
+        // More info at: http://github.hubspot.com/offline/docs/welcome/
+        Offline.options = {
+            checks: {
+                image: {
+                    url: function() {
+                        return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
+                            (Math.floor(Math.random() * 1000000000));
+                    }
+                },
+                active: 'image'
+            }
+        }
+    </script>
 
-                                <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
-                                <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
+    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
+    <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-                                <script src="http://js.arcgis.com/3.10/"></script>
-                                </head>
+    <script src="http://js.arcgis.com/3.10/"></script>
+</head>
 
-                                <body>
+<body>
 
-                                <!-- Create two buttons -->
-                                <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
-                                <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
-                                <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
+    <!-- Create two buttons -->
+    <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
+    <button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
+    <button class="basic-btn" id="btn-pan-left">3. Pan left</button>
 
-                                <div id="map"></div>
+    <div id="map"></div>
 
-                                <script>
-                                var map;
+    <script>
+        var map;
 
-                                // Make sure to reference the offline tiles library within the require statement!
-                                require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
-                                function(Map,on){
+        // Make sure to reference the offline tiles library within the require statement!
+        require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
+        function(Map,on){
 
-                                // Check if browser state is online or offline
-                                Offline.check();
-                                Offline.on('up down', updateState );
+            // Check if browser state is online or offline
+            Offline.check();
+            Offline.on('up down', updateState );
 
-                                // For cancelling the download of tiles
-                                var _wantToCancel;
+            // For cancelling the download of tiles
+            var _wantToCancel;
 
-                                // Set up min and max boundaries for retrieving tiles
-                                var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
+            // Set up min and max boundaries for retrieving tiles
+            var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
 
-                                // Set up button click listeners.
-                                var btnGetTiles = document.getElementById("btn-get-tiles");
-                                var btnOnlineOffline = document.getElementById("btn-online-offline");
-                                var btnPanLeft = document.getElementById("btn-pan-left");
+            // Set up button click listeners.
+            var btnGetTiles = document.getElementById("btn-get-tiles");
+            var btnOnlineOffline = document.getElementById("btn-online-offline");
+            var btnPanLeft = document.getElementById("btn-pan-left");
 
-                                on(btnGetTiles,"click",downloadTiles);
-                                on(btnOnlineOffline,"click",goOnlineOffline);
-                                on(btnPanLeft,"click",panLeft);
+            on(btnGetTiles,"click",downloadTiles);
+            on(btnOnlineOffline,"click",goOnlineOffline);
+            on(btnPanLeft,"click",panLeft);
 
-                                // Initialize Esri.Map
-                                map = new Map("map", {
-                                //basemap: "topo", // comment out this basemap!
-                                center: [-122.45, 37.75], // longitude, latitude
-                                zoom: 13
-                                });
+            // Initialize Esri.Map
+            map = new Map("map", {
+                //basemap: "topo", // comment out this basemap!
+                center: [-122.45, 37.75], // longitude, latitude
+                zoom: 13
+            });
 
-                                // Now we initialize a topo tiled basemap service to be offline-enabled.
-                                tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
-                                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-                                function(evt){
+            // Now we initialize a topo tiled basemap service to be offline-enabled.
+            tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
+                            "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+                            function(evt){
                                 console.log("Offline tile lib enabled. App is: " + Offline.state);
-                                },
-                                true);
-
-                                // Set the min and max zoom levels for when retrieving tiles
-                                // This helps manage the amount of database space used.
-                                map.on("load",function(evt){
-                                tileLayer.getMaxZoom(function(result){
-                                mMaxZoom = result;
-                                });
-                                tileLayer.getMinZoom(function(result){
-                                mMinZoom = result;
-                                });
-                                })
-
-                                // Add our offline tile layer to the map instead of using the default basemap!
-                                map.addLayer(tileLayer);
-
-                                function downloadTiles(){
-
-                                // First we need to empty the database.
-                                tileLayer.deleteAllTiles(function(success,err){
-
-                                var zoom = getMinMaxZoom();
-                                var extent = tileLayer.getExtentBuffer(0,map.extent);
-
-                                // Begin downloading tiles
-                                tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
-                                }
+                            },
+                            true);
 
-                                if( progress.finishedDownloading )
-                                {
-                                btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
+            // Set the min and max zoom levels for when retrieving tiles
+            // This helps manage the amount of database space used.
+            map.on("load",function(evt){
+                tileLayer.getMaxZoom(function(result){
+                    mMaxZoom = result;
+                });
+                tileLayer.getMinZoom(function(result){
+                    mMinZoom = result;
+                });
+            })
 
-                                if( progress.cancelRequested )
-                                {
+            // Add our offline tile layer to the map instead of using the default basemap!
+            map.addLayer(tileLayer);
+
+            function downloadTiles(){
+
+                // First we need to empty the database.
+                tileLayer.deleteAllTiles(function(success,err){
+
+                    var zoom = getMinMaxZoom();
+                    var extent = tileLayer.getExtentBuffer(0,map.extent);
+
+                    // Begin downloading tiles
+                    tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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";
+
+                            if( progress.cancelRequested )
+                            {
                                 alert("Tile download was cancelled");
-                                }
-                                else
-                                {
+                            }
+                            else
+                            {
                                 alert("Tile download complete");
-                                }
-
-                                btnGetTiles.innerHTML = '1. Download Tiles';
-                                }
-                                return _wantToCancel; //determines if a cancel request has been issued
-                                });
-                                });
-                                }
+                            }
 
-                                // Force the tileLayer between online and offline
-                                function goOnlineOffline(){
-                                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
-                                btnOnlineOffline.innerHTML = "2. Go Online";
-                                tileLayer.goOffline();
-                                document.body.style.backgroundColor = "red";
-                                console.log("tileLayer is offline");
-                                }
-                                else{
-                                btnOnlineOffline.innerHTML = "2. Go Offline";
-                                tileLayer.goOnline();
-                                document.body.style.backgroundColor = "black";
-                                console.log("tileLayer is online");
-                                }
-                                }
+                            btnGetTiles.innerHTML = '1. Download Tiles';
+                        }
+                        return _wantToCancel; //determines if a cancel request has been issued
+                    });
+                });
+            }
+
+            // Force the tileLayer between online and offline
+            function goOnlineOffline(){
+                if(btnOnlineOffline.innerHTML == "2. Go Offline"){
+                    btnOnlineOffline.innerHTML = "2. Go Online";
+                    tileLayer.goOffline();
+                    document.body.style.backgroundColor = "red";
+                    console.log("tileLayer is offline");
+                }
+                else{
+                    btnOnlineOffline.innerHTML = "2. Go Offline";
+                    tileLayer.goOnline();
+                    document.body.style.backgroundColor = "black";
+                    console.log("tileLayer is online");
+                }
+            }
 
 
-                                // Set the tileLayer online or offline.
-                                // When set to offline, the map will look for tiles in the tiles database
-                                function updateState(){
-                                if(Offline.state === 'up'){
-                                if(typeof tileLayer != "undefined") tileLayer.goOnline();
-                                }
-                                else{
-                                if(typeof tileLayer != "undefined") tileLayer.goOffline();
-                                }
-                                }
+            // Set the tileLayer online or offline.
+            // When set to offline, the map will look for tiles in the tiles database
+            function updateState(){
+                if(Offline.state === 'up'){
+                    if(typeof tileLayer != "undefined") tileLayer.goOnline();
+                }
+                else{
+                    if(typeof tileLayer != "undefined") tileLayer.goOffline();
+                }
+            }
 
-                                // Utility function to validate min and max zoom settings of the map
-                                function getMinMaxZoom(){
+            // Utility function to validate min and max zoom settings of the map
+            function getMinMaxZoom(){
 
-                                var zoom = {};
-                                var min = tileLayer.getLevel() + minZoomAdjust;
-                                var max = tileLayer.getLevel() + maxZoomAdjust;
-                                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
+                var zoom = {};
+                var min = tileLayer.getLevel() + minZoomAdjust;
+                var max = tileLayer.getLevel() + maxZoomAdjust;
+                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
 
-                                return zoom;
-                                }
+                return zoom;
+            }
 
-                                function panLeft(){
-                                map.panLeft();
-                                }
+            function panLeft(){
+                map.panLeft();
+            }
 
-                                });
-                                </script>
-                                </body>
-                                </html>
+        });
+    </script>
+</body>
+</html>
 
                             
                         

-
NOTE: Replace paths with your references.

-

-
-

-    

-        

-            

-                
-                
-                
-            

-            
-        

-    

-    

-        

-            

-        

-    

-
-

-

-
-
- -
-
-
-
+
NOTE: Replace paths with your references.
+
+ +
+
+
+
+ + + +
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
From 153abce68bc174391b63b58d553cfebdeb7d0023 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Fri, 3 Oct 2014 10:28:06 -0600 Subject: [PATCH 15/57] Closes #256 - add getMinZoom getMaxZoom --- doc/offlinetilesenabler.md | 3 +++ lib/tiles/OfflineTilesEnablerLayer.js | 24 ++-------------------- lib/tiles/offlineTilesEnabler.js | 29 +++++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/doc/offlinetilesenabler.md b/doc/offlinetilesenabler.md index 88afe874..0958d721 100644 --- a/doc/offlinetilesenabler.md +++ b/doc/offlinetilesenabler.md @@ -30,6 +30,9 @@ Methods | Returns | Description `loadFromFile(filename, callback)` | `callback( boolean, error)` | Reads a csv file into local tile cache. `estimateTileSize(callback)` | `callback(number)` | Retrieves one tile from a layer and then returns its size. `prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. See the "How To Use" section below to learn more about customizing the use of this method. +`getMinZoom(callback)` | `callback(number)` | Returns the minimum zoom level of the layer. This is the zoom level farther away from the earth. +`getMaxZoom(callback)` | `callback(number)` | Returns the maximum zoom level of the layer. This is the zoom level closest to the earth. + ###Properties Property | Description diff --git a/lib/tiles/OfflineTilesEnablerLayer.js b/lib/tiles/OfflineTilesEnablerLayer.js index 62a5d021..2b41ec88 100644 --- a/lib/tiles/OfflineTilesEnablerLayer.js +++ b/lib/tiles/OfflineTilesEnablerLayer.js @@ -190,17 +190,7 @@ define([ getMaxZoom: function(callback){ if(this._maxZoom == null){ - var lods = this.tileInfo.lods; - var length = this.tileInfo.lods.length; - var tempArr = []; - for(var i=0; i < length; i++){ - tempArr.push(lods[i].level); - if(i == length -1){ - tempArr.sortNumber(); - this._maxZoom = tempArr[i]; - callback(tempArr[i]); - } - } + this._maxZoom = this.tileInfo.lods[0].level; } else{ callback(this._maxZoom); @@ -215,17 +205,7 @@ define([ getMinZoom: function(callback){ if(this._minZoom == null){ - var lods = this.tileInfo.lods; - var length = this.tileInfo.lods.length; - var tempArr = []; - for(var i=0; i < length; i++){ - tempArr.push(lods[i].level); - if(i == length -1){ - tempArr.sortNumber(); - this._minZoom = tempArr[0]; - callback(tempArr[0]); - } - } + this._minZoom = this.tileInfo.lods[basemapLayer.tileInfo.lods.length-1].level; } else{ callback(this._minZoom); diff --git a/lib/tiles/offlineTilesEnabler.js b/lib/tiles/offlineTilesEnabler.js index 771699ad..a6fcfaa7 100644 --- a/lib/tiles/offlineTilesEnabler.js +++ b/lib/tiles/offlineTilesEnabler.js @@ -239,6 +239,35 @@ define([ layer._tilesCore._loadFromFile(file,this.offline.store,callback); }; + /** + * Returns the maximum zoom level for this layer + * @param callback number + */ + layer.getMaxZoom = function(callback){ + + if(this._maxZoom == null){ + this._maxZoom = layer.tileInfo.lods[0].level; + } + else{ + callback(this._maxZoom); + } + + }, + + /** + * Returns the minimum zoom level for this layer + * @param callback number + */ + layer.getMinZoom = function(callback){ + + if(this._minZoom == null){ + this._minZoom = layer.tileInfo.lods[basemapLayer.tileInfo.lods.length-1].level; + } + else{ + callback(this._minZoom); + } + }, + /* internal methods */ /** From 7d896a152241c8cbb053c201708cdfe273929fa1 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Fri, 3 Oct 2014 11:00:26 -0600 Subject: [PATCH 16/57] fixes bug in callback --- lib/tiles/OfflineTilesEnablerLayer.js | 13 ++++--------- lib/tiles/offlineTilesEnabler.js | 15 ++++++--------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/lib/tiles/OfflineTilesEnablerLayer.js b/lib/tiles/OfflineTilesEnablerLayer.js index 2b41ec88..0850c362 100644 --- a/lib/tiles/OfflineTilesEnablerLayer.js +++ b/lib/tiles/OfflineTilesEnablerLayer.js @@ -190,12 +190,9 @@ define([ getMaxZoom: function(callback){ if(this._maxZoom == null){ - this._maxZoom = this.tileInfo.lods[0].level; + this._maxZoom = this.tileInfo.lods[this.tileInfo.lods.length-1].level; } - else{ - callback(this._maxZoom); - } - + callback(this._maxZoom); }, /** @@ -205,11 +202,9 @@ define([ getMinZoom: function(callback){ if(this._minZoom == null){ - this._minZoom = this.tileInfo.lods[basemapLayer.tileInfo.lods.length-1].level; - } - else{ - callback(this._minZoom); + this._minZoom = this.tileInfo.lods[0].level; } + callback(this._minZoom); }, /** diff --git a/lib/tiles/offlineTilesEnabler.js b/lib/tiles/offlineTilesEnabler.js index a6fcfaa7..61bac0b3 100644 --- a/lib/tiles/offlineTilesEnabler.js +++ b/lib/tiles/offlineTilesEnabler.js @@ -34,6 +34,8 @@ define([ layer._tilesCore = new O.esri.Tiles.TilesCore(); layer._lastTileUrl = ""; layer._imageType = ""; + layer._minZoom = null; + layer._maxZoom = null; /* we add some methods to the layer object */ /* we don't want to extend the tiled layer class, as it is a capability that we want to add only to one instance */ @@ -246,12 +248,9 @@ define([ layer.getMaxZoom = function(callback){ if(this._maxZoom == null){ - this._maxZoom = layer.tileInfo.lods[0].level; + this._maxZoom = layer.tileInfo.lods[layer.tileInfo.lods.length-1].level; } - else{ - callback(this._maxZoom); - } - + callback(this._maxZoom); }, /** @@ -261,11 +260,9 @@ define([ layer.getMinZoom = function(callback){ if(this._minZoom == null){ - this._minZoom = layer.tileInfo.lods[basemapLayer.tileInfo.lods.length-1].level; - } - else{ - callback(this._minZoom); + this._minZoom = layer.tileInfo.lods[0].level; } + callback(this._minZoom); }, /* internal methods */ From 1888385b2c4c90b82e6b4b1f322b8f74765afc31 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Fri, 3 Oct 2014 11:00:44 -0600 Subject: [PATCH 17/57] updates tests for offlineTilesEnabler --- test/spec/offlineTilesEnablerSpec.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/spec/offlineTilesEnablerSpec.js b/test/spec/offlineTilesEnablerSpec.js index c3c6b40a..e55adb52 100644 --- a/test/spec/offlineTilesEnablerSpec.js +++ b/test/spec/offlineTilesEnablerSpec.js @@ -255,4 +255,18 @@ describe("offline enabler library", function() }) }); + async.it("getMaxZoom", function(done){ + g_basemapLayer.getMaxZoom(function(result){ + expect(result).toBe(16); + done(); + }) + }); + + async.it("getMinZoom", function(done){ + g_basemapLayer.getMinZoom(function(result){ + expect(result).toBe(0); + done(); + }) + }); + }); \ No newline at end of file From f21eb3bed6062828fc6486fdd6662ca7d9633207 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Sun, 5 Oct 2014 10:09:38 -0600 Subject: [PATCH 18/57] doc tweaks - offlineTilesEnabler --- doc/offlinetilesenabler.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/doc/offlinetilesenabler.md b/doc/offlinetilesenabler.md index 0958d721..dd0eadb5 100644 --- a/doc/offlinetilesenabler.md +++ b/doc/offlinetilesenabler.md @@ -17,19 +17,19 @@ Constructor | Description ###Methods Methods | Returns | Description --- | --- | --- -`extend(layer, callback)`|`callback(boolean, string)` |Overrides an ArcGISTiledMapServiceLayer. Callback is called after indexedDb store is initialized and informs the application whether it is indexedDb is supported or not. -`goOffline()` | nothing | This method puts the layer in offline mode. When in offline mode, the layer will not fetch any tile from the remote server. It will look up the tiles in the indexed db database and display them in the layer. If the tile can't be found in the local database it will show up blank (even if there is actual connectivity). The pair of methods `goOffline()` and `goOnline() `allows the developer to manually control the behaviour of the layer. Used in conjunction with the offline dectection library, you can put the layer in the appropriate mode when the offline condition changes. +`extend(layer, callback)`|`callback(boolean, string)` |Overrides an ArcGISTiledMapServiceLayer. Callback is called after indexedDB store is initialized and informs the application whether it is indexedDB is supported or not. +`prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. For more information see [How To Use Tiles Library](howtousetiles.md). +`goOffline()` | nothing | This method puts the layer in offline mode. When in offline mode, the layer will not fetch any tile from the remote server. It will look up the tiles in the IndexedDB database and display them in the layer. If the tile can't be found in the local database it will show up blank (even if there is actual connectivity). The pair of methods `goOffline()` and `goOnline() `allows the developer to manually control the behaviour of the layer. Used in conjunction with the offline dectection library, you can put the layer in the appropriate mode when the offline condition changes. `goOnline()` | nothing | This method puts the layer in online mode. When in online mode, the layer will behave as regular layers, fetching all tiles from the remote server. If there is no internet connectivity the tiles may appear thanks to the browsers cache, but no attempt will be made to look up tiles in the local database. `getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified extent and zoom level, and the estimated byte size of such tiles. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. -`getExtentBuffer(buffer,extent)`| Extent | Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. -`getTileUrlsByExtent(extent, level)` | Array | Returns an array of tile urls within a given map extent and zoom level. +`getExtentBuffer(buffer,extent)`| Extent | `buffer` property is an `integer`. `extent` property is an `"esri/geometry/Extent"`. Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. +`getTileUrlsByExtent(extent, level)` | Array | Returns an array of tile urls within a given map extent `"esri/geometry/Extent"` and zoom level `integer`. `deleteAllTiles(callback)` | `callback(boolean, errors)` | Clears the local cache of tiles. `getOfflineUsage(callback)` | `callback(size, error)` | Gets the size in bytes of the local tile cache. `getTilePolygons(callback)` | `callback(polygon, error)` | Gets polygons representing all cached tiles. This is helpful to give users a visual feedback of the current content of the tile cache. `saveToFile(filename, callback)` | `callback( boolean, error)` | Saves tile cache into a portable csv format. `loadFromFile(filename, callback)` | `callback( boolean, error)` | Reads a csv file into local tile cache. `estimateTileSize(callback)` | `callback(number)` | Retrieves one tile from a layer and then returns its size. -`prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. See the "How To Use" section below to learn more about customizing the use of this method. `getMinZoom(callback)` | `callback(number)` | Returns the minimum zoom level of the layer. This is the zoom level farther away from the earth. `getMaxZoom(callback)` | `callback(number)` | Returns the maximum zoom level of the layer. This is the zoom level closest to the earth. @@ -37,4 +37,4 @@ Methods | Returns | Description ###Properties Property | Description --- | --- -`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is to use the internal resource-proxy path: `libs/offline-editor-js/resource-proxy/proxy.php.` Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). \ No newline at end of file +`layer.offline.proxyPath`| The default is `null`. If you have a CORS-enabled service then use the default. Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). \ No newline at end of file From 44f5d27c562f948c97481100891ed8ac267023ba Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Sun, 5 Oct 2014 11:17:00 -0600 Subject: [PATCH 19/57] adds getMinMaxLOD() --- doc/offlinetilesenabler.md | 13 ++++----- doc/offlinetilesenablerlayer.md | 17 ++++++----- lib/tiles/OfflineTilesEnablerLayer.js | 29 +++++++++++++++++++ lib/tiles/offlineTilesEnabler.js | 35 +++++++++++++++++++++-- test/spec/offlineTilesEnablerLayerSpec.js | 8 ++++++ test/spec/offlineTilesEnablerSpec.js | 8 ++++++ 6 files changed, 91 insertions(+), 19 deletions(-) diff --git a/doc/offlinetilesenabler.md b/doc/offlinetilesenabler.md index dd0eadb5..7983a71e 100644 --- a/doc/offlinetilesenabler.md +++ b/doc/offlinetilesenabler.md @@ -13,6 +13,10 @@ Constructor | Description --- | --- `O.esri.Tiles.OfflineTilesEnabler()` | Creates an instance of the offlineTilesEnabler class. This library allows you to extend an ArcGISTiledMapServiceLayer with partial offline capability as well as manage the online/offline resynchronization process. +###Properties +Property | Description +--- | --- +`layer.offline.proxyPath`| The default is `null`. If you have a CORS-enabled service then use the default. Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). ###Methods Methods | Returns | Description @@ -21,7 +25,7 @@ Methods | Returns | Description `prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. For more information see [How To Use Tiles Library](howtousetiles.md). `goOffline()` | nothing | This method puts the layer in offline mode. When in offline mode, the layer will not fetch any tile from the remote server. It will look up the tiles in the IndexedDB database and display them in the layer. If the tile can't be found in the local database it will show up blank (even if there is actual connectivity). The pair of methods `goOffline()` and `goOnline() `allows the developer to manually control the behaviour of the layer. Used in conjunction with the offline dectection library, you can put the layer in the appropriate mode when the offline condition changes. `goOnline()` | nothing | This method puts the layer in online mode. When in online mode, the layer will behave as regular layers, fetching all tiles from the remote server. If there is no internet connectivity the tiles may appear thanks to the browsers cache, but no attempt will be made to look up tiles in the local database. -`getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified extent and zoom level, and the estimated byte size of such tiles. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. +`getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified `"esri/geometry/Extent"`, zoom level `integer`, and the estimated byte size `integer`. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. `getExtentBuffer(buffer,extent)`| Extent | `buffer` property is an `integer`. `extent` property is an `"esri/geometry/Extent"`. Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. `getTileUrlsByExtent(extent, level)` | Array | Returns an array of tile urls within a given map extent `"esri/geometry/Extent"` and zoom level `integer`. `deleteAllTiles(callback)` | `callback(boolean, errors)` | Clears the local cache of tiles. @@ -32,9 +36,4 @@ Methods | Returns | Description `estimateTileSize(callback)` | `callback(number)` | Retrieves one tile from a layer and then returns its size. `getMinZoom(callback)` | `callback(number)` | Returns the minimum zoom level of the layer. This is the zoom level farther away from the earth. `getMaxZoom(callback)` | `callback(number)` | Returns the maximum zoom level of the layer. This is the zoom level closest to the earth. - - -###Properties -Property | Description ---- | --- -`layer.offline.proxyPath`| The default is `null`. If you have a CORS-enabled service then use the default. Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). \ No newline at end of file +`getMinMaxLOD(minZoomAdjust,` `maxZoomAdjust)` | `{min: zoomLevel, max: zoomLevel}` | Utility method for bracketing above and below your current Level of Detail. Use this in conjunction with setting the minLevel and maxLevel in `prepareForOffline()`. `minZoomAdjust` is an Integer specifying how far above the current layer you want to retrieve tiles. `maxZoomAdjust` is an Integer specifying how far below (closer to earth) the current layer you want to retrieve tiles \ No newline at end of file diff --git a/doc/offlinetilesenablerlayer.md b/doc/offlinetilesenablerlayer.md index 8141b855..0a2f1d3b 100644 --- a/doc/offlinetilesenablerlayer.md +++ b/doc/offlinetilesenablerlayer.md @@ -13,14 +13,19 @@ Constructor | Description --- | --- `O.esri.Tiles.OfflineTilesEnablerLayer(url,callback,state)` | Creates an instance of the offlineTilesEnabler class. This library allows you to extend an ArcGISTiledMapServiceLayer with offline capability as well as manage the online/offline resynchronization process. Any Esri basemap REST endpoint should work. The state property is a boolean for specifying if the application is intializing the layer online (true) or offline (false). When you first load the map you should set this property to `true`. +###Properties +Property | Description +--- | --- +`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is null. All ArcGIS Online-based services uses CORS. If you are using a non-CORS enabled server you'll need a proxy. Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). ###Methods Methods | Returns | Description --- | --- | --- +`prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. For more information see [How To Use Tiles Library](howtousetiles.md). `goOffline()` | nothing | This method puts the layer in offline mode. When in offline mode, the layer will not fetch any tile from the remote server. It will look up the tiles in the indexed db database and display them in the layer. If the tile can't be found in the local database it will show up blank (even if there is actual connectivity). The pair of methods `goOffline()` and `goOnline() `allows the developer to manually control the behaviour of the layer. Used in conjunction with the offline dectection library, you can put the layer in the appropriate mode when the offline condition changes. `goOnline()` | nothing | This method puts the layer in online mode. When in online mode, the layer will behave as regular layers, fetching all tiles from the remote server. If there is no internet connectivity the tiles may appear thanks to the browsers cache, but no attempt will be made to look up tiles in the local database. -`getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified extent and zoom level, and the estimated byte size of such tiles. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. -`getExtentBuffer(buffer,extent)`| Extent | Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. +`getLevelEstimation(extent,` `level, tileSize)` | {level, tileCount, sizeBytes} | Returns an object that contains the number of tiles that would need to be downloaded for the specified `"esri/geometry/Extent"`, zoom level `integer`, and the estimated byte size `integer`. This method is useful to give the user an indication of the required time and space before launching the actual download operation. The byte size estimation is very rough. +`getExtentBuffer(buffer,extent)`| Extent | `buffer` property is an `integer`. `extent` property is an `"esri/geometry/Extent"`. Returns a new extent buffered by a given measurement that's based on map units. For example, if you are using mercator map projection then the buffer property would be in meters and the new extent would be returned in mercactor. `getTileUrlsByExtent(extent, level)` | Array | Returns an array of tile urls within a given map extent and zoom level. `deleteAllTiles(callback)` | `callback(boolean, errors)` | Clears the local cache of tiles. `getOfflineUsage(callback)` | `callback(size, error)` | Gets the size in bytes of the local tile cache. @@ -28,14 +33,8 @@ Methods | Returns | Description `saveToFile(filename, callback)` | `callback( boolean, error)` | Saves tile cache into a portable csv format. `loadFromFile(filename, callback)` | `callback( boolean, error)` | Reads a csv file into local tile cache. `estimateTileSize(callback)` | `callback(number)` | Retrieves one tile from a layer and then returns its size. -`prepareForOffline(` `minLevel, maxLevel, extent, ` `reportProgress)` | `callback(number)` | Retrieves tiles and stores them in the local cache. See the "How To Use" section below to learn more about customizing the use of this method. `getMaxZoom(callback)` | `callback(number)` | Returns the maximum zoom level of the layer. `getMinZoom(callback)` | `callback(number)` | Returns the minimum zoom level of the layer. - - -###Properties -Property | Description ---- | --- -`layer.offline.proxyPath`| For CORS enabled servers this can be set to `null`. The default is null. All ArcGIS Online-based services uses CORS. If you are using a non-CORS enabled server you'll need a proxy. Don't forget to check your proxy configuration to allow connections for all possible services that you might be using. More information on using proxies with ArcGIS can be found here: [https://developers.arcgis.com/javascript/jshelp/ags_proxy.html](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html). +`getMinMaxLOD(minZoomAdjust,` `maxZoomAdjust)` | `{min: zoomLevel, max: zoomLevel}` | Utility method for bracketing above and below your current Level of Detail. Use this in conjunction with setting the minLevel and maxLevel in `prepareForOffline()`. `minZoomAdjust` is an Integer specifying how far above the current layer you want to retrieve tiles. `maxZoomAdjust` is an Integer specifying how far below (closer to earth) the current layer you want to retrieve tiles diff --git a/lib/tiles/OfflineTilesEnablerLayer.js b/lib/tiles/OfflineTilesEnablerLayer.js index 0850c362..31553cb8 100644 --- a/lib/tiles/OfflineTilesEnablerLayer.js +++ b/lib/tiles/OfflineTilesEnablerLayer.js @@ -207,6 +207,35 @@ define([ callback(this._minZoom); }, + /** + * Utility method for bracketing above and below your current Level of Detail. Use + * this in conjunction with setting the minLevel and maxLevel in prepareForOffline(). + * @param minZoomAdjust An Integer specifying how far above the current layer you want to retrieve tiles + * @param maxZoomAdjust An Integer specifying how far below (closer to earth) the current layer you want to retrieve tiles + */ + getMinMaxLOD: function(minZoomAdjust,maxZoomAdjust){ + var zoom = {}; + var map = this.getMap(); + var min = map.getLevel() + minZoomAdjust; + var max = map.getLevel() + maxZoomAdjust; + if(this._maxZoom != null && this._minZoom != null){ + zoom.max = Math.min(this._maxZoom, max); //prevent errors by setting the tile layer floor + zoom.min = Math.max(this._minZoom, min); //prevent errors by setting the tile layer ceiling + } + else{ + this.getMinZoom(function(result){ + zoom.min = Math.max(result, min); //prevent errors by setting the tile layer ceiling + }); + + this.getMaxZoom(function(result){ + zoom.max = Math.min(result, max); //prevent errors by setting the tile layer floor + }); + } + + return zoom; + + }, + /** * Retrieves tiles and stores them in the local cache. * @param minLevel diff --git a/lib/tiles/offlineTilesEnabler.js b/lib/tiles/offlineTilesEnabler.js index 61bac0b3..359ca7cd 100644 --- a/lib/tiles/offlineTilesEnabler.js +++ b/lib/tiles/offlineTilesEnabler.js @@ -246,7 +246,7 @@ define([ * @param callback number */ layer.getMaxZoom = function(callback){ - + // TO-DO make this a simple return rather than a callback if(this._maxZoom == null){ this._maxZoom = layer.tileInfo.lods[layer.tileInfo.lods.length-1].level; } @@ -258,12 +258,41 @@ define([ * @param callback number */ layer.getMinZoom = function(callback){ - + // TO-DO make this a simple return rather than a callback if(this._minZoom == null){ this._minZoom = layer.tileInfo.lods[0].level; } callback(this._minZoom); - }, + }; + + /** + * Utility method for bracketing above and below your current Level of Detail. Use + * this in conjunction with setting the minLevel and maxLevel in prepareForOffline(). + * @param minZoomAdjust An Integer specifying how far above the current layer you want to retrieve tiles + * @param maxZoomAdjust An Integer specifying how far below (closer to earth) the current layer you want to retrieve tiles + */ + layer.getMinMaxLOD = function(minZoomAdjust,maxZoomAdjust){ + var zoom = {}; + var map = layer.getMap(); + var min = map.getLevel() + minZoomAdjust; + var max = map.getLevel() + maxZoomAdjust; + if(this._maxZoom != null && this._minZoom != null){ + zoom.max = Math.min(this._maxZoom, max); //prevent errors by setting the tile layer floor + zoom.min = Math.max(this._minZoom, min); //prevent errors by setting the tile layer ceiling + } + else{ + layer.getMinZoom(function(result){ + zoom.min = Math.max(result, min); //prevent errors by setting the tile layer ceiling + }); + + layer.getMaxZoom(function(result){ + zoom.max = Math.min(result, max); //prevent errors by setting the tile layer floor + }); + } + + return zoom; + + }; /* internal methods */ diff --git a/test/spec/offlineTilesEnablerLayerSpec.js b/test/spec/offlineTilesEnablerLayerSpec.js index 0920fd79..4a12aba1 100644 --- a/test/spec/offlineTilesEnablerLayerSpec.js +++ b/test/spec/offlineTilesEnablerLayerSpec.js @@ -205,6 +205,14 @@ describe("offline enabler custom layer library", function() }) }); + async.it("getMinMaxLOD", function(done){ + var object = g_basemapLayer.getMinMaxLOD(-1,1); + console.log("OBJECT " + JSON.stringify(object)); + expect(object.min).toBe(13); + expect(object.max).toBe(15); + done(); + }) + async.it("verifies ability to retrieve layer info",function(done){ g_basemapLayer._getTileInfoPrivate("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",function(result){ var fixedResponse = result.replace(/\\'/g, "'"); diff --git a/test/spec/offlineTilesEnablerSpec.js b/test/spec/offlineTilesEnablerSpec.js index e55adb52..48589dbc 100644 --- a/test/spec/offlineTilesEnablerSpec.js +++ b/test/spec/offlineTilesEnablerSpec.js @@ -269,4 +269,12 @@ describe("offline enabler library", function() }) }); + async.it("getMinMaxLOD", function(done){ + var object = g_basemapLayer.getMinMaxLOD(-1,1); + console.log("OBJECT " + JSON.stringify(object)); + expect(object.min).toBe(13); + expect(object.max).toBe(15); + done(); + }) + }); \ No newline at end of file From 060bb7ac069fa49b692430bd338da7768ed34c0b Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Tue, 7 Oct 2014 15:38:31 -0600 Subject: [PATCH 20/57] add modal popup widget --- samples/widgets/modal/css/modal-popup.css | 162 ++++++++++++++++++++++ samples/widgets/modal/popup.js | 71 ++++++++++ samples/widgets/modal/template/popup.html | 46 ++++++ 3 files changed, 279 insertions(+) create mode 100644 samples/widgets/modal/css/modal-popup.css create mode 100644 samples/widgets/modal/popup.js create mode 100644 samples/widgets/modal/template/popup.html diff --git a/samples/widgets/modal/css/modal-popup.css b/samples/widgets/modal/css/modal-popup.css new file mode 100644 index 00000000..3703a826 --- /dev/null +++ b/samples/widgets/modal/css/modal-popup.css @@ -0,0 +1,162 @@ +.mod-popup-div { + opacity: 0; + height: 0; + width: 0; + z-index: 98; + font-size: x-large; + position: absolute; + top: 0px; + left: -1000px; +} +.mod-popup-body { + position: relative; + top: 10%; + left: 10%; + z-index: 100; + height: 80%; + width: 80%; + border-radius: 10px; + background-color: black; + display: table; + opacity: 0.7; +} +.mod-popup-modal-background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + opacity: 0.5; + background-color: black; + z-index: 99; + display: table; +} +.mod-popup-input { + border-bottom: solid #ffffff 1px; + width: 80%; + display: table-cell; + vertical-align: middle; + padding: 12px; +} +.mod-popup-label { + padding: 12px; + width: 20%; + display: table-cell; + vertical-align: middle; + background-color: dimgrey; +} +.mod-popup-label-top-left { + padding: 12px; + width: 20%; + display: table-cell; + vertical-align: middle; + background-color: dimgray; + border-top-left-radius: 10px; +} +.mod-popup-table-row { + color: white; + border-radius: 10px; + display: table-row; +} +.mod-popup-stop-input { + border-radius: 5px; + font-size: x-large; + width: 90%; + height: 75%; + padding: 5px; +} +.mod-popup-stop-input-disabled { + color: white; + border-radius: 5px; + font-size: x-large; + background-color: dimgray; + opacity: 1.0; /* For safari display bug */ + padding: 5px; + width: 90%; + height: 75%; +} +.mod-popup-button { + position: relative; + float: left; + color: #ffffff; + font-size: x-large; + border-radius: 10px; + width: 45%; + padding: 8px; + background-color: #000000; + border: solid #ffffff 2px; +} +.mod-popup-button:active { + position: relative; + float: left; + color: #000000; + font-size: x-large; + border-radius: 10px; + width: 45%; + padding: 8px; + background-color: lightyellow; + border: solid #ffffff 2px; +} +.mod-popup-button-cancel { + position: relative; + float: left; + color: lightgray; + font-size: x-large; + border-radius: 10px; + width: 100%; + padding: 8px; + background-color: #000000; + border: solid lightgray 1px; +} +.mod-popup-button-cancel:active { + position: relative; + float: left; + color: #000000; + font-size: x-large; + border-radius: 10px; + width: 100%; + padding: 8px; + background-color: lightyellow; + border: solid lightgray 1px; +} +.mod-popup-button-div { + padding: 12px; + display: table-cell; + vertical-align: middle; + background-color: #000000; +} +.mod-popup-button-div-bottom-left { + padding: 12px; + display: table-cell; + vertical-align: middle; + background-color: #000000; + border-bottom-left-radius: 8px; +} +@media (max-width: 500px) { + .mod-popup-button { + font-size: small; + } + .mod-popup-button:active{ + font-size: small; + } + .mod-popup-button-cancel { + font-size: small; + } + .mod-popup-button-cancel:active { + font-size: small; + } +} +@media (max-width: 450px) { + .mod-popup-button { + font-size: x-small; + } + .mod-popup-button:active{ + font-size: x-small; + } + .mod-popup-button-cancel { + font-size: x-small; + } + .mod-popup-button-cancel:active { + font-size: x-small; + } +} \ No newline at end of file diff --git a/samples/widgets/modal/popup.js b/samples/widgets/modal/popup.js new file mode 100644 index 00000000..fc80c07b --- /dev/null +++ b/samples/widgets/modal/popup.js @@ -0,0 +1,71 @@ +/** + * Modal Popup Widget + * This widget provides a basic framework for building modal popups + * for mobile GIS web applications. + * @author @agup + */ +define([ + "dojo/_base/declare", "dojo/parser", "dojo/ready", + "dijit/_WidgetBase", "dijit/_TemplatedMixin","dojo/query", + "dojo/text!../widgets/template/popup.html","dojo/NodeList-manipulate" +], function(declare, parser, ready, _WidgetBase, _TemplatedMixin,query,template){ + + return declare("ModalPopup", [_WidgetBase, _TemplatedMixin], { + + options: { + animation: false, + animationDuration: 1 + }, + + templateString: template, + + constructor: function (options, srcRefNode) { + // mix in settings and defaults + declare.safeMixin(this.options, options); + + // widget node + this.domNode = srcRefNode; + + // Set properties + this.set("animation", this.options.animation); + this.set("animationDuration", this.options.animationDuration); + }, + + show: function () { + + if(this.animation){ + // You can design any animation you want! + this.domNode.style.opacity = 1; + this.domNode.style.left = 0; + this.domNode.style.top = 0; + this.domNode.style.width = "100%"; + this.domNode.style.height = "100%"; + this.domNode.style.transition = "all " + this.animationDuration + "s linear 0s"; + } + else{ + this.domNode.style.position = "static"; + } + }, + + hide: function () { + + if(this.animation){ + // You can design any animation you want! + this.domNode.style.height = 0; + this.domNode.style.width = 0; + this.domNode.style.opacity = 0; + this.domNode.style.top = "0px"; + this.domNode.style.left = -1000 + "px"; + this.domNode.style.transition = "all " + this.animationDuration + "s ease-in-out 0s"; + } + else{ + this.domNode.style.position = "absolute"; + } + }, + + // connections/subscriptions will be cleaned up during the destroy() lifecycle phase + destroy: function () { + this.inherited(arguments); + } + }); +}); diff --git a/samples/widgets/modal/template/popup.html b/samples/widgets/modal/template/popup.html new file mode 100644 index 00000000..eeed14c9 --- /dev/null +++ b/samples/widgets/modal/template/popup.html @@ -0,0 +1,46 @@ +
+ +
+
+
ID
+
+ +
+
+
+
Bustop ID
+
+ +
+
+
+
Routes
+
+ +
+
+
+
Stopnames
+
+ +
+
+
+
+ +
+
+ + +
+
+
+ +
\ No newline at end of file From 021e06a5389d5ee66844beb472413cf4a79229e3 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Tue, 7 Oct 2014 15:38:58 -0600 Subject: [PATCH 21/57] add header file for demos --- demo/header.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 demo/header.html diff --git a/demo/header.html b/demo/header.html new file mode 100644 index 00000000..f9074abd --- /dev/null +++ b/demo/header.html @@ -0,0 +1,24 @@ + \ No newline at end of file From 349e14f4e51e2e61f204e4f68f7fb7e7592fea8e Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Tue, 7 Oct 2014 15:39:23 -0600 Subject: [PATCH 22/57] update version no. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 358c05b1..1728b3a4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "offline-editor", - "version": "2.2", + "name": "offline-editor-js", + "version": "2.3", "description": "Lighweight set of libraries for working offline with map tiles and ArcGIS feature services", "author": "Andy Gup (http://blog.andygup.net)", "license": "Apache 2", From aa403e3b0e96086aedddeb11447d252f6b695a1f Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Tue, 7 Oct 2014 15:44:21 -0600 Subject: [PATCH 23/57] minor tweaks to appcache-features --- samples/appcache-features.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/samples/appcache-features.html b/samples/appcache-features.html index f4c5508f..63f39d8e 100644 --- a/samples/appcache-features.html +++ b/samples/appcache-features.html @@ -174,7 +174,9 @@ - - - - + + + - From 7e825e0a42bd755185dab5b151e610696aa601d4 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Tue, 7 Oct 2014 17:29:23 -0600 Subject: [PATCH 26/57] fixed display bug --- demo/getstarted-editing.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html index d23794de..472ea72b 100644 --- a/demo/getstarted-editing.html +++ b/demo/getstarted-editing.html @@ -239,10 +239,10 @@

Step 2: Fill in the basics

Step 3: Configure modal popup

-

This initializes and configures the modal popup. Test to make sure map loads and popup displays.</p> - <br> +

This initializes and configures the modal popup. Test to make sure map loads and popup displays.

+
- <pre class="prettyprint"> + 
                         
 <!DOCTYPE html>
 <html>
@@ -721,7 +721,8 @@ 
Step 4: Configure offline editing.

                 // IMPORTANT!!!
                 // A proxy page may be required to upload attachments.
                 // If you are using a CORS enabled server you may be able to set the proxyPath to null.
-                // Refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
+                // Refer to "Using the Proxy Page" for more information:
+                //https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
                 offlineFeaturesManager.proxyPath = null;
 
                 offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updatePendingEditStatus);

From d2a6a0a4c18a4c8ddd9e11e92ee0ba372f3cebdc Mon Sep 17 00:00:00 2001
From: Andy Gup 
Date: Tue, 7 Oct 2014 17:36:22 -0600
Subject: [PATCH 27/57] add event listener to inflate map

---
 demo/getstarted-editing.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html
index 472ea72b..c410ba31 100644
--- a/demo/getstarted-editing.html
+++ b/demo/getstarted-editing.html
@@ -969,9 +969,15 @@ 
Step 4: Configure offline editing.

                 var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
 
                 initVars();
-                initMap();
+                $(document).ready(function () {
+                    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+                        if (e.target.text === "Map") {
+                            showMap();
+                        }
+                    });
+                });
 
-                function initMap(){
+                function showMap(){
                     if(map){
                         map.destroy();
                     }

From a707223b4bfaf61d97c59d7a6deb2d80dbdc1eff Mon Sep 17 00:00:00 2001
From: Andy Gup 
Date: Tue, 7 Oct 2014 17:48:09 -0600
Subject: [PATCH 28/57] adds header and removes jquery async

---
 demo/getstarted-agol.html  | 36 ++++++++-----------------------
 demo/getstarted-tiles.html | 32 +++++++---------------------
 demo/getstarted-tpk.html   | 43 +++++++++++---------------------------
 3 files changed, 28 insertions(+), 83 deletions(-)

diff --git a/demo/getstarted-agol.html b/demo/getstarted-agol.html
index b8f8ad35..01e2b5d6 100644
--- a/demo/getstarted-agol.html
+++ b/demo/getstarted-agol.html
@@ -56,30 +56,7 @@
     Fork me on GitHub
 
 
-
+
 
 
 

@@ -126,7 +103,7 @@ 
Step 2: Fill in the basics

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
     <title>Simple Map</title>
-    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
     <style>
         html, body, #map {
             height: 100%;
@@ -162,7 +139,7 @@ 
Step 2: Fill in the basics

     <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
     <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-    <script src="http://js.arcgis.com/3.10/"></script>
+    <script src="http://js.arcgis.com/3.11/"></script>
 </head>
 
 <body>
@@ -494,10 +471,15 @@ 
Step 4: Configure tiles download.

 
 
 
-
+
 
 
 
-
+
 
 
 
-
+
 
 
 
 
 
 

From 2a1f4c882f34ac632fafe3d3351d6b53adcb998b Mon Sep 17 00:00:00 2001
From: Andy Gup 
Date: Wed, 8 Oct 2014 16:47:08 -0600
Subject: [PATCH 29/57] add main getStarted doc

---
 demo/getstarted.html | 124 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 demo/getstarted.html

diff --git a/demo/getstarted.html b/demo/getstarted.html
new file mode 100644
index 00000000..4de420ee
--- /dev/null
+++ b/demo/getstarted.html
@@ -0,0 +1,124 @@
+
+
+
+    
+    
+    
+    
+
+    Offline-editor-js
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+    
+
+    
+
+
+
+
+
+
+
+
+
+

+    

+        
Getting Started Samples

+        
Basic samples that show how to work with the ArcGIS API for JavaScript while offline.

+        
+    

+

+
+

+
+    

+        

+            

+                
Choose from the following samples

+            

+            

+                Offline Tiled Map Services
+                Offline ArcGIS Online tiled maps
+                Offline Editing
+                Offline TPKs (Tile Packages)
+            

+        

+    

+
+    

+        

+            

+                
Fork or clone offline-editor-js

+            

+            

+                
Here are the important directories to know:

+                
    
+                    
  • \dist - minified library files and concatenated source.
    • 
+                    
  • \samples - comprehensive examples that demonstrate the library's functionality.
    • 
+                    
  • \vendor - contains IndexedDBShim and offline.js helper libraries
    • 
+                

+                

+                
+            

+        

+    

+
+

+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file

From c92d9a9d612dd5d6f2db57d1a67cb3c6e805be51 Mon Sep 17 00:00:00 2001
From: Andy Gup 
Date: Wed, 8 Oct 2014 16:51:59 -0600
Subject: [PATCH 30/57] adds how to use links

---
 demo/api-doc.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/demo/api-doc.html b/demo/api-doc.html
index 8c81e75b..5b3010d4 100644
--- a/demo/api-doc.html
+++ b/demo/api-doc.html
@@ -106,6 +106,9 @@ 
Offline Tiles - Basic

                         
  • 
                             O.esri.Tiles.OfflineTilesEnabler
                         
    • 
+                        
  • 
+                            How to use.
+                        
    •
    @@ -122,6 +125,9 @@

    Offline Tiles - Advanced

  • O.esri.Tiles.OfflineTilesEnablerLayer
    • +
  • + How to use. +
    • @@ -137,6 +143,9 @@

    Offline Features

  • O.esri.Edit.OfflineFeaturesManager
    • +
  • + How to use. +
    • @@ -153,6 +162,9 @@

    Offline TPK

  • O.esri.TPK.TPKLayer
    • +
  • + How to use. +
    • From 74d3ad4f146942cdc6f4855dd716098fd750a55f Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Wed, 8 Oct 2014 16:52:37 -0600 Subject: [PATCH 31/57] fix get started link - removes drop down --- demo/header.html | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/demo/header.html b/demo/header.html index f9074abd..6c3b445a 100644 --- a/demo/header.html +++ b/demo/header.html @@ -5,17 +5,8 @@
    From be97e48403ced5b3e893637c10de7ca13b06d783 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Wed, 8 Oct 2014 18:02:37 -0600 Subject: [PATCH 32/57] auto load header --- demo/api-doc.html | 34 ++++++++-------------------------- 1 file changed, 8 insertions(+), 26 deletions(-) diff --git a/demo/api-doc.html b/demo/api-doc.html index 5b3010d4..a22b559a 100644 --- a/demo/api-doc.html +++ b/demo/api-doc.html @@ -56,36 +56,13 @@ Fork me on GitHub - +

    API Docs

    -

    Documentation for the offline JavaScript libraries in this repo.

    +

    Documentation for the offline-editor-js JavaScript libraries.

    @@ -172,12 +149,17 @@

    Offline TPK

    + + - From 0161f65c0d06bd82a8af277cdfe515626e2733ca Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Wed, 8 Oct 2014 18:03:00 -0600 Subject: [PATCH 33/57] auto load header --- demo/index.html | 32 +++++++------------------------- 1 file changed, 7 insertions(+), 25 deletions(-) diff --git a/demo/index.html b/demo/index.html index c987a4b2..a17c890e 100644 --- a/demo/index.html +++ b/demo/index.html @@ -27,30 +27,7 @@ Fork me on GitHub - +
    @@ -185,12 +162,17 @@

    Supported Browsers

    + + - \ No newline at end of file From 6c107240e27625db074747b9434715dadf8fcf57 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Wed, 8 Oct 2014 18:03:35 -0600 Subject: [PATCH 34/57] get started w/ tiles sample now responsive --- demo/getstarted-tiles.html | 589 +++++++++++++++++++++---------------- 1 file changed, 337 insertions(+), 252 deletions(-) diff --git a/demo/getstarted-tiles.html b/demo/getstarted-tiles.html index 1e10e0ba..d2b55ae5 100644 --- a/demo/getstarted-tiles.html +++ b/demo/getstarted-tiles.html @@ -11,7 +11,7 @@ - + @@ -61,7 +61,7 @@
    -

    Getting Started

    +

    Getting Started with Tiles

    Basic steps for working with tiled base map services for offline.

    @@ -76,23 +76,11 @@

    Getting Started

  • Step 1
  • Step 2
  • Step 3
    • -
  • Step 4
    • -

    Step 1: Fork or clone offline-editor-js

    -

    Here are the important directories to know:

    -
      -
    • \dist - concatenated library source and minified library files.
      • -
    • \samples - examples that demonstrate the library's functionality.
      • -
    • \vendor - contains IndexedDBShim and offline.js libraries
      • -
    -
    - -
    -
    -

    Step 2: Fill in the basics

    +

    Step 1: Fill in the basics

    Add the basic library references. Then test to make sure map loads.


    @@ -102,17 +90,21 @@ 
    Step 2: Fill in the basics
    
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-    <title>Simple Map</title>
-    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <title>Offline Tiles</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
+    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
     <style>
-        html, body, #map {
-            height: 100%;
-            width: 100%;
-            margin: 0;
-            padding: 0;
+        #mapDiv {
+            min-height: 300px;
+            max-height: 1000px;
         }
+
         body {
-            background-color: #000000;
+            background-color: #ffffff;
             overflow: hidden;
             font-family: "Trebuchet MS";
         }
@@ -128,7 +120,7 @@ 
    Step 2: Fill in the basics
    
                 image: {
                     url: function() {
                         return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                            (Math.floor(Math.random() * 1000000000));
+                                (Math.floor(Math.random() * 1000000000));
                     }
                 },
                 active: 'image'
@@ -139,24 +131,37 @@ 
    Step 2: Fill in the basics
    
     <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
     <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-    <script src="http://js.arcgis.com/3.10/"></script>
+    <script src="http://js.arcgis.com/3.11/"></script>
 </head>
 
 <body>
-    <div id="map"></div>
+<div class="row">
+    <div class="col-xs-12">
+        <div id="mapDiv"></div>
+    </div>
+</div>
 
-    <script>
-        var map;
-
-        // Make sure to reference the tiles library within the require statement!
-        require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
-            map = new Map("map", {
-                basemap: "topo",
-                center: [-122.45, 37.75], // longitude, latitude
-                zoom: 13
-            });
+<script>
+
+    // Make sure to reference the tiles library within the require statement!
+    require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
+        function(Map,on,Bootstrapmap) {
+
+        // Initialize our map to be responsive
+        var map = Bootstrapmap.create("mapDiv",{
+            basemap: "topo",
+            center: [-122.45, 37.75], // longitude, latitude
+            zoom: 15
         });
-    </script>
+
+    });
+</script>
+
+<!-- Bootstrap core JavaScript
+================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </body>
 </html>
 
@@ -164,8 +169,8 @@ 
    Step 2: Fill in the basics
    NOTE: Replace paths with your references.
    -
    -

    Step 3: Configure tiled basemap to work offline

    +
    +

    Step 2: Configure tiled basemap to work offline

    This initializes the offline-editor-js library. Test to make sure map loads.


    @@ -176,17 +181,21 @@

    Step 3: Configure tiled basemap to work offline

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> - <title>Simple Map</title> - <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> + <title>Offline Tiles</title> + + <!-- Bootstrap core CSS --> + <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> + + <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> + <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> - html, body, #map { - height: 100%; - width: 100%; - margin: 0; - padding: 0; + #mapDiv { + min-height: 300px; + max-height: 1000px; } + body { - background-color: #000000; + background-color: #ffffff; overflow: hidden; font-family: "Trebuchet MS"; } @@ -202,7 +211,7 @@

    Step 3: Configure tiled basemap to work offline

    image: { url: function() { return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' + - (Math.floor(Math.random() * 1000000000)); + (Math.floor(Math.random() * 1000000000)); } }, active: 'image' @@ -213,53 +222,63 @@

    Step 3: Configure tiled basemap to work offline

    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x --> <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script> - <script src="http://js.arcgis.com/3.10/"></script> + <script src="http://js.arcgis.com/3.11/"></script> </head> <body> - <div id="map"></div> +<div class="row"> + <div class="col-xs-12"> + <div id="mapDiv"></div> + </div> +</div> - <script> - var map; +<script> - // Make sure to reference the offline tiles library within the require statement! - require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) { + // Make sure to reference the tiles library within the require statement! + require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], + function(Map,on,Bootstrapmap) { - // Check if browser state is online or offline - Offline.check(); - Offline.on('up down', updateState ); + // Check if browser state is online or offline + Offline.check(); + Offline.on('up down', updateState ); - // Initialize Esri.Map - map = new Map("map", { - //basemap: "topo", // comment out this basemap! - center: [-122.45, 37.75], // longitude, latitude - zoom: 13 - }); + // Initialize our map to be responsive + var map = Bootstrapmap.create("mapDiv",{ + //basemap: "topo", // comment out this basemap! + center: [-122.45, 37.75], // longitude, latitude + zoom: 15 + }); - // Now we initialize a topo tiled basemap service to be offline-enabled. - tileLayer = O.esri.Tiles.OfflineTileEnablerLayer( - "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", - function(evt){ - console.log("Offline tile lib enabled. App is: " + Offline.state); - }, - true); + // Now we initialize a topo tiled basemap service to be offline-enabled. + var tileLayer = O.esri.Tiles.OfflineTileEnablerLayer( + "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", + function(evt){ + console.log("Offline tile lib enabled. App is: " + Offline.state); + }, + true); - // Add our offline tile layer to the map instead of using the default basemap! - map.addLayer(tileLayer); + // Add our offline tile layer to the map instead of using the default basemap! + map.addLayer(tileLayer); - // Set the tileLayer online or offline. - // When set to offline, the map will look for tiles in the tiles database - function updateState(){ - if(Offline.state === 'up'){ - if(typeof tileLayer != "undefined") tileLayer.goOnline(); - } - else{ - if(typeof tileLayer != "undefined") tileLayer.goOffline(); - } + // Set the tileLayer online or offline. + // When set to offline, the map will look for tiles in the local tiles database + function updateState(){ + if(Offline.state === 'up'){ + if(typeof tileLayer != "undefined") tileLayer.goOnline(); + } + else{ + if(typeof tileLayer != "undefined") tileLayer.goOffline(); } + } - }); - </script> + }); +</script> + +<!-- Bootstrap core JavaScript +================================================== --> +<!-- Placed at the end of the document so the pages load faster --> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html> @@ -269,8 +288,8 @@

    Step 3: Configure tiled basemap to work offline

    -
    -

    Step 4: Configure tiles download.

    +
    +

    Step 3: Configure tiles download.

    Enable the ability to download tiles as well the ability to toggle online and offline.


    @@ -292,20 +311,26 @@

    Step 4: Configure tiles download.

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> - <title>Simple Map</title> - <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> + <title>Offline Tiles</title> + + <!-- Bootstrap core CSS --> + <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> + + <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> + <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> - html, body, #map { - height: 100%; - width: 100%; - margin: 0; - padding: 0; + #mapDiv { + min-height: 300px; + max-height: 1000px; } + body { - background-color: #000000; + background-color: #ffffff; overflow: hidden; font-family: "Trebuchet MS"; } + + .floatRight { float: right;} </style> <!-- Include a reference to offline.js which detects online/offline conditions --> @@ -318,7 +343,7 @@

    Step 4: Configure tiles download.

    image: { url: function() { return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' + - (Math.floor(Math.random() * 1000000000)); + (Math.floor(Math.random() * 1000000000)); } }, active: 'image' @@ -329,30 +354,51 @@

    Step 4: Configure tiles download.

    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x --> <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script> - <script src="http://js.arcgis.com/3.10/"></script> + <script src="http://js.arcgis.com/3.11/"></script> </head> <body> - <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button> - <button class="basic-btn" id="btn-online-offline">2. Go Offline</button> - <button class="basic-btn" id="btn-pan-left">3. Pan left</button> - - <div id="map"></div> - - <script> - var map; - - // Make sure to reference the offline tiles library within the require statement! - require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], - function(Map,on){ +<!-- Our buttons and online/offline indicator --> +<div class="container"> + <div class="row"> + <div class="col-xs-10"> + <div class="form form-group btn-group" data-toggle="buttons"> + <button class="btn btn-success" id="btn-get-tiles">1. Download Tiles</button> + <button class="btn btn-success" disabled id="btn-online-offline">2. Go Offline</button> + <button class="btn btn-success" disabled id="btn-pan-left">3. Pan left</button> + </div> + </div> + <div class="col-xs-2"> + <!-- this indicates whether app is offline (down) or online (up) --> + <button id="btn-state" class="btn btn-success btn-large floatRight"> + <span id="state-span" class="glyphicon glyphicon-link"> Up</span> + </button> + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + <div id="mapDiv"></div> + </div> + </div> +</div> + +<script> + + // Make sure to reference the tiles library within the require statement! + require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js", + "../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], + function(Map,on,Bootstrapmap){ + + var map,basemapLayer; // Check if browser state is online or offline Offline.check(); Offline.on('up down', updateState ); // For cancelling the download of tiles - var _wantToCancel; + var _wantToCancel = false; + var _downloadState = "downloaded"; // Set up min and max boundaries for retrieving tiles var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom; @@ -366,117 +412,148 @@

    Step 4: Configure tiles download.

    on(btnOnlineOffline,"click",goOnlineOffline); on(btnPanLeft,"click",panLeft); - // Initialize Esri.Map - map = new Map("map", { - //basemap: "topo", // comment out this basemap! - center: [-122.45, 37.75], // longitude, latitude - zoom: 13 - }); + var imgOfflineIndicator = document.getElementById("state-span"); + var btnState = document.getElementById("btn-state"); - // Now we initialize a topo tiled basemap service to be offline-enabled. - tileLayer = O.esri.Tiles.OfflineTileEnablerLayer( - "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", - function(evt){ - console.log("Offline tile lib enabled. App is: " + Offline.state); - }, - true); + showMap(); - // Set the min and max zoom levels for when retrieving tiles - // This helps manage the amount of database space used. - map.on("load",function(evt){ - tileLayer.getMaxZoom(function(result){ - mMaxZoom = result; - }); - tileLayer.getMinZoom(function(result){ - mMinZoom = result; + function showMap(){ + + // Initialize our map to be responsive + map = Bootstrapmap.create("mapDiv",{ + //basemap: "topo", // comment out this basemap! + center: [-122.45, 37.75], // longitude, latitude + zoom: 15 }); - }) - // Add our offline tile layer to the map instead of using the default basemap! - map.addLayer(tileLayer); + // Now we initialize the basemap to be offline-enabled. This is out new basemap. + basemapLayer = O.esri.Tiles.OfflineTileEnablerLayer( + "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", + function(evt){ + console.log("Offline tile lib enabled. App is: " + Offline.state); + }, + true); + + // Set the min and max zoom for when retrieving tiles + map.on("load",function(evt){ + basemapLayer.getMaxZoom(function(result){ + mMaxZoom = result; + }); + basemapLayer.getMinZoom(function(result){ + mMinZoom = result; + }); + }) - function downloadTiles(){ - // First we need to empty the database. - tileLayer.deleteAllTiles(function(success,err){ + // Add our offline tile layer to the map instead of using the default basemap! + map.addLayer(basemapLayer); + } - var zoom = getMinMaxZoom(); - var extent = tileLayer.getExtentBuffer(0,map.extent); + function downloadTiles(){ - // Begin downloading tiles - tileLayer.prepareForOffline(zoom.min, zoom.max, extent, function(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(_downloadState == "downloading"){ + _wantToCancel = true; + } + else{ + _wantToCancel = false; - if( progress.finishedDownloading ) - { - btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel"; + // First delete any existing tiles from database + basemapLayer.deleteAllTiles(function(success,err){ + var zoom = basemapLayer.getMinMaxLOD(minZoomAdjust,maxZoomAdjust); - if( progress.cancelRequested ) - { - alert("Tile download was cancelled"); + // Now download tiles + basemapLayer.prepareForOffline(zoom.min, zoom.max, map.extent, function(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"; } - else + + if( progress.finishedDownloading ) { - alert("Tile download complete"); + btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel"; + + if( progress.cancelRequested ) + { + alert("Tile download was cancelled"); + _downloadState = "cancelled"; + } + else + { + alert("Tile download complete"); + _downloadState = "downloaded"; + btnOnlineOffline.disabled = false; + } + + btnGetTiles.innerHTML = '1. Download Tiles'; } + return _wantToCancel; //determines if a cancel request has been issued + }); + + _downloadState = "downloading"; - btnGetTiles.innerHTML = '1. Download Tiles'; - } - return _wantToCancel; //determines if a cancel request has been issued }); - }); + } } // Force the tileLayer between online and offline function goOnlineOffline(){ + + btnPanLeft.disabled = false; + if(btnOnlineOffline.innerHTML == "2. Go Offline"){ - btnOnlineOffline.innerHTML = "2. Go Online"; - tileLayer.goOffline(); - document.body.style.backgroundColor = "red"; - console.log("tileLayer is offline"); + toggleStateUp(false); + console.log("Map is offline"); } else{ - btnOnlineOffline.innerHTML = "2. Go Offline"; - tileLayer.goOnline(); - document.body.style.backgroundColor = "black"; - console.log("tileLayer is online"); + toggleStateUp(true); + console.log("Map is online"); } } + function toggleStateUp(state){ + if(state){ + btnOnlineOffline.innerHTML = "2. Go Offline"; + basemapLayer.goOnline(); + imgOfflineIndicator.className = "glyphicon glyphicon-link"; + imgOfflineIndicator.innerHTML = " Up"; + btnState.className = "btn btn-success btn-large floatRight"; + } + else{ + btnOnlineOffline.innerHTML = "2. Go Online"; + basemapLayer.goOffline(); + imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down"; + imgOfflineIndicator.innerHTML = " Down"; + btnState.className = "btn btn-danger btn-large floatRight"; + } + } - // Set the tileLayer online or offline. - // When set to offline, the map will look for tiles in the tiles database + // Set the ArcGIS.com map online or offline. + // When set offline it will look for tiles in the tiles database function updateState(){ if(Offline.state === 'up'){ - if(typeof tileLayer != "undefined") tileLayer.goOnline(); + if(typeof basemapLayer != "undefined") basemapLayer.goOnline(); + toggleStateUp(true); } else{ - if(typeof tileLayer != "undefined") tileLayer.goOffline(); + if(typeof basemapLayer != "undefined") basemapLayer.goOffline(); + toggleStateUp(false); } } - // Utility function to validate min and max zoom settings of the map - function getMinMaxZoom(){ - - var zoom = {}; - var min = tileLayer.getLevel() + minZoomAdjust; - var max = tileLayer.getLevel() + maxZoomAdjust; - 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 - - return zoom; - } - function panLeft(){ map.panLeft(); } - }); - </script> + }); +</script> + +<!-- Bootstrap core JavaScript +================================================== --> +<!-- Placed at the end of the document so the pages load faster --> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html> @@ -487,13 +564,16 @@

    Step 4: Configure tiles download.

    -
    +
    - +
    +
    + +
    @@ -534,7 +614,7 @@

    Step 4: Configure tiles download.

    - + From 56ff17e81c81d38c21c8d799f549375d028334a0 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Wed, 8 Oct 2014 18:04:02 -0600 Subject: [PATCH 35/57] Minor text tweaks --- demo/getstarted.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/getstarted.html b/demo/getstarted.html index 4de420ee..e48b6d05 100644 --- a/demo/getstarted.html +++ b/demo/getstarted.html @@ -64,7 +64,7 @@

    Getting Started Samples

    -

    Basic samples that show how to work with the ArcGIS API for JavaScript while offline.

    +

    Basic responsive samples on how to work with the ArcGIS API for JavaScript while offline.

    From 8caa0e84647e3b743d2090f55dc5493f547919e6 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Wed, 8 Oct 2014 18:04:55 -0600 Subject: [PATCH 36/57] text updates --- demo/getstarted-agol.html | 24 ++++++------------------ demo/getstarted-editing.html | 28 ++++++++-------------------- demo/getstarted-tpk.html | 2 +- 3 files changed, 15 insertions(+), 39 deletions(-) diff --git a/demo/getstarted-agol.html b/demo/getstarted-agol.html index 01e2b5d6..b16889d5 100644 --- a/demo/getstarted-agol.html +++ b/demo/getstarted-agol.html @@ -61,7 +61,7 @@
    -

    Getting Started

    +

    Getting Started with ArcGIS.com

    Basic steps for working with ArcGIS.com base maps for offline.

    @@ -76,23 +76,11 @@

    Getting Started

  • Step 1
  • Step 2
  • Step 3
    • -
  • Step 4
    • -

    Step 1: Fork or clone offline-editor-js

    -

    Here are the important directories to know:

    -
      -
    • \dist - concatenated library source and minified library files.
      • -
    • \samples - examples that demonstrate the library's functionality.
      • -
    • \vendor - contains IndexedDBShim and offline.js libraries
      • -
    -
    - -
    -
    -

    Step 2: Fill in the basics

    +

    Step 1: Fill in the basics

    Add the basic library references. Then test to make sure map loads.


    @@ -170,8 +158,8 @@ 
    Step 2: Fill in the basics
    NOTE: Replace paths with your references.
    -
    -

    Step 3: Extend basemap using the offline library

    +
    +

    Step 2: Extend basemap using the offline library

    This initializes the offline-tiles-basic library and tells it which tiled map service layer to use for offline. Test to make sure map loads.


    @@ -267,8 +255,8 @@

    Step 3: Extend basemap using the offline library

    -
    -

    Step 4: Configure tiles download.

    +
    +

    Step 3: Configure tiles download.

    Enable the ability to download tiles as well the ability to toggle online and offline.


    diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html index c410ba31..606e884a 100644 --- a/demo/getstarted-editing.html +++ b/demo/getstarted-editing.html @@ -6,11 +6,11 @@ - Offline-editor-js + Get Started Editing - + @@ -68,7 +68,7 @@
    -

    Getting Started

    +

    Getting Started with Editing

    Basic steps for working with Editing geographic features for offline.

    @@ -83,23 +83,11 @@

    Getting Started

  • Step 1
  • Step 2
  • Step 3
    • -
  • Step 4
    • -

    Step 1: Fork or clone offline-editor-js

    -

    Here are the important directories to know:

    -
      -
    • \dist - concatenated library source and minified library files.
      • -
    • \samples - examples that demonstrate the library's functionality.
      • -
    • \vendor - contains IndexedDBShim and offline.js libraries
      • -
    -
    - -
    -
    -

    Step 2: Fill in the basics

    +

    Step 1: Fill in the basics

    Add library references and build basic layout. Then test to make sure map loads.


    @@ -237,8 +225,8 @@ 
    Step 2: Fill in the basics
    NOTE: Replace paths with your references.
    -
    -

    Step 3: Configure modal popup

    +
    +

    Step 2: Configure modal popup

    This initializes and configures the modal popup. Test to make sure map loads and popup displays.


    @@ -499,8 +487,8 @@

    Step 3: Configure modal popup

    -
    -

    Step 4: Configure offline editing.

    +
    +

    Step 3: Configure offline editing.

    Enable the ability to store features (points, lines and polygons) while offline, and resync features when internet is restored.


    diff --git a/demo/getstarted-tpk.html b/demo/getstarted-tpk.html index 0f7bdfa8..b993abb3 100644 --- a/demo/getstarted-tpk.html +++ b/demo/getstarted-tpk.html @@ -57,7 +57,7 @@
    -

    Getting Started

    +

    Getting Started with TPKs

    Basic steps for working with TPK packages for offline.

    From 4c32d6aad0861eb3ec97a6c762d2443986803f04 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 9 Oct 2014 09:53:29 -0600 Subject: [PATCH 37/57] fixed delayed map load bug --- samples/tiles-indexed-db.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/samples/tiles-indexed-db.html b/samples/tiles-indexed-db.html index fb4e1bba..1af64194 100644 --- a/samples/tiles-indexed-db.html +++ b/samples/tiles-indexed-db.html @@ -337,6 +337,9 @@

    Map: [none]

    on(map,"load",function() { basemapLayer = map.getLayer( map.layerIds[0] ); + initMapParts(); + initEvents(); + initOffline(); }); } From d9266a8289cc0105008a1e9c56cf54106328d347 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 9 Oct 2014 13:00:12 -0600 Subject: [PATCH 38/57] added modal widget to demo directory. --- demo/widgets/modal/css/modal-popup.css | 162 +++++++++++++++++++++++++ demo/widgets/modal/popup.js | 71 +++++++++++ demo/widgets/modal/template/popup.html | 46 +++++++ 3 files changed, 279 insertions(+) create mode 100644 demo/widgets/modal/css/modal-popup.css create mode 100644 demo/widgets/modal/popup.js create mode 100644 demo/widgets/modal/template/popup.html diff --git a/demo/widgets/modal/css/modal-popup.css b/demo/widgets/modal/css/modal-popup.css new file mode 100644 index 00000000..3703a826 --- /dev/null +++ b/demo/widgets/modal/css/modal-popup.css @@ -0,0 +1,162 @@ +.mod-popup-div { + opacity: 0; + height: 0; + width: 0; + z-index: 98; + font-size: x-large; + position: absolute; + top: 0px; + left: -1000px; +} +.mod-popup-body { + position: relative; + top: 10%; + left: 10%; + z-index: 100; + height: 80%; + width: 80%; + border-radius: 10px; + background-color: black; + display: table; + opacity: 0.7; +} +.mod-popup-modal-background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + opacity: 0.5; + background-color: black; + z-index: 99; + display: table; +} +.mod-popup-input { + border-bottom: solid #ffffff 1px; + width: 80%; + display: table-cell; + vertical-align: middle; + padding: 12px; +} +.mod-popup-label { + padding: 12px; + width: 20%; + display: table-cell; + vertical-align: middle; + background-color: dimgrey; +} +.mod-popup-label-top-left { + padding: 12px; + width: 20%; + display: table-cell; + vertical-align: middle; + background-color: dimgray; + border-top-left-radius: 10px; +} +.mod-popup-table-row { + color: white; + border-radius: 10px; + display: table-row; +} +.mod-popup-stop-input { + border-radius: 5px; + font-size: x-large; + width: 90%; + height: 75%; + padding: 5px; +} +.mod-popup-stop-input-disabled { + color: white; + border-radius: 5px; + font-size: x-large; + background-color: dimgray; + opacity: 1.0; /* For safari display bug */ + padding: 5px; + width: 90%; + height: 75%; +} +.mod-popup-button { + position: relative; + float: left; + color: #ffffff; + font-size: x-large; + border-radius: 10px; + width: 45%; + padding: 8px; + background-color: #000000; + border: solid #ffffff 2px; +} +.mod-popup-button:active { + position: relative; + float: left; + color: #000000; + font-size: x-large; + border-radius: 10px; + width: 45%; + padding: 8px; + background-color: lightyellow; + border: solid #ffffff 2px; +} +.mod-popup-button-cancel { + position: relative; + float: left; + color: lightgray; + font-size: x-large; + border-radius: 10px; + width: 100%; + padding: 8px; + background-color: #000000; + border: solid lightgray 1px; +} +.mod-popup-button-cancel:active { + position: relative; + float: left; + color: #000000; + font-size: x-large; + border-radius: 10px; + width: 100%; + padding: 8px; + background-color: lightyellow; + border: solid lightgray 1px; +} +.mod-popup-button-div { + padding: 12px; + display: table-cell; + vertical-align: middle; + background-color: #000000; +} +.mod-popup-button-div-bottom-left { + padding: 12px; + display: table-cell; + vertical-align: middle; + background-color: #000000; + border-bottom-left-radius: 8px; +} +@media (max-width: 500px) { + .mod-popup-button { + font-size: small; + } + .mod-popup-button:active{ + font-size: small; + } + .mod-popup-button-cancel { + font-size: small; + } + .mod-popup-button-cancel:active { + font-size: small; + } +} +@media (max-width: 450px) { + .mod-popup-button { + font-size: x-small; + } + .mod-popup-button:active{ + font-size: x-small; + } + .mod-popup-button-cancel { + font-size: x-small; + } + .mod-popup-button-cancel:active { + font-size: x-small; + } +} \ No newline at end of file diff --git a/demo/widgets/modal/popup.js b/demo/widgets/modal/popup.js new file mode 100644 index 00000000..00dfd3d4 --- /dev/null +++ b/demo/widgets/modal/popup.js @@ -0,0 +1,71 @@ +/** + * Modal Popup Widget + * This widget provides a basic framework for building modal popups + * for mobile GIS web applications. + * @author @agup + */ +define([ + "dojo/_base/declare", "dojo/parser", "dojo/ready", + "dijit/_WidgetBase", "dijit/_TemplatedMixin","dojo/query", + "dojo/text!./template/popup.html","dojo/NodeList-manipulate" +], function(declare, parser, ready, _WidgetBase, _TemplatedMixin,query,template){ + + return declare("ModalPopup", [_WidgetBase, _TemplatedMixin], { + + options: { + animation: false, + animationDuration: 1 + }, + + templateString: template, + + constructor: function (options, srcRefNode) { + // mix in settings and defaults + declare.safeMixin(this.options, options); + + // widget node + this.domNode = srcRefNode; + + // Set properties + this.set("animation", this.options.animation); + this.set("animationDuration", this.options.animationDuration); + }, + + show: function () { + + if(this.animation){ + // You can design any animation you want! + this.domNode.style.opacity = 1; + this.domNode.style.left = 0; + this.domNode.style.top = 0; + this.domNode.style.width = "100%"; + this.domNode.style.height = "100%"; + this.domNode.style.transition = "all " + this.animationDuration + "s linear 0s"; + } + else{ + this.domNode.style.position = "static"; + } + }, + + hide: function () { + + if(this.animation){ + // You can design any animation you want! + this.domNode.style.height = 0; + this.domNode.style.width = 0; + this.domNode.style.opacity = 0; + this.domNode.style.top = "0px"; + this.domNode.style.left = -1000 + "px"; + this.domNode.style.transition = "all " + this.animationDuration + "s ease-in-out 0s"; + } + else{ + this.domNode.style.position = "absolute"; + } + }, + + // connections/subscriptions will be cleaned up during the destroy() lifecycle phase + destroy: function () { + this.inherited(arguments); + } + }); +}); diff --git a/demo/widgets/modal/template/popup.html b/demo/widgets/modal/template/popup.html new file mode 100644 index 00000000..eeed14c9 --- /dev/null +++ b/demo/widgets/modal/template/popup.html @@ -0,0 +1,46 @@ +
    + +
    +
    +
    ID
    +
    + +
    +
    +
    +
    Bustop ID
    +
    + +
    +
    +
    +
    Routes
    +
    + +
    +
    +
    +
    Stopnames
    +
    + +
    +
    +
    +
    + +
    +
    + + +
    +
    +
    + +
    \ No newline at end of file From 24a8b7f5f13241d627038238251843b469300525 Mon Sep 17 00:00:00 2001 From: Andy Gup Date: Thu, 9 Oct 2014 13:01:03 -0600 Subject: [PATCH 39/57] 1st complete working version w/ all samples --- demo/getstarted-agol.html | 683 +++++++++++++++++++++++------------ demo/getstarted-editing.html | 6 +- demo/getstarted-tiles.html | 25 +- demo/getstarted-tpk.html | 517 ++++++++++++-------------- demo/getstarted.html | 6 +- 5 files changed, 701 insertions(+), 536 deletions(-) diff --git a/demo/getstarted-agol.html b/demo/getstarted-agol.html index b16889d5..5d802cf2 100644 --- a/demo/getstarted-agol.html +++ b/demo/getstarted-agol.html @@ -11,7 +11,7 @@ - + @@ -43,10 +43,7 @@ border: 1px solid #cccccc !important; } - #img-offline-indicator { - padding: 8px; - position: relative; float: right; - } + .floatRight {float: right;} @@ -90,20 +87,25 @@

    Step 1: Fill in the basics

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> - <title>Simple Map</title> - <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> + <title>Offline ArcGIS.com</title> + + <!-- Bootstrap core CSS --> + <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> + + <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css""> + <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> - html, body, #map { - height: 100%; - width: 100%; - margin: 0; - padding: 0; + #mapDiv { + min-height: 500px; + max-height: 1000px; } body { - background-color: #000000; + background-color: #ffffff; overflow: hidden; font-family: "Trebuchet MS"; } + .floatRight {float: right;} + .container { padding: 20px;} </style> <!-- Include a reference to offline.js which detects online/offline conditions --> @@ -116,7 +118,7 @@

    Step 1: Fill in the basics

    image: { url: function() { return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' + - (Math.floor(Math.random() * 1000000000)); + (Math.floor(Math.random() * 1000000000)); } }, active: 'image' @@ -131,36 +133,59 @@

    Step 1: Fill in the basics

    </head> <body> - <div id="map"></div> - <script> - var map; +<div class="container"> + <div class="row"> + <div class="col-xs-12"> + <div id="mapDiv"></div> + </div> + </div> +</div> - // Make sure to reference the tiles library within the require statement! - require([ - "esri/map", - "dojo/on", - "esri/arcgis/utils", - "../offline-editor-js-3/dist/offline-tiles-basic-src.js", - "dojo/domReady!"], - function(Map,on,arcgisUtils) { +<script> - // Load the map - arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","map").then(function(response){ - var map = response.map; - }); + // Make sure to reference the tiles library within the require statement! + require([ + "esri/map", + "dojo/on", + "esri/arcgis/utils", + "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js", + "../dist/offline-tiles-basic-src.js", + "dojo/domReady!"], + function(Map,on,arcgisUtils,BootstrapMap) { + + var map; + + // Load the map + arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){ + var map = response.map; + + map = response.map; + + // Initialize BootstrapMap to make the map responsive + BootstrapMap.create(map); + + }); }); - </script> +</script> + + +<!-- Bootstrap core JavaScript +================================================== --> +<!-- Placed at the end of the document so the pages load faster --> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> + </body> </html> -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory

    Step 2: Extend basemap using the offline library

    -

    This initializes the offline-tiles-basic library and tells it which tiled map service layer to use for offline. Test to make sure map loads.

    +

    This initializes the OfflineTilesEnabler library and tells it which tiled map service layer to use for offline. Test to make sure map loads.


    @@ -170,8 +195,13 @@ 
    Step 2: Extend basemap using the offline library
    
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-    <title>Simple Map</title>
-    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <title>Offline ArcGIS.com</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
+
+    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
+    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
     <style>
         html, body, #map {
             height: 100%;
@@ -184,6 +214,8 @@ 
    Step 2: Extend basemap using the offline library
    
             overflow: hidden;
             font-family: "Trebuchet MS";
         }
+        .floatRight {float: right;}
+        .container { padding: 20px;}
     </style>
 
     <!-- Include a reference to offline.js which detects online/offline conditions -->
@@ -196,7 +228,7 @@ 
    Step 2: Extend basemap using the offline library
    
                 image: {
                     url: function() {
                         return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
-                            (Math.floor(Math.random() * 1000000000));
+                                (Math.floor(Math.random() * 1000000000));
                     }
                 },
                 active: 'image'
@@ -207,51 +239,86 @@ 
    Step 2: Extend basemap using the offline library
    
     <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
     <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-    <script src="http://js.arcgis.com/3.10/"></script>
+    <script src="http://js.arcgis.com/3.11/"></script>
 </head>
 
 <body>
-    <div id="map"></div>
 
-    <script>
-        var map;
+<div class="row">
+    <div class="col-xs-12">
+        <div id="mapDiv"></div>
+    </div>
+</div>
 
-        // Make sure to reference the tiles library within the require statement!
-        require([
-            "esri/map",
-            "dojo/on",
-            "esri/arcgis/utils",
-            "../offline-editor-js-3/dist/offline-tiles-basic-src.js",
-            "dojo/domReady!"],
-            function(Map,on,arcgisUtils) {
+<script>
 
-                var basemapLayer;
+    // Make sure to reference the tiles library within the require statement!
+    require([
+        "esri/map",
+        "dojo/on",
+        "esri/arcgis/utils",
+        "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
+        "../dist/offline-tiles-basic-src.js",
+        "dojo/domReady!"],
+        function(Map,on,arcgisUtils,BootstrapMap) {
+
+            var map, basemapLayer;
+            var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler();
+
+            showMap();
 
-                // Initialize the offline tiles library.
-                var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler();
 
+            function showMap(){
                 // Load the map
-                arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","map").then(function(response){
-                    var map = response.map;
+                arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){
+                    map = response.map;
 
-                    // Get a reference to the primary tiled basemap layer
-                    basemapLayer = map.getLayer( map.layerIds[0] );
+                    // Initialize BootstrapMap to make the map responsive
+                    BootstrapMap.create(map);
+
+                    // Get the ArcGIS.com basemap that we want to use offline.
+                    // And then extend it for offline use.
+                    if(map.loaded)
+                    {
+                        basemapLayer = map.getLayer( map.layerIds[0] );
+                        initializeOfflineTiles();
+
+                    }
+                    else
+                    {
+                        map.on("load",function()
+                        {
+                            basemapLayer = map.getLayer( map.layerIds[0] );
+                            initializeOfflineTiles();
+                        });
+                    }
 
-                    // Extend the tiled basemap layer for offline use
-                    offlineTilesEnabler.extend(basemapLayer,function(success) {
-                        if (success) {
-                            console.log("SUCCESS")
-                        }
-                    })
                 });
+            }
+
+            function initializeOfflineTiles(){
+                offlineTilesEnabler.extend(basemapLayer,function(success) {
+                    if (success) {
+                        console.log("ArcGIS.com map extended for offline!")
+                    }
+                })
+            }
         });
-    </script>
+</script>
+
+
+<!-- Bootstrap core JavaScript
+================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
 </body>
 </html>
    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory
    @@ -278,20 +345,26 @@

    Step 3: Configure tiles download.

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> - <title>Simple Map</title> - <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> + <title>Offline ArcGIS.com</title> + + <!-- Bootstrap core CSS --> + <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> + + <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> + <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> - html, body, #map { - height: 100%; - width: 100%; - margin: 0; - padding: 0; + #mapDiv { + min-height: 500px; + max-height: 1000px; } body { - background-color: #000000; + background-color: #ffffff; overflow: hidden; font-family: "Trebuchet MS"; } + + .floatRight {float: right;} + .container { padding: 20px;} </style> <!-- Include a reference to offline.js which detects online/offline conditions --> @@ -304,7 +377,7 @@

    Step 3: Configure tiles download.

    image: { url: function() { return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' + - (Math.floor(Math.random() * 1000000000)); + (Math.floor(Math.random() * 1000000000)); } }, active: 'image' @@ -315,111 +388,240 @@

    Step 3: Configure tiles download.

    <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x --> <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script> - <script src="http://js.arcgis.com/3.10/"></script> + <script src="http://js.arcgis.com/3.11/"></script> </head> <body> - <button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button> - <button class="basic-btn" id="btn-online-offline">2. Go Offline</button> - <button class="basic-btn" id="btn-pan-left">3. Pan left</button> - <div id="map"></div> - <script> - var map; +<div class="container"> + <div class="row"> + <div class="col-xs-10"> + <div class="form form-group btn-group" data-toggle="buttons"> + <button class="btn btn-success" id="btn-get-tiles">1. Download Tiles</button> + <button class="btn btn-success" disabled id="btn-online-offline">2. Go Offline</button> + <button class="btn btn-success" disabled id="btn-pan-left">3. Pan left</button> + </div> + </div> + <div class="col-xs-2"> + <!-- this indicates whether app is offline (down) or online (up) --> + <button id="btn-state" class="btn btn-success btn-large floatRight"> + <span id="state-span" class="glyphicon glyphicon-link"> Up</span> + </button> + </div> + </div> + <div class="row"> + <div class="col-xs-12"> + <div id="mapDiv"></div> + </div> + </div> +</div> + +<script> + + // Make sure to reference the tiles library within the require statement! + require([ + "esri/map", + "dojo/on", + "esri/arcgis/utils", + "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js", + "../dist/offline-tiles-basic-src.js", + "dojo/domReady!"], + function(Map,on,arcgisUtils,BootstrapMap) { + + var map, basemapLayer; + var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler(); + + // Check if browser state is online or offline + Offline.check(); + Offline.on('up down', updateState ); + + // For cancelling the download of tiles + var _wantToCancel; + var _downloadState = "downloaded"; + + // Set up min and max boundaries for retrieving tiles + var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom; + + // Set up button click listeners. + var btnGetTiles = document.getElementById("btn-get-tiles"); + var btnOnlineOffline = document.getElementById("btn-online-offline"); + var btnPanLeft = document.getElementById("btn-pan-left"); + + var imgOfflineIndicator = document.getElementById("state-span"); + var btnState = document.getElementById("btn-state"); + + on(btnGetTiles,"click",downloadTiles); + on(btnOnlineOffline,"click",goOnlineOffline); + on(btnPanLeft,"click",panLeft); + + showMap(); + + + function showMap(){ + // Load the map + arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){ + map = response.map; - // Make sure to reference the tiles library within the require statement! - require([ - "esri/map", - "dojo/on", - "esri/arcgis/utils", - "../offline-editor-js-3/dist/offline-tiles-basic-src.js", - "dojo/domReady!"], - function(Map,on,arcgisUtils) { + // Initialize BootstrapMap to make the map responsive + BootstrapMap.create(map); - var basemapLayer; + // Get the ArcGIS.com basemap that we want to use offline. + // And then extend it for offline use. + if(map.loaded) + { + basemapLayer = map.getLayer( map.layerIds[0] ); + initializeOfflineTiles(); - // Check if browser state is online or offline - Offline.check(); - Offline.on('up down', updateState ); + } + else + { + map.on("load",function() + { + basemapLayer = map.getLayer( map.layerIds[0] ); + initializeOfflineTiles(); + }); + } - // Set up button click listeners. - var btnGetTiles = document.getElementById("btn-get-tiles"); - var btnOnlineOffline = document.getElementById("btn-online-offline"); - var btnPanLeft = document.getElementById("btn-pan-left"); + }); + } - on(btnGetTiles,"click",downloadTiles); - on(btnOnlineOffline,"click",goOnlineOffline); - on(btnPanLeft,"click",panLeft); + function initializeOfflineTiles(){ + offlineTilesEnabler.extend(basemapLayer,function(success) { + if (success) { + console.log("ArcGIS.com map extended for offline!") + } + }) + } - // Initialize the offline tiles library. - var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler(); + function downloadTiles(){ - // Load the map - arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","map").then(function(response){ - var map = response.map; + if(_downloadState == "downloading"){ + _wantToCancel = true; + } + else{ + _wantToCancel = false; - // Get a reference to the primary tiled basemap layer - basemapLayer = map.getLayer( map.layerIds[0] ); + // First delete any existing tiles from database + basemapLayer.deleteAllTiles(function(success,err){ + var zoom = basemapLayer.getMinMaxLOD(minZoomAdjust,maxZoomAdjust); - // Extend the tiled basemap layer for offline use - offlineTilesEnabler.extend(basemapLayer,function(success) { - if (success) { - console.log("SUCCESS") - } - }) - }); + // Now download tiles + basemapLayer.prepareForOffline(zoom.min, zoom.max, map.extent, function(progress){ + console.log("downloading tiles..."); - // Force the tileLayer between online and offline - function goOnlineOffline(){ - if(btnOnlineOffline.innerHTML == "2. Go Offline"){ - btnOnlineOffline.innerHTML = "2. Go Online"; - basemapLayer.goOffline(); - document.body.style.backgroundColor = "red"; - console.log("Map is offline"); - } - else{ - btnOnlineOffline.innerHTML = "2. Go Offline"; - basemapLayer.goOnline(); - document.body.style.backgroundColor = "black"; - console.log("Map is online"); - } + 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"; + + if( progress.cancelRequested ) + { + alert("Tile download was cancelled"); + _downloadState = "cancelled"; + } + else + { + alert("Tile download complete"); + _downloadState = "downloaded"; + btnOnlineOffline.disabled = false; + } + + btnGetTiles.innerHTML = '1. Download Tiles'; + } + return _wantToCancel; //determines if a cancel request has been issued + }); + + _downloadState = "downloading"; + + }); } + } - // Set the ArcGIS.com map online or offline. - // When set offline it will look for tiles in the tiles database - function updateState(){ - if(Offline.state === 'up'){ - if(typeof basemapLayer != "undefined") basemapLayer.goOnline(); - } - else{ - if(typeof basemapLayer != "undefined") basemapLayer.goOffline(); - } + // Force the tileLayer between online and offline + function goOnlineOffline(){ + + btnPanLeft.disabled = false; + + if(btnOnlineOffline.innerHTML == "2. Go Offline"){ + toggleStateUp(false); + console.log("Map is offline"); + } + else{ + toggleStateUp(true); + console.log("Map is online"); } + } - function panLeft(){ - map.panLeft(); + function toggleStateUp(state){ + if(state){ + btnOnlineOffline.innerHTML = "2. Go Offline"; + basemapLayer.goOnline(); + imgOfflineIndicator.className = "glyphicon glyphicon-link"; + imgOfflineIndicator.innerHTML = " Up"; + btnState.className = "btn btn-success btn-large floatRight"; } + else{ + btnOnlineOffline.innerHTML = "2. Go Online"; + basemapLayer.goOffline(); + imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down"; + imgOfflineIndicator.innerHTML = " Down"; + btnState.className = "btn btn-danger btn-large floatRight"; + } + } + + // Set the ArcGIS.com map online or offline. + // When set offline it will look for tiles in the tiles database + function updateState(){ + if(Offline.state === 'up'){ + if(typeof basemapLayer != "undefined") basemapLayer.goOnline(); + toggleStateUp(true); + } + else{ + if(typeof basemapLayer != "undefined") basemapLayer.goOffline(); + toggleStateUp(false); + } + } + + // Pan left when "offline" to view only tiles that have been stored locally + function panLeft(){ + map.panLeft(); + } + }); +</script> + + +<!-- Bootstrap core JavaScript +================================================== --> +<!-- Placed at the end of the document so the pages load faster --> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> - } // main function - ); - </script> </body> </html>     -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory
    -
    +
    - +
    +
    + +
    @@ -427,7 +629,6 @@

    Step 3: Configure tiles download.

    -
    @@ -460,7 +661,7 @@

    Step 3: Configure tiles download.

    - + diff --git a/demo/getstarted-editing.html b/demo/getstarted-editing.html index 606e884a..845fab8f 100644 --- a/demo/getstarted-editing.html +++ b/demo/getstarted-editing.html @@ -223,7 +223,7 @@

    Step 1: Fill in the basics

    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory

    Step 2: Configure modal popup

    @@ -483,7 +483,7 @@

    Step 2: Configure modal popup

    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory
    @@ -867,7 +867,7 @@

    Step 3: Configure offline editing.

    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory
    diff --git a/demo/getstarted-tiles.html b/demo/getstarted-tiles.html index d2b55ae5..537ed82a 100644 --- a/demo/getstarted-tiles.html +++ b/demo/getstarted-tiles.html @@ -43,10 +43,7 @@ border: 1px solid #cccccc !important; } - #img-offline-indicator { - padding: 8px; - position: relative; float: right; - } + .floatRight {float: right;} @@ -99,7 +96,7 @@

    Step 1: Fill in the basics

    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> #mapDiv { - min-height: 300px; + min-height: 500px; max-height: 1000px; } @@ -108,6 +105,9 @@

    Step 1: Fill in the basics

    overflow: hidden; font-family: "Trebuchet MS"; } + + .floatRight {float: right;} + .container { padding: 20px;} </style> <!-- Include a reference to offline.js which detects online/offline conditions --> @@ -167,7 +167,7 @@

    Step 1: Fill in the basics

    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory

    Step 2: Configure tiled basemap to work offline

    @@ -190,7 +190,7 @@

    Step 2: Configure tiled basemap to work offline

    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> #mapDiv { - min-height: 300px; + min-height: 500px; max-height: 1000px; } @@ -199,6 +199,9 @@

    Step 2: Configure tiled basemap to work offline

    overflow: hidden; font-family: "Trebuchet MS"; } + + .floatRight {float: right;} + .container { padding: 20px;} </style> <!-- Include a reference to offline.js which detects online/offline conditions --> @@ -284,7 +287,7 @@

    Step 2: Configure tiled basemap to work offline

    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory
    @@ -320,7 +323,7 @@

    Step 3: Configure tiles download.

    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> #mapDiv { - min-height: 300px; + min-height: 500px; max-height: 1000px; } @@ -331,6 +334,7 @@

    Step 3: Configure tiles download.

    } .floatRight { float: right;} + .container { padding: 20px;} </style> <!-- Include a reference to offline.js which detects online/offline conditions --> @@ -542,6 +546,7 @@

    Step 3: Configure tiles download.

    } } + // Pan left when "offline" to view only tiles that have been stored locally function panLeft(){ map.panLeft(); } @@ -559,7 +564,7 @@

    Step 3: Configure tiles download.

    -
    NOTE: Replace paths with your references.
    +
    NOTE: Replace paths with your references. Or build your app in the /demo directory
    diff --git a/demo/getstarted-tpk.html b/demo/getstarted-tpk.html index b993abb3..c86507fe 100644 --- a/demo/getstarted-tpk.html +++ b/demo/getstarted-tpk.html @@ -72,23 +72,11 @@

    Getting Started with TPKs

  • Step 1
  • Step 2
  • Step 3
    • -
  • Step 4
    • -

    Step 1: Fork or clone offline-editor-js

    -

    Here are the important directories to know:

    -
      -
    • \dist - concatenated library source and minified library files.
      • -
    • \samples - examples that demonstrate the library's functionality.
      • -
    • \vendor - contains IndexedDBShim and offline.js libraries
      • -
    -
    - -
    -
    -

    Step 2: Fill in the basics

    +

    Step 1: Fill in the basics

    Add the basic library references and CSS. Then test to make sure application loads. There won't be a map to display just yet, you'll only see the header bar.


    @@ -99,84 +87,68 @@

    Step 2: Fill in the basics

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> - <title>Simple Map</title> - <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> + <title>Offline TPK</title> + <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"> + <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css""> + <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css"> <style> - html, body, #map { - height: 100%; - width: 100%; - margin: 0; - padding: 0; - } - body { - background-color: #ffffff; - overflow: hidden; - font-family: "Trebuchet MS"; - } - #map{ - position: absolute; - left: 0; - z-index: 1; - } - #header-div{ - font-family: helvetica, serif; - background: #000000; - color: #ffffff; - width: 100%; - height: 90px; - display:inline-block; - vertical-align:middle; - line-height: 50px; - padding-left: 8px; - } - #input-container{ - position: absolute; - } - #url-input{ - position: relative; - padding-left: 10px; - margin-left: 10px; - margin-top: 40px; - width: 250px; - } - #url-btn{ - position: relative; - } - #header-title{ - position: relative; - float: right; - padding-right: 15px; + #mapDiv { + min-height: 300px; + max-height: 1000px; } + .container { padding: 20px;} </style> <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x --> <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script> - <script src="http://js.arcgis.com/3.10/"></script> + <script src="http://js.arcgis.com/3.11/"></script> </head> <body> - <div id="header-div"> - <div id="input-container"> - <input type="text" id="url-input" value="../samples/tpks/Beirut.zip" /> - <button id="url-btn">Get file via url</button> +<div class="container"> + <div class="row"> + <div class="col-lg-12"> + <div class="form form-group input-group"> + <input id="url-input" type="text" class="form-control" + value="../samples/tpks/Beirut.zip"> + <span class="input-group-btn"> + <button id="url-btn" class="btn btn-success" type="button">Go!</button> + </span> + </div> </div> - <div id="header-title">TPKLayer demo</div> </div> + <div class="row"> + <div class="col-xs-12"> + <div id="mapDiv"></div> + </div> + </div> +</div> - <div id="map"></div> +<script> - <script> - var map; + // Make sure to reference the tpk library within the require statement! + require([ + "esri/map", + "dojo/on", + "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js", + "../dist/offline-tpk-src.js", "dojo/domReady!"], + function(Map,on,BootstrapMap) { - // Make sure to reference the tpk library within the require statement! - require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) { + var map, tpkLayer; - var map, tpkLayer; + var url = document.getElementById("url-input"); + var urlInputBtn = document.getElementById("url-btn"); - }); - </script> + } + ); +</script> +<!-- Bootstrap core JavaScript +================================================== --> +<!-- Placed at the end of the document so the pages load faster --> +<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html> @@ -184,9 +156,10 @@

    Step 2: Fill in the basics

    NOTE: Replace paths with your references.
    -
    -

    Step 3: Retrieve TPK.

    -

    You should get an alert when TPK is fully downloaded.

    +
    +

    Step 2: Retrieve TPK.

    +

    Download and unzip the TPK. You should get an alert when TPK is fully downloaded.

    +

    NOTE: If you have a TPK file you will have to change its type to .zip for the browser to recognize it. 


    @@ -196,130 +169,114 @@ 
    Step 3: Retrieve TPK.
    
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
-    <title>Simple Map</title>
-    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
+    <title>Offline TPK</title>
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
+    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
+    <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
     <style>
-        html, body, #map {
-            height: 100%;
-            width: 100%;
-            margin: 0;
-            padding: 0;
-        }
-        body {
-            background-color: #ffffff;
-            overflow: hidden;
-            font-family: "Trebuchet MS";
-        }
-        #map{
-            position: absolute;
-            left: 0;
-            z-index: 1;
-        }
-        #header-div{
-            font-family: helvetica, serif;
-            background: #000000;
-            color: #ffffff;
-            width: 100%;
-            height: 90px;
-            display:inline-block;
-            vertical-align:middle;
-            line-height: 50px;
-            padding-left: 8px;
-        }
-        #input-container{
-            position: absolute;
-        }
-        #url-input{
-            position: relative;
-            padding-left: 10px;
-            margin-left: 10px;
-            margin-top: 40px;
-            width: 250px;
-        }
-        #url-btn{
-            position: relative;
-        }
-        #header-title{
-            position: relative;
-            float: right;
-            padding-right: 15px;
+        #mapDiv {
+            min-height: 300px;
+            max-height: 1000px;
         }
+        .container { padding: 20px;}
     </style>
 
     <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
     <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
 
-    <script src="http://js.arcgis.com/3.10/"></script>
+    <script src="http://js.arcgis.com/3.11/"></script>
 </head>
 
 <body>
 
-    <div id="header-div">
-        <div id="input-container">
-            <input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
-            <button id="url-btn">Get file via url</button>
+<div class="container">
+    <div class="row">
+        <div class="col-lg-12">
+            <div class="form form-group input-group">
+                <input id="url-input" type="text" class="form-control"
+                       value="../samples/tpks/Beirut.zip">
+            <span class="input-group-btn">
+                <button id="url-btn" class="btn btn-success" type="button">Go!</button>
+            </span>
+            </div>
         </div>
-        <div id="header-title">TPKLayer demo</div>
     </div>
+    <div class="row">
+        <div class="col-xs-12">
+            <div id="mapDiv"></div>
+        </div>
+    </div>
+</div>
 
-    <div id="map"></div>
+<script>
 
-    <script>
-        var map;
+    // Make sure to reference the tpk library within the require statement!
+    require([
+        "esri/map",
+        "dojo/on",
+        "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
+        "../dist/offline-tpk-src.js", "dojo/domReady!"],
+            function(Map,on,BootstrapMap) {
 
-        // Make sure to reference the tpk library within the require statement!
-        require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
+                var map, tpkLayer;
 
-            var map, tpkLayer;
+                var url = document.getElementById("url-input");
+                var urlInputBtn = document.getElementById("url-btn");
+                urlInputBtn.onclick = function(){
+                    getTPK();
+                };
 
-            var url = document.getElementById("url-input");
-            var urlInputBtn = document.getElementById("url-btn");
-            urlInputBtn.onclick = function(){
-                getTPK();
-            };
+                // Retrieve the TPK file via an HTTP request
+                function getTPK(){
+                    urlInputBtn.innerHTML = "Get file via url";
+
+                    var xhrRequest = new XMLHttpRequest();
+                    xhrRequest.open("GET", url.value, true);
+                    xhrRequest.responseType = "blob";
+                    xhrRequest.onprogress = function(evt){
+                        var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
+                        urlInputBtn.innerHTML = "Get file via url " + percent + "%";
+                        console.log("Begin downloading remote tpk file...")
+                    }
 
-            // Initialize the Map and the TPKLayer
-            function initMap(entries){
-                tpkLayer = new O.esri.TPK.TPKLayer();
-                tpkLayer.on("progress", function (evt) {
-                    console.log("Loading tpk...");
-                })
-                tpkLayer.extend(entries);
+                    xhrRequest.error = function(err){console.log("ERROR")}
 
-                map = new Map("map");
-                map.addLayer(tpkLayer);
-            }
+                    xhrRequest.onload = function(oEvent) {
+                        if(this.status == 200) {
+                            console.log("Remote tpk download finished.")
+                            zipParser(this.response);
+                        }
+                        else{
+                            alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
+                        }
+                    };
 
-            // Retrieve the TPK file via an HTTP request
-            function getTPK(){
-                urlInputBtn.innerHTML = "Get file via url";
-
-                var xhrRequest = new XMLHttpRequest();
-                xhrRequest.open("GET", url.value, true);
-                xhrRequest.responseType = "blob";
-                xhrRequest.onprogress = function(evt){
-                    var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
-                    urlInputBtn.innerHTML = "Get file via url " + percent + "%";
-                    console.log("Begin downloading remote tpk file...")
+                    xhrRequest.send();
                 }
 
-                xhrRequest.error = function(err){console.log("ERROR")}
+                // Parse the zip file contents into a zip.Entries object
+                function zipParser(blob){
 
-                xhrRequest.onload = function(oEvent) {
-                    if(this.status == 200) {
-                        console.log("Remote tpk download finished.")
-                        alert("We have TPK!");
-                    }
-                    else{
-                        alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
-                    }
-                };
+                    O.esri.zip.createReader(new O.esri.zip.BlobReader(blob), function (zipReader) {
+                        zipReader.getEntries(function (entries) {
+                            if(entries) alert("TPK downloaded and unzipped!");
+                            zipReader.close(function(evt){
+                                console.log("Done reading zip file.")
+                            })
+                        }, function (err) {
+                            alert("There was a problem reading the file!: " + err);
+                        })
+                    })
+                }
 
-                xhrRequest.send();
             }
-
-        });
-    </script>
+    );
+</script>
+<!-- Bootstrap core JavaScript
+================================================== -->
+<!-- Placed at the end of the document so the pages load faster -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </body>
 </html>
 
@@ -329,9 +286,9 @@ 
    Step 3: Retrieve TPK.
    -
    -

    Step 4: Unzip and display TPK tiles.

    -

    In this step we unzip the TPK file and then hand the result to TPKLayer.

    +
    +

    Step 3: Display TPK tiles.

    +

    In this step we hand the zip file entries over to TPKLayer to inflate the map.