+Documentation for all offline libraries in this repo.
+Documentation for the offline JavaScript libraries in this repo.
+
+
+
+
+
+Basic steps for working with ArcGIS.com base maps for offline.
+ +Here are the important directories to know:
+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>
+
+
+
+ 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>
+
+
+
+ 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>
+
+
+
+
+
+
+
+
+
+
+Basic steps for working with Editing of geographic features for offline.
+ +Here are the important directories to know:
+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>
+
+
+
+ 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>
+
+
+
+ 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>
+
+
+
+
+ Basic steps for working with web map tiles while offline.
+Basic steps for working with tiled base map services for offline.
+
+
+
+
+
+Basic steps for working with TPK pages for offline.
+ +Here are the important directories to know:
+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>
+
+
+
+ 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>
+
+
+
+ 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>
+
+
+
+
+