diff --git a/.gitmodules b/.gitmodules
index 682efeec..ac070090 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,9 +1,3 @@
-[submodule "vendor/offline"]
- path = vendor/offline
- url = https://github.com/HubSpot/offline.git
-[submodule "vendor/IndexedDBShim"]
- path = vendor/IndexedDBShim
- url = https://github.com/axemclion/IndexedDBShim.git
[submodule "vendor/jasmine.async"]
path = vendor/jasmine.async
url = https://github.com/derickbailey/jasmine.async.git
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 331da73f..eeb05bb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,40 @@
# offline-editor-js - Changelog
+## Version 3.0 - Nov. 23, 2015
+
+Has many breaking changes due to new naming conventions.
+
+This version adds a new, lightweight (14Kb) editing library aimed at intermittent offline-only workflows. And, there was a significant amount of refactoring aimed at fixing and simplifying the library's naming conventions.
+
+This version implements a consistent naming convention that uses "basic" and "advanced". If `basic` is in the name of the distribution library that means support for intermittent offline-only. `advanced` in the name means support for both intermittent and full offline usage including browser restarts while offline.
+
+In general, migrating from v2.x to 3.x should be a straightforward exercise in simple refactoring of library names.
+
+**Enhancements**
+* Creates a new `OfflineEditBasic` library. This lightweight (14Kb) library is designed specifically for easy use and intermittent offline-only editing use cases.
+* Created `offline-edit-basic` and `offline-edit-advanced` for both `src` and `min` versions.
+* Updates documentation, samples and unit tests to reflect the name changes.
+
+**Refactored**
+* `offlineFeaturesManager.js` renamed `OfflineEditAdvanced.js`. No other changes were made to this library.
+* `offlineTilesEnabler.js` renamed `OfflineTilesBasic.js`.
+* `OfflineTilesEnablerLayer.js` renamed `OfflineTilesAdvanced`. No other changes made.
+* `tiles-indexed-db.html` renamed to `simple-tiles.html`.
+* All samples have been updated to reflect the new library names.
+* All test specs have been updated and refactored to reflect the new library names.
+
+**Deprecated**
+* Deprecated `offline-edit-min.js` and `offline-edit-src.js`.
+* In `OfflineEditAdvanced.js` removed deprecated functions `_cleanSuccessfulEditsDatabaseRecords()`, `_internalApplyEdits()`.
+* In `editStore.js` removed deprecated function `resetLimitedPhantomGraphicsQueue()`.
+* In `editStore.js` removed unused functions `_serialize()`, `_deserialize()`.
+* Deleted `/demo/samples` directory.
+* Removed Offline.js and IndexedDBShim from sub-module depencies. You'll need to reference these via their respective CDNs for gh-pages URL.
+
+**Bug Fixes**
+* Minor - `OfflineEditAdvanced` no longer throws an error when reinitialized with a featureCollection.
+
+
## Version 2.16 - Oct. 29, 2015
No breaking changes. Recommended update.
diff --git a/Gruntfile.js b/Gruntfile.js
index 7456cd5d..c906e075 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -28,8 +28,8 @@ module.exports = function(grunt) {
'Gruntfile.js',
'lib/edit/*.js',
'lib/tiles/base64utils.js',
- 'lib/tiles/OfflineTilesEnabler.js',
- 'lib/tiles/OfflineTilesEnablerLayer.js',
+ 'lib/tiles/OfflineTilesBasic.js',
+ 'lib/tiles/OfflineTilesAdvanced.js',
'lib/tiles/OfflineTilesNS.js',
'lib/tiles/TilesCore.js',
'lib/tiles/TilesStore.js',
@@ -49,19 +49,29 @@ module.exports = function(grunt) {
'*/\n'
},
/* All feature editing capabilities: adds, updates and deletes */
- edit: {
+ editAdvanced: {
src: [
- 'lib/edit/offlineFeaturesManager.js',
+ 'lib/edit/offlineJSOptions.js',
+ 'lib/edit/OfflineEditAdvanced.js',
'lib/edit/OfflineEditNS.js',
'lib/edit/editsStore.js',
'lib/edit/attachmentsStore.js'
],
- dest: 'dist/offline-edit-src.js'
+ dest: 'dist/offline-edit-advanced-src.js'
+ },
+ editBasic: {
+ src: [
+ 'lib/edit/offlineJSOptions.js',
+ 'lib/edit/OfflineEditBasic.js',
+ 'lib/edit/OfflineEditNS.js',
+ 'lib/edit/editStorePOLS.js'
+ ],
+ dest: 'dist/offline-edit-basic-src.js'
},
/* Tiles basic is for use with WebMaps. Cannot be reloaded or restarted while offline */
tilesBasic: {
src: [
- 'lib/tiles/offlineTilesEnabler.js',
+ 'lib/tiles/OfflineTilesBasic.js',
'lib/tiles/OfflineTilesNS.js',
'lib/tiles/base64utils.js',
'lib/tiles/FileSaver.js',
@@ -74,7 +84,7 @@ module.exports = function(grunt) {
/* Tiles advanced is for use with tiled map services. Works with reload or restart while offline */
tilesAdvanced: {
src: [
- 'lib/tiles/offlineTilesEnablerLayer.js',
+ 'lib/tiles/OfflineTilesAdvanced.js',
'lib/tiles/OfflineTilesNS.js',
'lib/tiles/base64utils.js',
'lib/tiles/FileSaver.js',
@@ -104,6 +114,9 @@ module.exports = function(grunt) {
compress: {
drop_console: true //remove console.log statements :)
},
+ beautify: {
+ semicolons: false //Required: prevents dojo parser errors w/ minified files in this project
+ },
preserveComments: 'some',
wrap: false
// mangle: {
@@ -112,7 +125,8 @@ module.exports = function(grunt) {
},
dist: {
files: {
- 'dist/offline-edit-min.js': ['dist/offline-edit-src.js'],
+ 'dist/offline-edit-advanced-min.js': ['dist/offline-edit-advanced-src.js'],
+ 'dist/offline-edit-basic-min.js': ['dist/offline-edit-basic-src.js'],
'dist/offline-tiles-basic-min.js': ['dist/offline-tiles-basic-src.js'],
'dist/offline-tiles-advanced-min.js': ['dist/offline-tiles-advanced-src.js'],
'dist/offline-tpk-min.js': ['dist/offline-tpk-src.js']
diff --git a/README.md b/README.md
index 3ef71d27..38b64183 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,28 @@
offline-editor-js
=================
-Offline-editor-js is a family of libraries for building offline capabilities into web mapping applications. It's specifically designed to work with the ArcGIS API for JavaScript and ArcGIS Online. It enables you to store feature edits, attachments, map tiles and TPKs (Tile Packages).
+Offline-editor-js is a family of libraries for building offline capabilities into web mapping applications. It's specifically designed to work with the ArcGIS API for JavaScript and ArcGIS Online. With these libraries you can store feature edits, attachments, map tiles and TPKs (Tile Packages).
+
+***IMPORTANT:*** If you need a fully integrated, robust offline solution then you should be using our native ArcGIS Runtime SDKs for .NET, WPF, Java, iOS, Android and Qt.
+
+# Getting Started
Online samples and getting started tutorials are available here: **[http://esri.github.io/offline-editor-js/demo/](http://esri.github.io/offline-editor-js/demo/)**
-*IMPORTANT:* If you need a fully integrated, robust offline solution then you should be using our native ArcGIS Runtime SDKs for .NET, WPF, Java, iOS, Android and Qt.
-This repo contains the following libraries:
+# Libraries
+
+This repo contains the following libraries in the `/dist` directory. The use of `basic` in the name indicates intermittent offline-only, and `advanced` indicates the library can be used for both intermittent and full offline.
+
+Use_Case | Name, Description and gh-pages URL
+--- | ---
+Basic editing | **`offline-edit-basic-min.js`** Simple, lightweight *(14k minimized)* offline editing library that automatically caches adds, updates and deletes when the internet is temporarily interrupted.
[`http://esri.github.io/offline-editor-js/dist/offline-edit-basic-min.js`](http://esri.github.io/offline-editor-js/dist/offline-edit-basic-min.js)
+Advanced editing | **`offline-edit-advanced-min.js`** Used for intermittent and full offline editing workflows. Also includes limited support for attachments.
[`http://esri.github.io/offline-editor-js/dist/offline-edit-advanced-min.js`](http://esri.github.io/offline-editor-js/dist/offline-edit-advanced-min.js)
+Basic map tiles | **`offline-tiles-basic-min.js`** Caches map tiles for simple, intermittent-only offline workflows. Use this library with ArcGIS Online Web maps as well as with tiled map services.
[`http://esri.github.io/offline-editor-js/dist/offline-tiles-basic-min.js`](http://esri.github.io/offline-editor-js/dist/offline-tiles-basic-min.js)
+Advanced map tiles | **`offline-tiles-advanced-min.js`** Used for intermittent and full offline tile caching. Extends any ArcGIS Tiled Map Service. This library should be used in conjunction with an HTML5 Application Cache Manifest coding pattern.
[`http://esri.github.io/offline-editor-js/dist/offline-tiles-advanced-min.js`](http://esri.github.io/offline-editor-js/dist/offline-tiles-advanced-min.js)
+TPK files | **`offline-tpk-min.js`** Reads TPK files and displays and caches them as a tiled map layer.
[`http://esri.github.io/offline-editor-js/dist/offline-tpk-min.js`](http://esri.github.io/offline-editor-js/dist/offline-tpk-min.js)
-- `/dist` - contains src and min versions of each library:
- * `offline-edit-min.js` - stores adds, updates and deletes of features as well as limited attachment support while offline. Resync's edits with server once connection is reestablished.
- * `offline-tiles-basic-min.js` - caches map tiles for partial offline use cases. Use this library with ArcGIS Online Web maps as well as with tiled map services. This repo will not work with browser restarts or reloads while offline.
- * `offline-tiles-advanced-min.js` - Extends any ArcGIS Tiled Map Service that has a requirement for offline browser reload and/or restart. This library should be used in conjunction with an HTML5 application cache coding pattern.
- * `offline-tpk-min.js` - parses a TPK file and displays it as a tiled map layer.
-- `/utils`: contains various helper library modules. These modules are all AMD compliant.
-- `/samples`: samples that show how to use the different offline libraries capabilities.
+`src` files are for software development-only. The`min` versions are minified and should be used in production.
#Workflows Supported
The following workflow is currently supported for both both features and tiles:
@@ -63,6 +70,7 @@ Go __[here](https://github.com/Esri/offline-editor-js/wiki/FAQ)__ for answers to
##Limitations
* Currently does not support related tables, domains or subtypes. The ArcGIS Runtime SDKs fully support these and more.
+* There are browser limitations and technical dependencies. The offline capabilities in this toolkit depend on certain JavaScript capabilities being present in the browser. Go [here](doc/dependencies.md) for a detailed breakdown.
* Attachments are supported with some limitations listed [here](./doc/attachments.md).
* Browser storage space on mobile devices is a known limitation. This applies to stand-alone web applications and hybrid applications.
@@ -72,17 +80,15 @@ Go __[here](https://github.com/Esri/offline-editor-js/wiki/FAQ)__ for answers to
##Dependencies
-* ArcGIS API for JavaScript (v3.12+)
+* [ArcGIS API for JavaScript (v3.12+)](https://developers.arcgis.com/javascript/)
+* [Offline.js](http://github.hubspot.com/offline/docs/welcome/) - it allows detection of the online/offline condition and provides events to hook callbacks on when this condition changes
* Node.js required for building the source
-* NOTE: browser limitations and technical dependencies. The offline capabilities in this toolkit depend on certain HTML5 capabilities being present in the browser. Go [here](doc/dependencies.md) for a detailed breakdown of the information.
+* [IndexedDBShim](https://github.com/axemclion/IndexedDBShim) - polyfill to simulate indexedDB functionality in browsers/platforms where it is not supported notably older versions desktop Safari and iOS Safari.
* Sub-modules (see `/vendor` directory)
- * [offline.js](https://github.com/hubspot/offline) - it allows detection of the online/offline condition and provides events to hook callbacks on when this condition changes
- * [IndexedDBShim](https://github.com/axemclion/IndexedDBShim) - polyfill to simulate indexedDB functionality in browsers/platforms where it is not supported (notably desktop Safari and iOS Safari)
- - IMPORTANT: There are known [issues](https://github.com/axemclion/IndexedDBShim/issues/115) with IndexedDBShim on Safari. For Safari, the storage error workaround is to switch from using /dist/IndexedDBShim.min.js to just using IndexedDBShim.js and then search for and modify the line that defines the value for `DEFAULT_DB_SIZE`. Set this to more appropriate size that will meet all your storage needs, for example: ```var DEFAULT_DB_SIZE = 24 * 1024 * 1024```
- * [jasmine.async](https://github.com/derickbailey/jasmine.async.git) - library to help implementing tests of async functionality (used in tests)
+ * [jasmine.async](https://github.com/derickbailey/jasmine.async.git) - Used specifically for unit testing.
-* Non sub-module based libraries
+* Non sub-module based libraries that are used internally by this project
* [FileSaver.js](https://github.com/Esri/offline-editor-js/blob/master/lib/tiles/README.md) - library to assist with uploading and downloading of files containing tile information.
* [grunt-manifest](https://github.com/gunta/grunt-manifest) node.js library to assist with the creation of manifest files.
* [zip](http://gildas-lormeau.github.io/zip.js/) A library for zipping and unzipping files.
diff --git a/demo/api-doc.html b/demo/api-doc.html
index 5e2b57e6..a75b5169 100644
--- a/demo/api-doc.html
+++ b/demo/api-doc.html
@@ -71,18 +71,17 @@
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. +
The offline-edit-basic-min.js library is for working with ArcGIS JS API points, lines and polygons in intermittent offline use cases, only.
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. +
The offline-edit-advanced-min.js library is for working with ArcGIS JS API points, lines and polygons in intermittent and full offline use cases. +
+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.
The offline-edit-min.js library is for working with ArcGIS JS API points, lines and polygons in partial or fully offline use cases. +
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.
The offline-edit-min.js library provides limited supported for attachments. +
The offline-edit-advanced-mins.js library has limited attachment support. The offline-edit-basic-min.js library pffers no support for attachments.
Basic steps for working with ArcGIS.com base maps for offline.
- -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>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>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
- body {
- 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 -->
- <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.11/"></script>
-</head>
-
-<body>
-
-<div class="container">
- <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;
-
- // 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>
-
-
-<!-- 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>
-
-
-
- This initializes the OfflineTilesEnabler 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>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;
- }
- body {
- background-color: #000000;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
- .floatRight {float: right;}
- .container { padding: 20px;}
- </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.11/"></script>
-</head>
-
-<body>
-
-<div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></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();
-
- showMap();
-
-
- function showMap(){
- // Load the map
- arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){
- map = response.map;
-
- // 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();
- });
- }
-
- });
- }
-
- function initializeOfflineTiles(){
- offlineTilesEnabler.extend(basemapLayer,function(success) {
- if (success) {
- console.log("ArcGIS.com map extended for offline!")
- }
- })
- }
- });
-</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>
-
-
-
- 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>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>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
- body {
- 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 -->
- <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.11/"></script>
-</head>
-
-<body>
-
-<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;
-
- // 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();
- });
- }
-
- });
- }
-
- function initializeOfflineTiles(){
- offlineTilesEnabler.extend(basemapLayer,function(success) {
- if (success) {
- console.log("ArcGIS.com map extended for offline!")
- }
- })
- }
-
- function downloadTiles(){
-
- if(_downloadState == "downloading"){
- _wantToCancel = true;
- }
- else{
- _wantToCancel = false;
-
- // First delete any existing tiles from database
- basemapLayer.deleteAllTiles(function(success,err){
- var zoom = basemapLayer.getMinMaxLOD(minZoomAdjust,maxZoomAdjust);
-
- // 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";
- }
-
- 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";
-
- });
- }
- }
-
- // 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 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>
-
-</body>
-</html>
-
-
-
- Basic steps for working with Editing geographic features for offline.
- -Add library references and build basic layout. Then test to make sure map loads. - A fully working and editable version of this step is included in /demo/samples/editing-step1.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>Offline Features</title>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
- <link rel="stylesheet" href="../widgets/modal/css/modal-popup.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- #img-offline-indicator {
- padding: 8px;
- position: relative; float: right;
- }
-
- /* Override mod-popup default */
- .mod-popup-stop-input {color: black;}
- .span-pending {color: blue; padding-left: 1em;}
- .voffset20px { margin-top: 20px; }
- .floatRight { float: right}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../../vendor/offline/offline.min.js"></script>
- <script>
- // Set how we pull in custom AMD modules
- var path = location.pathname.replace(/[^\/]+$/, '');
- var dojoConfig =
- {
- debug: true,
- packages:[
- {
- name: "widgets",
- location: path + "../widgets/modal/"
- }]
- }
-
- // 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>
-
- <script src="//js.arcgis.com/3.13/"></script>
-</head>
-
-<body>
-
-<div class="container voffset20px">
- <div class="row">
- <div class="col-xs-8">
- <button class="btn btn-success" id="btn-online-offline">Go Offline</button>
- <span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
- </div>
- <div class="col-xs-4">
- <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 voffset20px">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-<!-- Stub for modal popup -->
-<div id="modal-popup"></div>
-
-<script>
-
- require([
- "esri/map","esri/tasks/query",
- "dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
- "esri/symbols/SimpleMarkerSymbol","esri/Color",
- "widgets/popup","esri/layers/FeatureLayer",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../../dist/offline-edit-src.js",
- "dojo/domReady!"],
- function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
- Color,ModalPopup,FeatureLayer,BootstrapMap){
-
- var map, popup, editsStore;
- var defaultSymbol;
- var offlineFeaturesManager;
- var btnOnlineOffline, btnState, pendingEdits;
- var imgOfflineIndicator;
- var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
-
- initMap();
-
- function initMap(){
-
- map = BootstrapMap.create("mapDiv",{
- basemap: "topo",
- center: [-104.99,39.75], // longitude, latitude
- zoom: 15
- });
- }
- }
- );
-
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- This initializes and configures the modal popup. Test to make sure map loads and popup displays. - You'll notice the buttons on the popup don't work yet. We'll fix that in the Step 3. - A full working version of this step is included in /demo/samples/editing-step2.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>Offline Features</title>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
- <link rel="stylesheet" href="../widgets/modal/css/modal-popup.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- #img-offline-indicator {
- padding: 8px;
- position: relative; float: right;
- }
-
- /* Override mod-popup default */
- .mod-popup-stop-input {color: black;}
- .span-pending {color: blue; padding-left: 1em;}
- .voffset20px { margin-top: 20px; }
- .floatRight { float: right}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../../vendor/offline/offline.min.js"></script>
- <script>
- // Set how we pull in custom AMD modules
- var path = location.pathname.replace(/[^\/]+$/, '');
- var dojoConfig =
- {
- debug: true,
- packages:[
- {
- name: "widgets",
- location: path + "../widgets/modal/"
- }]
- }
-
- // 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>
-
- <script src="//js.arcgis.com/3.13/"></script>
-</head>
-
-<body>
-
-<div class="container voffset20px">
- <div class="row">
- <div class="col-xs-8">
- <button class="btn btn-success" id="btn-online-offline">Go Offline</button>
- <span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
- </div>
- <div class="col-xs-4">
- <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 voffset20px">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-<!-- Stub for modal popup -->
-<div id="modal-popup"></div>
-
-<script>
-
- require([
- "esri/map","esri/tasks/query",
- "dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
- "esri/symbols/SimpleMarkerSymbol","esri/Color",
- "widgets/popup","esri/layers/FeatureLayer",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../../dist/offline-edit-src.js",
- "dojo/domReady!"],
- function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
- Color,ModalPopup,FeatureLayer,BootstrapMap){
-
- var map, popup, editsStore;
- var defaultSymbol;
- var offlineFeaturesManager;
- var btnOnlineOffline, btnState, pendingEdits;
- var imgOfflineIndicator;
- var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
-
- initVars();
- initMap();
-
- function initMap(){
-
- map = BootstrapMap.create("mapDiv",{
- basemap: "topo",
- center: [-104.99,39.75], // longitude, latitude
- zoom: 15
- });
-
- map.on("load",function(evt){
- console.log("Map is loaded. Loading popup...")
- window.setTimeout(function(){
- popup.show();
- },2000);
- });
- }
-
- function initVars(){
-
- editsStore = new O.esri.Edit.EditStore();
- popup = new ModalPopup({animation: true, animationDuration: 1},"modal-popup");
- popup.startup();
-
- parser.parse();
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState );
-
-
- btnOnlineOffline = document.getElementById("btn-online-offline");
- imgOfflineIndicator = document.getElementById("state-span");
- btnState = document.getElementById("btn-state");
- pendingEdits = document.getElementById("span-pending-edits");
-
- // Modify symbol size based on screen size.
- // Bigger screens get smaller symbols. Smaller screens get larger symbols.
- var width = window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
-
- var height = window.innerHeight
- || document.documentElement.clientHeight
- || document.body.clientHeight;
-
- if (height >= 768 || width >= 1024) {
- defaultSymbol= new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255,0,0,0.5])).setSize(20);
- }
- else{
- defaultSymbol= new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255,0,0,0.5])).setSize(35);
- }
-
- // Variables for modal popup
- closeBtn = document.getElementById("mod-popup-close-btn");
- saveBtn = document.getElementById("mod-popup-save-btn");
- deleteBtn = document.getElementById("mod-popup-delete-btn");
- stopMainID = document.getElementById("stop-main-id");
- stopID = document.getElementById("stop-id");
- stopRoutes = document.getElementById("stop-routes");
- stopNames = document.getElementById("stop-names");
-
- }
-
- function setModalPopupClickListeners(){
- closeBtn.onclick = function(evt){
- hideModalPopup();
- }
-
- saveBtn.onclick = function(evt) {
- //TO-DO
- }
-
- }
-
- function showModalPopup(graphic){
- popup.graphic = graphic; // assign graphic to modPopup as a property.
- popup.show();
- }
-
- function hideModalPopup(){
- popup.hide();
- }
-
- // Force feature service offline
- function goOnlineOffline(){
-
- if(btnOnlineOffline.innerHTML == "Go Offline"){
- toggleStateUp(false);
- console.log("Map is offline");
- }
- else{
- toggleStateUp(true);
- console.log("Map is online");
- }
- }
-
- // Set the UX to online or offline state
- function toggleStateUp(state){
- if(state){
- btnOnlineOffline.innerHTML = "Go Offline";
- offlineFeaturesManager.goOnline();
- imgOfflineIndicator.className = "glyphicon glyphicon-link";
- imgOfflineIndicator.innerHTML = " Up";
- btnState.className = "btn btn-success btn-large floatRight";
- }
- else{
- btnOnlineOffline.innerHTML = "Go Online";
- offlineFeaturesManager.goOffline();
- imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
- imgOfflineIndicator.innerHTML = " Down";
- btnState.className = "btn btn-danger btn-large floatRight";
- }
- }
-
- // Automatically set the feature service online or offline.
- function updateState(){
- if(Offline.state === 'up'){
- toggleStateUp(true);
- }
- else{
- toggleStateUp(false);
- }
- }
- }
- );
-
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- Enable the ability to store features (points, lines and polygons) while offline, and resync features when internet is restored. - A full working version of this step is included in /demo/samples/editing-step3.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>Offline Features</title>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
- <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <link rel="stylesheet" href="../widgets/modal/css/modal-popup.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- #img-offline-indicator {
- padding: 8px;
- position: relative;
- float: right;
- }
-
- /* Override mod-popup default */
- .mod-popup-stop-input {
- color: black;
- }
-
- .span-pending {
- color: blue;
- padding-left: 1em;
- }
-
- .voffset20px {
- margin-top: 20px;
- }
-
- .floatRight {
- float: right
- }
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../../vendor/offline/offline.min.js"></script>
- <script>
- // Set how we pull in custom AMD modules
- var path = location.pathname.replace(/[^\/]+$/, '');
- var dojoConfig =
- {
- debug: true,
- packages: [
- {
- name: "widgets",
- location: path + "../widgets/modal/"
- }]
- }
-
- // 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>
-
- <script src="//js.arcgis.com/3.13/"></script>
-</head>
-
-<body>
-
-<div class="container voffset20px">
- <div class="row">
- <div class="col-xs-8">
- <button class="btn btn-success" id="btn-online-offline">Go Offline</button>
- <span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
- </div>
- <div class="col-xs-4">
- <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 voffset20px">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-<!-- Stub for modal popup -->
-<div id="modal-popup"></div>
-
-<script>
-
- require([
- "esri/map", "esri/tasks/query",
- "dojo/on", "dojo/parser", "esri/renderers/SimpleRenderer",
- "esri/symbols/SimpleMarkerSymbol", "esri/Color",
- "widgets/popup", "esri/layers/FeatureLayer",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../../dist/offline-edit-src.js",
- "dojo/domReady!"],
- function (Map, Query, on, parser, SimpleRenderer, SimpleMarkerSymbol,
- Color, ModalPopup, FeatureLayer, BootstrapMap) {
-
- var map, popup, editsStore;
- var defaultSymbol;
- var offlineFeaturesManager;
- var btnOnlineOffline, btnState, pendingEdits;
- var imgOfflineIndicator;
- var closeBtn, saveBtn, deleteBtn, stopMainID, stopID, stopRoutes, stopNames;
- var busStopFeatureLayer;
-
- initVars();
- initMap();
-
- function initMap() {
-
- map = BootstrapMap.create("mapDiv", {
- basemap: "topo",
- center: [-104.99, 39.75], // longitude, latitude
- zoom: 15
- });
-
- busStopFeatureLayer = new FeatureLayer("http://services1.arcgis.com/M8KJPUwAXP8jhtnM/arcgis/rest/services/Denver_Bus_Stops/FeatureServer/0", {
- mode: FeatureLayer.MODE_SNAPSHOT,
- outFields: ["OBJECTID", "BSID", "ROUTES", "STOPNAME"]
- });
-
- //Set the graphics to red boxes to make it easy to click on them
- //on a mobile device.
- busStopFeatureLayer.setRenderer(new SimpleRenderer(defaultSymbol));
- busStopFeatureLayer.on("update-end", function (evt) {
-
- // Now we can enable the button click listener
- on(btnOnlineOffline, "click", goOnlineOffline);
-
- initOfflineFeaturesMgr();
- setFeatureLayerClickHandler();
- setModalPopupClickListeners();
- });
-
- map.addLayer(busStopFeatureLayer);
- }
-
- function initVars() {
-
- editsStore = new O.esri.Edit.EditStore();
- popup = new ModalPopup({animation: true, animationDuration: 1}, "modal-popup");
- popup.startup();
-
- parser.parse();
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState);
-
-
- btnOnlineOffline = document.getElementById("btn-online-offline");
- imgOfflineIndicator = document.getElementById("state-span");
- btnState = document.getElementById("btn-state");
- pendingEdits = document.getElementById("span-pending-edits");
-
- // Modify symbol size based on screen size.
- // Bigger screens get smaller symbols. Smaller screens get larger symbols.
- var width = window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
-
- var height = window.innerHeight
- || document.documentElement.clientHeight
- || document.body.clientHeight;
-
- if (height >= 768 || width >= 1024) {
- defaultSymbol = new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255, 0, 0, 0.5])).setSize(20);
- }
- else {
- defaultSymbol = new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255, 0, 0, 0.5])).setSize(35);
- }
-
- // Variables for modal popup
- closeBtn = document.getElementById("mod-popup-close-btn");
- saveBtn = document.getElementById("mod-popup-save-btn");
- deleteBtn = document.getElementById("mod-popup-delete-btn");
- stopMainID = document.getElementById("stop-main-id");
- stopID = document.getElementById("stop-id");
- stopRoutes = document.getElementById("stop-routes");
- stopNames = document.getElementById("stop-names");
-
- }
-
- /**
- * ************************************
- * OFFLINE FEATURE SERVICE HANDLER CODE
- * ************************************
- */
-
- function initOfflineFeaturesMgr() {
- offlineFeaturesManager = new O.esri.Edit.OfflineFeaturesManager();
-
- // 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
- offlineFeaturesManager.proxyPath = null;
-
- // IMPORTANT!!!
- // This tells the database which graphic.attribute property to use as a unique identifier
- // You can lok this information up in your feature service directory under the "Fields" category.
- // Example: http://services1.arcgis.com/M8KJPUwAXP8jhtnM/arcgis/rest/services/Denver_Bus_Stops/FeatureServer/0
- offlineFeaturesManager.DB_UID = "FID";
-
- offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updatePendingEditStatus);
- offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_SENT, updatePendingEditStatus);
- offlineFeaturesManager.on(offlineFeaturesManager.events.ALL_EDITS_SENT, updatePendingEditStatus);
-
- offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED_ERROR, function(errorsArray){
- alert("There was an error attempting to write to the database: " + JSON.stringify(errorsArray));
- });
-
- offlineFeaturesManager.extend(busStopFeatureLayer, function (success, error) {
- if (success) {
- console.log("offlineFeaturesManager initialized.");
-
- Offline.check();
- Offline.on('up down', updateState);
- }
- else {
- alert("Unable to enable feature layer for offline usage. " + error);
- }
- });
- }
-
- // Display modal popup when someone clicks on a feature
- // and load the fields with data from the feature service.
- function setFeatureLayerClickHandler() {
- busStopFeatureLayer.on("click", function (evt) {
-
- showModalPopup(evt.graphic);
- var atts = evt.graphic.attributes;
- stopID.value = atts.BSID;
- stopMainID.value = atts.FID;
- stopNames.value = atts.STOPNAME;
- stopRoutes.value = atts.ROUTES;
-
- }.bind(this));
- }
-
- function updatePendingEditStatus() {
- busStopFeatureLayer.pendingEditsCount(function(count){
- pendingEdits.innerHTML = count;
- });
- }
-
-
- function setModalPopupClickListeners() {
- closeBtn.onclick = function (evt) {
- hideModalPopup();
- };
-
- saveBtn.onclick = function (evt) {
- popup.graphic.attributes.ROUTES = stopRoutes.value;
- popup.graphic.attributes.STOPNAME = stopNames.value;
-
- busStopFeatureLayer.applyEdits(null, [popup.graphic], null, function (result) {
- console.log("Successfully saved changes to: " +
- popup.graphic.attributes.STOPNAME);
- hideModalPopup();
- },
- function (err) {
- alert("There was a problem while trying to save: " +
- popup.graphic.attributes.STOPNAME);
- })
- };
-
- deleteBtn.onclick = function (evt) {
- busStopFeatureLayer.applyEdits(null, null, [popup.graphic], function (result) {
- console.log("Successfully deleted: " + popup.graphic.attributes.STOPNAME);
- hideModalPopup();
- },
- function (err) {
- alert("There was a problem while trying to delete: " +
- popup.graphic.attributes.STOPNAME);
- })
- }
-
- }
-
- function showModalPopup(graphic) {
- popup.graphic = graphic; // assign graphic to modPopup as a property.
- popup.show();
- }
-
- function hideModalPopup() {
- popup.hide();
- }
-
- /**
- * ************************************
- * GO OFFLINE/ONLINE HANDLER CODE
- * ************************************
- */
-
- // Force feature service offline
- function goOnlineOffline() {
-
- if (btnOnlineOffline.innerHTML == "Go Offline") {
- toggleStateUp(false);
- console.log("Map is offline");
- }
- else {
- toggleStateUp(true);
- console.log("Map is online");
- }
- }
-
- // Set the UX to online or offline state
- function toggleStateUp(state) {
- if (state) {
- offlineFeaturesManager.goOnline();
- btnOnlineOffline.innerHTML = "Go Offline";
- imgOfflineIndicator.className = "glyphicon glyphicon-link";
- imgOfflineIndicator.innerHTML = " Up";
- btnState.className = "btn btn-success btn-large floatRight";
- }
- else {
- offlineFeaturesManager.goOffline();
- btnOnlineOffline.innerHTML = "Go Online";
- imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
- imgOfflineIndicator.innerHTML = " Down";
- btnState.className = "btn btn-danger btn-large floatRight";
- }
- }
-
- // Automatically set the feature service online or offline.
- function updateState() {
- if (Offline.state === 'up') {
- toggleStateUp(true);
- }
- else {
- toggleStateUp(false);
- }
- }
- }
- );
-
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- Basic steps for working with tiled base map services for offline.
- -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>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>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- body {
- 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 -->
- <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.11/"></script>
-</head>
-
-<body>
-<div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></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) {
-
- // Initialize our map to be responsive
- var map = Bootstrapmap.create("mapDiv",{
- basemap: "topo",
- center: [-122.45, 37.75], // longitude, latitude
- zoom: 15
- });
-
- });
-</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>
-
-
-
- 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>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>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- body {
- 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 -->
- <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.11/"></script>
-</head>
-
-<body>
-<div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></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) {
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState );
-
- // 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.
- 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);
-
- // 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>
-
-<!-- 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>
-
-
-
- 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>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>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- body {
- 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 -->
- <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.11/"></script>
-</head>
-
-<body>
-
-<!-- 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 = false;
- var _downloadState = "downloaded";
-
- // Set up min and max boundaries for retrieving tiles
- var minZoomAdjust = -1, maxZoomAdjust = 1;
-
- // 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);
-
- var imgOfflineIndicator = document.getElementById("state-span");
- var btnState = document.getElementById("btn-state");
-
- showMap();
-
- 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
- });
-
- // 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);
-
- // Add our offline tile layer to the map instead of using the default basemap!
- map.addLayer(basemapLayer);
- }
-
- function downloadTiles(){
-
- if(_downloadState == "downloading"){
- _wantToCancel = true;
- }
- else{
- _wantToCancel = false;
-
- // First delete any existing tiles from database
- basemapLayer.deleteAllTiles(function(success,err){
- var zoom = basemapLayer.getMinMaxLOD(minZoomAdjust,maxZoomAdjust);
-
- // 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";
- }
-
- 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";
-
- });
- }
- }
-
- // 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 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>
-</body>
-</html>
-
-
-
- Basic steps for working with TPK packages for offline.
- -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>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>
- #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.11/"></script>
-</head>
-
-<body>
-
-<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>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // 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) {
-
- var map, tpkLayer;
-
- var url = document.getElementById("url-input");
- var urlInputBtn = document.getElementById("url-btn");
-
- }
- );
-</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>
-
-
-
- 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.
-
-
-<!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>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>
- #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.11/"></script>
-</head>
-
-<body>
-
-<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>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // 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) {
-
- var map, tpkLayer;
-
- 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...")
- }
-
- 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) {
- 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);
- })
- })
- }
-
- }
- );
-</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>
-
-
-
- In this step we hand the zip file entries over to TPKLayer to inflate the map.
-
-
-
-<!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>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>
- #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.11/"></script>
-</head>
-
-<body>
-
-<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>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // 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) {
-
- var map, tpkLayer;
-
- 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...")
- }
-
- 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);
- //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);
- })
- })
- }
-
- // Initialize the Map and the TPKLayer
- function initMap(entries){
-
- map = BootstrapMap.create("mapDiv",{});
-
- tpkLayer = new O.esri.TPK.TPKLayer();
- tpkLayer.on("progress", function (evt) {
- console.log("TPK loading...");
- })
- tpkLayer.extend(entries);
-
- map.addLayer(tpkLayer);
- }
-
- }
- );
-</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>
-
-
-
- Basic responsive samples on how to work with the ArcGIS API for JavaScript while offline.
- -Go here to try out basic step-by-step samples.
+This bare-bones sample provides lightweight protection from the occasional internet connection interruption while editing. + It automatically manages storing edits while the app is offline and then resync's the edits when the app returns online. +
+Check out the following full-featured applications.
Important note for Hybrid app developers (e.g. PhoneGap\Cordova): this library is not supported for hybrid deployments. - There are too many different variations of iOS and Android to make this feasible. + There are too many different variations of iOS and Android browser's and versions to make this feasible. We've only done very limited proof-of-concept testing using WebView. Make sure you do thorough testing on as many different phones and tablets as possible. One suggestion is to build a test app and run the Unit Test suite which is in this project under /test.
- Windows developers: Edge is under consideration for developement support-only. However, at this time I don't have - a machine that runs it. + Windows developers: Edge is under consideration for developement support-only.
* - means that IndexedDBShim.js may be required on this browser/platform. More info available in the README under Dependencies. diff --git a/demo/samples/editing-step1.html b/demo/samples/editing-step1.html deleted file mode 100644 index 56a8540b..00000000 --- a/demo/samples/editing-step1.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - - ->>=c[y+1],P-=c[y+1],z=c[y],0===z){n=c[y+2],b=I;break}if(0!==(16&z)){o=15&z, -g=c[y+2],b=E;break}if(0===(64&z)){k=z,h=y/3+c[y+2];break}if(0!==(32&z)){b=J;break}return b=L,v.msg="invalid literal/length code",w=m,f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w);case E:for(x=o;x>P;){if(0===A)return f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w);w=i,A--,O|=(255&v.read_byte(Q++))<
>=x,P-=x,k=s,c=e,h=u,b=F;case F:for(x=k;x>P;){if(0===A)return f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w);w=i,A--,O|=(255&v.read_byte(Q++))<
>=c[y+1],P-=c[y+1],z=c[y],0!==(16&z)){o=15&z,q=c[y+2],b=G;break}if(0===(64&z)){k=z,h=y/3+c[y+2];break}return b=L,v.msg="invalid distance code",w=m,f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w);case G:for(x=o;x>P;){if(0===A)return f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w);w=i,A--,O|=(255&v.read_byte(Q++))<
>=x,P-=x,b=H;case H:for(N=B-q;0>N;)N+=f.end;for(;0!==g;){if(0===M&&(B==f.end&&0!==f.read&&(B=0,M=B >>=c[y+1],P-=c[y+1],z=c[y],0===z){n=c[y+2],b=I
+break}if(0!==(16&z)){o=15&z,g=c[y+2],b=E
+break}if(0===(64&z)){k=z,h=y/3+c[y+2]
+break}if(0!==(32&z)){b=J
+break}return b=L,v.msg="invalid literal/length code",w=m,f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w)
+case E:for(x=o;x>P;){if(0===A)return f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w)
+w=i,A--,O|=(255&v.read_byte(Q++))< >=x,P-=x,k=s,c=e,h=u,b=F
+case F:for(x=k;x>P;){if(0===A)return f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w)
+w=i,A--,O|=(255&v.read_byte(Q++))< >=c[y+1],P-=c[y+1],z=c[y],0!==(16&z)){o=15&z,q=c[y+2],b=G
+break}if(0===(64&z)){k=z,h=y/3+c[y+2]
+break}return b=L,v.msg="invalid distance code",w=m,f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w)
+case G:for(x=o;x>P;){if(0===A)return f.bitb=O,f.bitk=P,v.avail_in=A,v.total_in+=Q-v.next_in_index,v.next_in_index=Q,f.write=B,f.inflate_flush(v,w)
+w=i,A--,O|=(255&v.read_byte(Q++))< >=x,P-=x,b=H
+case H:for(N=B-q;0>N;)N+=f.end
+for(;0!==g;){if(0===M&&(B==f.end&&0!==f.read&&(B=0,M=B>>1){case 0:o>>>=3,q-=3,d=7&q,o>>>=d,q-=d,g=O;break;case 1:var C=[],D=[],E=[[]],F=[[]];b.inflate_trees_fixed(C,D,E,F),t.init(C[0],D[0],E[0],0,F[0],0),o>>>=3,q-=3,g=T;break;case 2:o>>>=3,q-=3,g=Q;break;case 3:return o>>>=3,q-=3,g=W,a.msg="invalid block type",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)}break;case O:for(;32>q;){if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);c=i,y--,o|=(255&a.read_byte(w++))<
>>16&65535)!=(65535&o))return g=W,a.msg="invalid stored block lengths",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);h=65535&o,o=q=0,g=0!==h?P:0!==u?U:N;break;case P:if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);if(0===A&&(z==f.end&&0!==f.read&&(z=0,A=z
29||(d>>5&31)>29)return g=W,a.msg="too many length or distance symbols",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);if(d=258+(31&d)+(d>>5&31),!e||e.length
>>=3,q-=3}for(;19>n;)e[M[n++]]=0;if(r[0]=7,d=x.inflate_trees_bits(e,r,s,v,a),d!=i)return c=d,c==m&&(e=null,g=W),f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);n=0,g=S;case S:for(;;){if(d=k,!(258+(31&d)+(d>>5&31)>n))break;var G,H;for(d=r[0];d>q;){if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);c=i,y--,o|=(255&a.read_byte(w++))<
H)o>>>=d,q-=d,e[n++]=H;else{for(B=18==H?7:H-14,G=18==H?11:3;d+B>q;){if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);c=i,y--,o|=(255&a.read_byte(w++))<
>>=d,q-=d,G+=o&p[B],o>>>=B,q-=B,B=n,d=k,B+G>258+(31&d)+(d>>5&31)||16==H&&1>B)return e=null,g=W,a.msg="invalid bit length repeat",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);H=16==H?e[B-1]:0;do e[B++]=H;while(0!==--G);n=B}}s[0]=-1;var I=[],J=[],K=[],L=[];if(I[0]=9,J[0]=6,d=k,d=x.inflate_trees_dynamic(257+(31&d),1+(d>>5&31),e,I,J,K,L,v,a),d!=i)return d==m&&(e=null,g=W),c=d,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c);t.init(I[0],J[0],v,K[0],v,L[0]),g=T;case T:if(f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,(c=t.proc(f,a,c))!=j)return f.inflate_flush(a,c);if(c=i,t.free(a),w=a.next_in_index,y=a.avail_in,o=f.bitb,q=f.bitk,z=f.write,A=z
>>1){case 0:o>>>=3,q-=3,d=7&q,o>>>=d,q-=d,g=O
+break
+case 1:var C=[],D=[],E=[[]],F=[[]]
+b.inflate_trees_fixed(C,D,E,F),t.init(C[0],D[0],E[0],0,F[0],0),o>>>=3,q-=3,g=T
+break
+case 2:o>>>=3,q-=3,g=Q
+break
+case 3:return o>>>=3,q-=3,g=W,a.msg="invalid block type",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)}break
+case O:for(;32>q;){if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+c=i,y--,o|=(255&a.read_byte(w++))<
>>16&65535)!=(65535&o))return g=W,a.msg="invalid stored block lengths",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+h=65535&o,o=q=0,g=0!==h?P:0!==u?U:N
+break
+case P:if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+if(0===A&&(z==f.end&&0!==f.read&&(z=0,A=z
29||(d>>5&31)>29)return g=W,a.msg="too many length or distance symbols",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+if(d=258+(31&d)+(d>>5&31),!e||e.length
>>=3,q-=3}for(;19>n;)e[M[n++]]=0
+if(r[0]=7,d=x.inflate_trees_bits(e,r,s,v,a),d!=i)return c=d,c==m&&(e=null,g=W),f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+n=0,g=S
+case S:for(;;){if(d=k,!(258+(31&d)+(d>>5&31)>n))break
+var G,H
+for(d=r[0];d>q;){if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+c=i,y--,o|=(255&a.read_byte(w++))<
H)o>>>=d,q-=d,e[n++]=H
+else{for(B=18==H?7:H-14,G=18==H?11:3;d+B>q;){if(0===y)return f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+c=i,y--,o|=(255&a.read_byte(w++))<
>>=d,q-=d,G+=o&p[B],o>>>=B,q-=B,B=n,d=k,B+G>258+(31&d)+(d>>5&31)||16==H&&1>B)return e=null,g=W,a.msg="invalid bit length repeat",c=m,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+H=16==H?e[B-1]:0
+do e[B++]=H
+while(0!==--G)
+n=B}}s[0]=-1
+var I=[],J=[],K=[],L=[]
+if(I[0]=9,J[0]=6,d=k,d=x.inflate_trees_dynamic(257+(31&d),1+(d>>5&31),e,I,J,K,L,v,a),d!=i)return d==m&&(e=null,g=W),c=d,f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,f.inflate_flush(a,c)
+t.init(I[0],J[0],v,K[0],v,L[0]),g=T
+case T:if(f.bitb=o,f.bitk=q,a.avail_in=y,a.total_in+=w-a.next_in_index,a.next_in_index=w,f.write=z,(c=t.proc(f,a,c))!=j)return f.inflate_flush(a,c)
+if(c=i,t.free(a),w=a.next_in_index,y=a.avail_in,o=f.bitb,q=f.bitk,z=f.write,A=z