+
+
+
+Documentation for the offline-editor-js JavaScript libraries.
+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-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 is for working with ArcGIS JS API points, lines and polygons in partial or fully offline use cases. +
+The offline-tpk-min.js library is for working with TPK files in partial or fully offline use cases. + TPK files are binary tile image packages. They can be used stand-alone or alongside tiled base maps. +
+
+
+
+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.
+
+
+<!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 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" href="widgets/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/"
+ }]
+ }
+
+ // 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+ <script src="http://js.arcgis.com/3.11/"></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="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+</body>
+</html>
+
+
+
+ This initializes and configures the modal popup. Test to make sure map loads and popup displays.
+
+
+<!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 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" href="../samples/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 + "../samples/widgets/"
+ }]
+ }
+
+ // 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+ <script src="http://js.arcgis.com/3.11/"></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/modal/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="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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.
+
+
+
+<!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 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" href="../samples/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 + "../samples/widgets/"
+ }]
+ }
+
+ // 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="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+ <script src="http://js.arcgis.com/3.11/"></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/modal/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
+ });
+
+
+ busStopFeatureLayer = new FeatureLayer("http://services.arcgis.com/IZtlGBUe4KTzLOl4/arcgis/rest/services/BPX_RTD_BusStops2/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;
+
+ offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updatePendingEditStatus);
+ offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_SENT, updatePendingEditStatus);
+ offlineFeaturesManager.on(offlineFeaturesManager.events.ALL_EDITS_SENT, updatePendingEditStatus);
+
+ offlineFeaturesManager.extend(busStopFeatureLayer);
+ console.log("offlineFeaturesManager initialized.");
+
+ Offline.check();
+ Offline.on('up down', updateState);
+ }
+
+ // 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) {
+ currentFeature = evt.graphic
+
+ var query = new Query();
+ query.objectIds = [evt.graphic.attributes.OBJECTID];
+ busStopFeatureLayer.selectFeatures(query,FeatureLayer.SELECTION_NEW,
+ function(evt){
+ console.log("Success: " + JSON.stringify(evt[0].attributes));
+ showModalPopup(evt[0]);
+ var atts = evt[0].attributes
+ stopID.value = atts.OBJECTID;
+ stopMainID.value = atts.BSID;
+ stopNames.value = atts.STOPNAME;
+ stopRoutes.value = atts.ROUTES;
+ },function(err){
+ console.log("ERROR " + JSON.stringify(err));
+ });
+ }.bind(this));
+ }
+
+ function updatePendingEditStatus(){
+ if( editsStore.hasPendingEdits())
+ {
+ var edits = editsStore.retrieveEditsQueue();
+ pendingEdits.innerHTML = edits.length;
+ }
+ else
+ {
+ pendingEdits.innerHTML = 0;
+ }
+ }
+
+ /**
+ * ************************************
+ * MODAL POPUP HANDLER CODE
+ * ************************************
+ */
+
+ 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){
+ 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="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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 steps for working with web map tiles while offline.
+Basic responsive samples on how to work with the ArcGIS API for JavaScript while 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>
-
-
-
- 
-
-
+Go here to try out basic step-by-step samples.
+Use the following applications as building blocks.
+Check out the following full-featured applications.
Gives you an overview of the functionality related to storing and managing multiple layers of tiles.
This app shows how add, update and delete geographic features while offline and auto-resync when internet is reestablished.
@@ -95,22 +94,22 @@ Demonstrates working with geographic feature attachments such as images and associating them with a feature while offline.
Shows how to integrate .tpk files into your mapping app. Tile packages are a set of tile images from a map compressed into a single binary file.
This mobile feature editing demo is configured to maintain your edits and tiles after offline browser reloads and restarts.
@@ -173,12 +172,17 @@