-
-
-
-Basic steps for working with ArcGIS.com base maps for offline.
- -Add the basic library references. Then test to make sure map loads.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline ArcGIS.com</title>
-
- <!-- Bootstrap core CSS -->
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
- body {
- background-color: #ffffff;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
- .floatRight {float: right;}
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
- <script>
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<div class="container">
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tiles library within the require statement!
- require([
- "esri/map",
- "dojo/on",
- "esri/arcgis/utils",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tiles-basic-src.js",
- "dojo/domReady!"],
- function(Map,on,arcgisUtils,BootstrapMap) {
-
- var map;
-
- // Load the map
- arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){
- var map = response.map;
-
- map = response.map;
-
- // Initialize BootstrapMap to make the map responsive
- BootstrapMap.create(map);
-
- });
- });
-</script>
-
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
-</body>
-</html>
-
-
-
- This initializes the OfflineTilesEnabler library and tells it which tiled map service layer to use for offline. Test to make sure map loads.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline ArcGIS.com</title>
-
- <!-- Bootstrap core CSS -->
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- html, body, #map {
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
- }
- body {
- background-color: #000000;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
- .floatRight {float: right;}
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
- <script>
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tiles library within the require statement!
- require([
- "esri/map",
- "dojo/on",
- "esri/arcgis/utils",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tiles-basic-src.js",
- "dojo/domReady!"],
- function(Map,on,arcgisUtils,BootstrapMap) {
-
- var map, basemapLayer;
- var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler();
-
- showMap();
-
-
- function showMap(){
- // Load the map
- arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){
- map = response.map;
-
- // Initialize BootstrapMap to make the map responsive
- BootstrapMap.create(map);
-
- // Get the ArcGIS.com basemap that we want to use offline.
- // And then extend it for offline use.
- if(map.loaded)
- {
- basemapLayer = map.getLayer( map.layerIds[0] );
- initializeOfflineTiles();
-
- }
- else
- {
- map.on("load",function()
- {
- basemapLayer = map.getLayer( map.layerIds[0] );
- initializeOfflineTiles();
- });
- }
-
- });
- }
-
- function initializeOfflineTiles(){
- offlineTilesEnabler.extend(basemapLayer,function(success) {
- if (success) {
- console.log("ArcGIS.com map extended for offline!")
- }
- })
- }
- });
-</script>
-
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
-</body>
-</html>
-
-
-
- Enable the ability to download tiles as well the ability to toggle online and offline.
-
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline ArcGIS.com</title>
-
- <!-- Bootstrap core CSS -->
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
- body {
- background-color: #ffffff;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
-
- .floatRight {float: right;}
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
- <script>
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<div class="container">
- <div class="row">
- <div class="col-xs-10">
- <div class="form form-group btn-group" data-toggle="buttons">
- <button class="btn btn-success" id="btn-get-tiles">1. Download Tiles</button>
- <button class="btn btn-success" disabled id="btn-online-offline">2. Go Offline</button>
- <button class="btn btn-success" disabled id="btn-pan-left">3. Pan left</button>
- </div>
- </div>
- <div class="col-xs-2">
- <!-- this indicates whether app is offline (down) or online (up) -->
- <button id="btn-state" class="btn btn-success btn-large floatRight">
- <span id="state-span" class="glyphicon glyphicon-link"> Up</span>
- </button>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tiles library within the require statement!
- require([
- "esri/map",
- "dojo/on",
- "esri/arcgis/utils",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tiles-basic-src.js",
- "dojo/domReady!"],
- function(Map,on,arcgisUtils,BootstrapMap) {
-
- var map, basemapLayer;
- var offlineTilesEnabler = new O.esri.Tiles.OfflineTilesEnabler();
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState );
-
- // For cancelling the download of tiles
- var _wantToCancel;
- var _downloadState = "downloaded";
-
- // Set up min and max boundaries for retrieving tiles
- var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
-
- // Set up button click listeners.
- var btnGetTiles = document.getElementById("btn-get-tiles");
- var btnOnlineOffline = document.getElementById("btn-online-offline");
- var btnPanLeft = document.getElementById("btn-pan-left");
-
- var imgOfflineIndicator = document.getElementById("state-span");
- var btnState = document.getElementById("btn-state");
-
- on(btnGetTiles,"click",downloadTiles);
- on(btnOnlineOffline,"click",goOnlineOffline);
- on(btnPanLeft,"click",panLeft);
-
- showMap();
-
-
- function showMap(){
- // Load the map
- arcgisUtils.createMap("bbc1a04a3eca4430be144d7a08b43a17","mapDiv").then(function(response){
- map = response.map;
-
- // Initialize BootstrapMap to make the map responsive
- BootstrapMap.create(map);
-
- // Get the ArcGIS.com basemap that we want to use offline.
- // And then extend it for offline use.
- if(map.loaded)
- {
- basemapLayer = map.getLayer( map.layerIds[0] );
- initializeOfflineTiles();
-
- }
- else
- {
- map.on("load",function()
- {
- basemapLayer = map.getLayer( map.layerIds[0] );
- initializeOfflineTiles();
- });
- }
-
- });
- }
-
- function initializeOfflineTiles(){
- offlineTilesEnabler.extend(basemapLayer,function(success) {
- if (success) {
- console.log("ArcGIS.com map extended for offline!")
- }
- })
- }
-
- function downloadTiles(){
-
- if(_downloadState == "downloading"){
- _wantToCancel = true;
- }
- else{
- _wantToCancel = false;
-
- // First delete any existing tiles from database
- basemapLayer.deleteAllTiles(function(success,err){
- var zoom = basemapLayer.getMinMaxLOD(minZoomAdjust,maxZoomAdjust);
-
- // Now download tiles
- basemapLayer.prepareForOffline(zoom.min, zoom.max, map.extent, function(progress){
- console.log("downloading tiles...");
-
- if(progress.hasOwnProperty("countNow")){
- var percent = Math.floor(progress.countNow / progress.countMax * 100);
- btnGetTiles.innerHTML = 'Saving to phone ' + percent + "% - Tap to Cancel";
- }
-
- if( progress.finishedDownloading )
- {
- btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
-
- if( progress.cancelRequested )
- {
- alert("Tile download was cancelled");
- _downloadState = "cancelled";
- }
- else
- {
- alert("Tile download complete");
- _downloadState = "downloaded";
- btnOnlineOffline.disabled = false;
- }
-
- btnGetTiles.innerHTML = '1. Download Tiles';
- }
- return _wantToCancel; //determines if a cancel request has been issued
- });
-
- _downloadState = "downloading";
-
- });
- }
- }
-
- // Force the tileLayer between online and offline
- function goOnlineOffline(){
-
- btnPanLeft.disabled = false;
-
- if(btnOnlineOffline.innerHTML == "2. Go Offline"){
- toggleStateUp(false);
- console.log("Map is offline");
- }
- else{
- toggleStateUp(true);
- console.log("Map is online");
- }
- }
-
- function toggleStateUp(state){
- if(state){
- btnOnlineOffline.innerHTML = "2. Go Offline";
- basemapLayer.goOnline();
- imgOfflineIndicator.className = "glyphicon glyphicon-link";
- imgOfflineIndicator.innerHTML = " Up";
- btnState.className = "btn btn-success btn-large floatRight";
- }
- else{
- btnOnlineOffline.innerHTML = "2. Go Online";
- basemapLayer.goOffline();
- imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
- imgOfflineIndicator.innerHTML = " Down";
- btnState.className = "btn btn-danger btn-large floatRight";
- }
- }
-
- // Set the ArcGIS.com map online or offline.
- // When set offline it will look for tiles in the tiles database
- function updateState(){
- if(Offline.state === 'up'){
- if(typeof basemapLayer != "undefined") basemapLayer.goOnline();
- toggleStateUp(true);
- }
- else{
- if(typeof basemapLayer != "undefined") basemapLayer.goOffline();
- toggleStateUp(false);
- }
- }
-
- // Pan left when "offline" to view only tiles that have been stored locally
- function panLeft(){
- map.panLeft();
- }
- });
-</script>
-
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-
-</body>
-</html>
-
-
-
-
-
-
-Basic steps for working with Editing geographic features for offline.
- -Add library references and build basic layout. Then test to make sure map loads. - A fully working and editable version of this step is included in /demo/samples/editing-step1.html.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline Features</title>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
- <link rel="stylesheet" href="../widgets/modal/css/modal-popup.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- #img-offline-indicator {
- padding: 8px;
- position: relative; float: right;
- }
-
- /* Override mod-popup default */
- .mod-popup-stop-input {color: black;}
- .span-pending {color: blue; padding-left: 1em;}
- .voffset20px { margin-top: 20px; }
- .floatRight { float: right}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../../vendor/offline/offline.min.js"></script>
- <script>
- // Set how we pull in custom AMD modules
- var path = location.pathname.replace(/[^\/]+$/, '');
- var dojoConfig =
- {
- debug: true,
- packages:[
- {
- name: "widgets",
- location: path + "../widgets/modal/"
- }]
- }
-
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <script src="//js.arcgis.com/3.13/"></script>
-</head>
-
-<body>
-
-<div class="container voffset20px">
- <div class="row">
- <div class="col-xs-8">
- <button class="btn btn-success" id="btn-online-offline">Go Offline</button>
- <span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
- </div>
- <div class="col-xs-4">
- <button id="btn-state" class="btn btn-success btn-large floatRight">
- <span id="state-span" class="glyphicon glyphicon-link"> Up</span>
- </button>
- </div>
- </div>
- <div class="row voffset20px">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-<!-- Stub for modal popup -->
-<div id="modal-popup"></div>
-
-<script>
-
- require([
- "esri/map","esri/tasks/query",
- "dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
- "esri/symbols/SimpleMarkerSymbol","esri/Color",
- "widgets/popup","esri/layers/FeatureLayer",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../../dist/offline-edit-src.js",
- "dojo/domReady!"],
- function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
- Color,ModalPopup,FeatureLayer,BootstrapMap){
-
- var map, popup, editsStore;
- var defaultSymbol;
- var offlineFeaturesManager;
- var btnOnlineOffline, btnState, pendingEdits;
- var imgOfflineIndicator;
- var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
-
- initMap();
-
- function initMap(){
-
- map = BootstrapMap.create("mapDiv",{
- basemap: "topo",
- center: [-104.99,39.75], // longitude, latitude
- zoom: 15
- });
- }
- }
- );
-
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- This initializes and configures the modal popup. Test to make sure map loads and popup displays. - You'll notice the buttons on the popup don't work yet. We'll fix that in the Step 3. - A full working version of this step is included in /demo/samples/editing-step2.html.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline Features</title>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
- <link rel="stylesheet" href="../widgets/modal/css/modal-popup.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- #img-offline-indicator {
- padding: 8px;
- position: relative; float: right;
- }
-
- /* Override mod-popup default */
- .mod-popup-stop-input {color: black;}
- .span-pending {color: blue; padding-left: 1em;}
- .voffset20px { margin-top: 20px; }
- .floatRight { float: right}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../../vendor/offline/offline.min.js"></script>
- <script>
- // Set how we pull in custom AMD modules
- var path = location.pathname.replace(/[^\/]+$/, '');
- var dojoConfig =
- {
- debug: true,
- packages:[
- {
- name: "widgets",
- location: path + "../widgets/modal/"
- }]
- }
-
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <script src="//js.arcgis.com/3.13/"></script>
-</head>
-
-<body>
-
-<div class="container voffset20px">
- <div class="row">
- <div class="col-xs-8">
- <button class="btn btn-success" id="btn-online-offline">Go Offline</button>
- <span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
- </div>
- <div class="col-xs-4">
- <button id="btn-state" class="btn btn-success btn-large floatRight">
- <span id="state-span" class="glyphicon glyphicon-link"> Up</span>
- </button>
- </div>
- </div>
- <div class="row voffset20px">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-<!-- Stub for modal popup -->
-<div id="modal-popup"></div>
-
-<script>
-
- require([
- "esri/map","esri/tasks/query",
- "dojo/on","dojo/parser", "esri/renderers/SimpleRenderer",
- "esri/symbols/SimpleMarkerSymbol","esri/Color",
- "widgets/popup","esri/layers/FeatureLayer",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../../dist/offline-edit-src.js",
- "dojo/domReady!"],
- function(Map,Query,on,parser,SimpleRenderer,SimpleMarkerSymbol,
- Color,ModalPopup,FeatureLayer,BootstrapMap){
-
- var map, popup, editsStore;
- var defaultSymbol;
- var offlineFeaturesManager;
- var btnOnlineOffline, btnState, pendingEdits;
- var imgOfflineIndicator;
- var closeBtn,saveBtn,deleteBtn,stopMainID,stopID,stopRoutes,stopNames;
-
- initVars();
- initMap();
-
- function initMap(){
-
- map = BootstrapMap.create("mapDiv",{
- basemap: "topo",
- center: [-104.99,39.75], // longitude, latitude
- zoom: 15
- });
-
- map.on("load",function(evt){
- console.log("Map is loaded. Loading popup...")
- window.setTimeout(function(){
- popup.show();
- },2000);
- });
- }
-
- function initVars(){
-
- editsStore = new O.esri.Edit.EditStore();
- popup = new ModalPopup({animation: true, animationDuration: 1},"modal-popup");
- popup.startup();
-
- parser.parse();
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState );
-
-
- btnOnlineOffline = document.getElementById("btn-online-offline");
- imgOfflineIndicator = document.getElementById("state-span");
- btnState = document.getElementById("btn-state");
- pendingEdits = document.getElementById("span-pending-edits");
-
- // Modify symbol size based on screen size.
- // Bigger screens get smaller symbols. Smaller screens get larger symbols.
- var width = window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
-
- var height = window.innerHeight
- || document.documentElement.clientHeight
- || document.body.clientHeight;
-
- if (height >= 768 || width >= 1024) {
- defaultSymbol= new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255,0,0,0.5])).setSize(20);
- }
- else{
- defaultSymbol= new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255,0,0,0.5])).setSize(35);
- }
-
- // Variables for modal popup
- closeBtn = document.getElementById("mod-popup-close-btn");
- saveBtn = document.getElementById("mod-popup-save-btn");
- deleteBtn = document.getElementById("mod-popup-delete-btn");
- stopMainID = document.getElementById("stop-main-id");
- stopID = document.getElementById("stop-id");
- stopRoutes = document.getElementById("stop-routes");
- stopNames = document.getElementById("stop-names");
-
- }
-
- function setModalPopupClickListeners(){
- closeBtn.onclick = function(evt){
- hideModalPopup();
- }
-
- saveBtn.onclick = function(evt) {
- //TO-DO
- }
-
- }
-
- function showModalPopup(graphic){
- popup.graphic = graphic; // assign graphic to modPopup as a property.
- popup.show();
- }
-
- function hideModalPopup(){
- popup.hide();
- }
-
- // Force feature service offline
- function goOnlineOffline(){
-
- if(btnOnlineOffline.innerHTML == "Go Offline"){
- toggleStateUp(false);
- console.log("Map is offline");
- }
- else{
- toggleStateUp(true);
- console.log("Map is online");
- }
- }
-
- // Set the UX to online or offline state
- function toggleStateUp(state){
- if(state){
- btnOnlineOffline.innerHTML = "Go Offline";
- offlineFeaturesManager.goOnline();
- imgOfflineIndicator.className = "glyphicon glyphicon-link";
- imgOfflineIndicator.innerHTML = " Up";
- btnState.className = "btn btn-success btn-large floatRight";
- }
- else{
- btnOnlineOffline.innerHTML = "Go Online";
- offlineFeaturesManager.goOffline();
- imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
- imgOfflineIndicator.innerHTML = " Down";
- btnState.className = "btn btn-danger btn-large floatRight";
- }
- }
-
- // Automatically set the feature service online or offline.
- function updateState(){
- if(Offline.state === 'up'){
- toggleStateUp(true);
- }
- else{
- toggleStateUp(false);
- }
- }
- }
- );
-
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- Enable the ability to store features (points, lines and polygons) while offline, and resync features when internet is restored. - A full working version of this step is included in /demo/samples/editing-step3.html.
-
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline Features</title>
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
- <link rel="stylesheet" href="//js.arcgis.com/3.13/esri/css/esri.css">
- <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <link rel="stylesheet" href="../widgets/modal/css/modal-popup.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- #img-offline-indicator {
- padding: 8px;
- position: relative;
- float: right;
- }
-
- /* Override mod-popup default */
- .mod-popup-stop-input {
- color: black;
- }
-
- .span-pending {
- color: blue;
- padding-left: 1em;
- }
-
- .voffset20px {
- margin-top: 20px;
- }
-
- .floatRight {
- float: right
- }
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../../vendor/offline/offline.min.js"></script>
- <script>
- // Set how we pull in custom AMD modules
- var path = location.pathname.replace(/[^\/]+$/, '');
- var dojoConfig =
- {
- debug: true,
- packages: [
- {
- name: "widgets",
- location: path + "../widgets/modal/"
- }]
- }
-
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function () {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <script src="//js.arcgis.com/3.13/"></script>
-</head>
-
-<body>
-
-<div class="container voffset20px">
- <div class="row">
- <div class="col-xs-8">
- <button class="btn btn-success" id="btn-online-offline">Go Offline</button>
- <span class="span-pending">Pending Edits <span id="span-pending-edits" class="badge">0</span></span>
- </div>
- <div class="col-xs-4">
- <button id="btn-state" class="btn btn-success btn-large floatRight">
- <span id="state-span" class="glyphicon glyphicon-link"> Up</span>
- </button>
- </div>
- </div>
- <div class="row voffset20px">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-<!-- Stub for modal popup -->
-<div id="modal-popup"></div>
-
-<script>
-
- require([
- "esri/map", "esri/tasks/query",
- "dojo/on", "dojo/parser", "esri/renderers/SimpleRenderer",
- "esri/symbols/SimpleMarkerSymbol", "esri/Color",
- "widgets/popup", "esri/layers/FeatureLayer",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../../dist/offline-edit-src.js",
- "dojo/domReady!"],
- function (Map, Query, on, parser, SimpleRenderer, SimpleMarkerSymbol,
- Color, ModalPopup, FeatureLayer, BootstrapMap) {
-
- var map, popup, editsStore;
- var defaultSymbol;
- var offlineFeaturesManager;
- var btnOnlineOffline, btnState, pendingEdits;
- var imgOfflineIndicator;
- var closeBtn, saveBtn, deleteBtn, stopMainID, stopID, stopRoutes, stopNames;
- var busStopFeatureLayer;
-
- initVars();
- initMap();
-
- function initMap() {
-
- map = BootstrapMap.create("mapDiv", {
- basemap: "topo",
- center: [-104.99, 39.75], // longitude, latitude
- zoom: 15
- });
-
- busStopFeatureLayer = new FeatureLayer("http://services1.arcgis.com/M8KJPUwAXP8jhtnM/arcgis/rest/services/Denver_Bus_Stops/FeatureServer/0", {
- mode: FeatureLayer.MODE_SNAPSHOT,
- outFields: ["OBJECTID", "BSID", "ROUTES", "STOPNAME"]
- });
-
- //Set the graphics to red boxes to make it easy to click on them
- //on a mobile device.
- busStopFeatureLayer.setRenderer(new SimpleRenderer(defaultSymbol));
- busStopFeatureLayer.on("update-end", function (evt) {
-
- // Now we can enable the button click listener
- on(btnOnlineOffline, "click", goOnlineOffline);
-
- initOfflineFeaturesMgr();
- setFeatureLayerClickHandler();
- setModalPopupClickListeners();
- });
-
- map.addLayer(busStopFeatureLayer);
- }
-
- function initVars() {
-
- editsStore = new O.esri.Edit.EditStore();
- popup = new ModalPopup({animation: true, animationDuration: 1}, "modal-popup");
- popup.startup();
-
- parser.parse();
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState);
-
-
- btnOnlineOffline = document.getElementById("btn-online-offline");
- imgOfflineIndicator = document.getElementById("state-span");
- btnState = document.getElementById("btn-state");
- pendingEdits = document.getElementById("span-pending-edits");
-
- // Modify symbol size based on screen size.
- // Bigger screens get smaller symbols. Smaller screens get larger symbols.
- var width = window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
-
- var height = window.innerHeight
- || document.documentElement.clientHeight
- || document.body.clientHeight;
-
- if (height >= 768 || width >= 1024) {
- defaultSymbol = new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255, 0, 0, 0.5])).setSize(20);
- }
- else {
- defaultSymbol = new SimpleMarkerSymbol().setStyle(
- SimpleMarkerSymbol.STYLE_DIAMOND).setColor(
- new Color([255, 0, 0, 0.5])).setSize(35);
- }
-
- // Variables for modal popup
- closeBtn = document.getElementById("mod-popup-close-btn");
- saveBtn = document.getElementById("mod-popup-save-btn");
- deleteBtn = document.getElementById("mod-popup-delete-btn");
- stopMainID = document.getElementById("stop-main-id");
- stopID = document.getElementById("stop-id");
- stopRoutes = document.getElementById("stop-routes");
- stopNames = document.getElementById("stop-names");
-
- }
-
- /**
- * ************************************
- * OFFLINE FEATURE SERVICE HANDLER CODE
- * ************************************
- */
-
- function initOfflineFeaturesMgr() {
- offlineFeaturesManager = new O.esri.Edit.OfflineFeaturesManager();
-
- // IMPORTANT!!!
- // A proxy page may be required to upload attachments.
- // If you are using a CORS enabled server you may be able to set the proxyPath to null.
- // Refer to "Using the Proxy Page" for more information:
- //https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html
- offlineFeaturesManager.proxyPath = null;
-
- // IMPORTANT!!!
- // This tells the database which graphic.attribute property to use as a unique identifier
- // You can lok this information up in your feature service directory under the "Fields" category.
- // Example: http://services1.arcgis.com/M8KJPUwAXP8jhtnM/arcgis/rest/services/Denver_Bus_Stops/FeatureServer/0
- offlineFeaturesManager.DB_UID = "FID";
-
- offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED, updatePendingEditStatus);
- offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_SENT, updatePendingEditStatus);
- offlineFeaturesManager.on(offlineFeaturesManager.events.ALL_EDITS_SENT, updatePendingEditStatus);
-
- offlineFeaturesManager.on(offlineFeaturesManager.events.EDITS_ENQUEUED_ERROR, function(errorsArray){
- alert("There was an error attempting to write to the database: " + JSON.stringify(errorsArray));
- });
-
- offlineFeaturesManager.extend(busStopFeatureLayer, function (success, error) {
- if (success) {
- console.log("offlineFeaturesManager initialized.");
-
- Offline.check();
- Offline.on('up down', updateState);
- }
- else {
- alert("Unable to enable feature layer for offline usage. " + error);
- }
- });
- }
-
- // Display modal popup when someone clicks on a feature
- // and load the fields with data from the feature service.
- function setFeatureLayerClickHandler() {
- busStopFeatureLayer.on("click", function (evt) {
-
- showModalPopup(evt.graphic);
- var atts = evt.graphic.attributes;
- stopID.value = atts.BSID;
- stopMainID.value = atts.FID;
- stopNames.value = atts.STOPNAME;
- stopRoutes.value = atts.ROUTES;
-
- }.bind(this));
- }
-
- function updatePendingEditStatus() {
- busStopFeatureLayer.pendingEditsCount(function(count){
- pendingEdits.innerHTML = count;
- });
- }
-
-
- function setModalPopupClickListeners() {
- closeBtn.onclick = function (evt) {
- hideModalPopup();
- };
-
- saveBtn.onclick = function (evt) {
- popup.graphic.attributes.ROUTES = stopRoutes.value;
- popup.graphic.attributes.STOPNAME = stopNames.value;
-
- busStopFeatureLayer.applyEdits(null, [popup.graphic], null, function (result) {
- console.log("Successfully saved changes to: " +
- popup.graphic.attributes.STOPNAME);
- hideModalPopup();
- },
- function (err) {
- alert("There was a problem while trying to save: " +
- popup.graphic.attributes.STOPNAME);
- })
- };
-
- deleteBtn.onclick = function (evt) {
- busStopFeatureLayer.applyEdits(null, null, [popup.graphic], function (result) {
- console.log("Successfully deleted: " + popup.graphic.attributes.STOPNAME);
- hideModalPopup();
- },
- function (err) {
- alert("There was a problem while trying to delete: " +
- popup.graphic.attributes.STOPNAME);
- })
- }
-
- }
-
- function showModalPopup(graphic) {
- popup.graphic = graphic; // assign graphic to modPopup as a property.
- popup.show();
- }
-
- function hideModalPopup() {
- popup.hide();
- }
-
- /**
- * ************************************
- * GO OFFLINE/ONLINE HANDLER CODE
- * ************************************
- */
-
- // Force feature service offline
- function goOnlineOffline() {
-
- if (btnOnlineOffline.innerHTML == "Go Offline") {
- toggleStateUp(false);
- console.log("Map is offline");
- }
- else {
- toggleStateUp(true);
- console.log("Map is online");
- }
- }
-
- // Set the UX to online or offline state
- function toggleStateUp(state) {
- if (state) {
- offlineFeaturesManager.goOnline();
- btnOnlineOffline.innerHTML = "Go Offline";
- imgOfflineIndicator.className = "glyphicon glyphicon-link";
- imgOfflineIndicator.innerHTML = " Up";
- btnState.className = "btn btn-success btn-large floatRight";
- }
- else {
- offlineFeaturesManager.goOffline();
- btnOnlineOffline.innerHTML = "Go Online";
- imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
- imgOfflineIndicator.innerHTML = " Down";
- btnState.className = "btn btn-danger btn-large floatRight";
- }
- }
-
- // Automatically set the feature service online or offline.
- function updateState() {
- if (Offline.state === 'up') {
- toggleStateUp(true);
- }
- else {
- toggleStateUp(false);
- }
- }
- }
- );
-
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
-
-
-
-Basic steps for working with tiled base map services for offline.
- -Add the basic library references. Then test to make sure map loads.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline Tiles</title>
-
- <!-- Bootstrap core CSS -->
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- body {
- background-color: #ffffff;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
-
- .floatRight {float: right;}
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
- <script>
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-<div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tiles library within the require statement!
- require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
- function(Map,on,Bootstrapmap) {
-
- // Initialize our map to be responsive
- var map = Bootstrapmap.create("mapDiv",{
- basemap: "topo",
- center: [-122.45, 37.75], // longitude, latitude
- zoom: 15
- });
-
- });
-</script>
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- This initializes the offline-editor-js library. Test to make sure map loads.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline Tiles</title>
-
- <!-- Bootstrap core CSS -->
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- body {
- background-color: #ffffff;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
-
- .floatRight {float: right;}
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
- <script>
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-<div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tiles library within the require statement!
- require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
- function(Map,on,Bootstrapmap) {
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState );
-
- // Initialize our map to be responsive
- var map = Bootstrapmap.create("mapDiv",{
- //basemap: "topo", // comment out this basemap!
- center: [-122.45, 37.75], // longitude, latitude
- zoom: 15
- });
-
- // Now we initialize a topo tiled basemap service to be offline-enabled.
- var tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
- "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
- function(evt){
- console.log("Offline tile lib enabled. App is: " + Offline.state);
- },
- true);
-
- // Add our offline tile layer to the map instead of using the default basemap!
- map.addLayer(tileLayer);
-
- // Set the tileLayer online or offline.
- // When set to offline, the map will look for tiles in the local tiles database
- function updateState(){
- if(Offline.state === 'up'){
- if(typeof tileLayer != "undefined") tileLayer.goOnline();
- }
- else{
- if(typeof tileLayer != "undefined") tileLayer.goOffline();
- }
- }
-
- });
-</script>
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- Enable the ability to download tiles as well the ability to toggle online and offline.
-
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline Tiles</title>
-
- <!-- Bootstrap core CSS -->
- <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 500px;
- max-height: 1000px;
- }
-
- body {
- background-color: #ffffff;
- overflow: hidden;
- font-family: "Trebuchet MS";
- }
-
- .floatRight { float: right;}
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to offline.js which detects online/offline conditions -->
- <script src="../vendor/offline/offline.min.js"></script>
- <script>
- // Set the online/offline detection options.
- // More info at: http://github.hubspot.com/offline/docs/welcome/
- Offline.options = {
- checks: {
- image: {
- url: function() {
- return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
- (Math.floor(Math.random() * 1000000000));
- }
- },
- active: 'image'
- }
- }
- </script>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<!-- Our buttons and online/offline indicator -->
-<div class="container">
- <div class="row">
- <div class="col-xs-10">
- <div class="form form-group btn-group" data-toggle="buttons">
- <button class="btn btn-success" id="btn-get-tiles">1. Download Tiles</button>
- <button class="btn btn-success" disabled id="btn-online-offline">2. Go Offline</button>
- <button class="btn btn-success" disabled id="btn-pan-left">3. Pan left</button>
- </div>
- </div>
- <div class="col-xs-2">
- <!-- this indicates whether app is offline (down) or online (up) -->
- <button id="btn-state" class="btn btn-success btn-large floatRight">
- <span id="state-span" class="glyphicon glyphicon-link"> Up</span>
- </button>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tiles library within the require statement!
- require(["esri/map","dojo/on","//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
- function(Map,on,Bootstrapmap){
-
- var map,basemapLayer;
-
- // Check if browser state is online or offline
- Offline.check();
- Offline.on('up down', updateState );
-
- // For cancelling the download of tiles
- var _wantToCancel = false;
- var _downloadState = "downloaded";
-
- // Set up min and max boundaries for retrieving tiles
- var minZoomAdjust = -1, maxZoomAdjust = 1;
-
- // Set up button click listeners.
- var btnGetTiles = document.getElementById("btn-get-tiles");
- var btnOnlineOffline = document.getElementById("btn-online-offline");
- var btnPanLeft = document.getElementById("btn-pan-left");
-
- on(btnGetTiles,"click",downloadTiles);
- on(btnOnlineOffline,"click",goOnlineOffline);
- on(btnPanLeft,"click",panLeft);
-
- var imgOfflineIndicator = document.getElementById("state-span");
- var btnState = document.getElementById("btn-state");
-
- showMap();
-
- function showMap(){
-
- // Initialize our map to be responsive
- map = Bootstrapmap.create("mapDiv",{
- //basemap: "topo", // comment out this basemap!
- center: [-122.45, 37.75], // longitude, latitude
- zoom: 15
- });
-
- // Now we initialize the basemap to be offline-enabled. This is out new basemap.
- basemapLayer = O.esri.Tiles.OfflineTileEnablerLayer(
- "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
- function(evt){
- console.log("Offline tile lib enabled. App is: " + Offline.state);
- },
- true);
-
- // Add our offline tile layer to the map instead of using the default basemap!
- map.addLayer(basemapLayer);
- }
-
- function downloadTiles(){
-
- if(_downloadState == "downloading"){
- _wantToCancel = true;
- }
- else{
- _wantToCancel = false;
-
- // First delete any existing tiles from database
- basemapLayer.deleteAllTiles(function(success,err){
- var zoom = basemapLayer.getMinMaxLOD(minZoomAdjust,maxZoomAdjust);
-
- // Now download tiles
- basemapLayer.prepareForOffline(zoom.min, zoom.max, map.extent, function(progress){
- console.log("downloading tiles...");
-
- if(progress.hasOwnProperty("countNow")){
- var percent = Math.floor(progress.countNow / progress.countMax * 100);
- btnGetTiles.innerHTML = 'Saving to phone ' + percent + "% - Tap to Cancel";
- }
-
- if( progress.finishedDownloading )
- {
- btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
-
- if( progress.cancelRequested )
- {
- alert("Tile download was cancelled");
- _downloadState = "cancelled";
- }
- else
- {
- alert("Tile download complete");
- _downloadState = "downloaded";
- btnOnlineOffline.disabled = false;
- }
-
- btnGetTiles.innerHTML = '1. Download Tiles';
- }
- return _wantToCancel; //determines if a cancel request has been issued
- });
-
- _downloadState = "downloading";
-
- });
- }
- }
-
- // Force the tileLayer between online and offline
- function goOnlineOffline(){
-
- btnPanLeft.disabled = false;
-
- if(btnOnlineOffline.innerHTML == "2. Go Offline"){
- toggleStateUp(false);
- console.log("Map is offline");
- }
- else{
- toggleStateUp(true);
- console.log("Map is online");
- }
- }
-
- function toggleStateUp(state){
- if(state){
- btnOnlineOffline.innerHTML = "2. Go Offline";
- basemapLayer.goOnline();
- imgOfflineIndicator.className = "glyphicon glyphicon-link";
- imgOfflineIndicator.innerHTML = " Up";
- btnState.className = "btn btn-success btn-large floatRight";
- }
- else{
- btnOnlineOffline.innerHTML = "2. Go Online";
- basemapLayer.goOffline();
- imgOfflineIndicator.className = "glyphicon glyphicon-thumbs-down";
- imgOfflineIndicator.innerHTML = " Down";
- btnState.className = "btn btn-danger btn-large floatRight";
- }
- }
-
- // Set the ArcGIS.com map online or offline.
- // When set offline it will look for tiles in the tiles database
- function updateState(){
- if(Offline.state === 'up'){
- if(typeof basemapLayer != "undefined") basemapLayer.goOnline();
- toggleStateUp(true);
- }
- else{
- if(typeof basemapLayer != "undefined") basemapLayer.goOffline();
- toggleStateUp(false);
- }
- }
-
- // Pan left when "offline" to view only tiles that have been stored locally
- function panLeft(){
- map.panLeft();
- }
-
- });
-</script>
-
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
-
-
-
-Basic steps for working with TPK packages for offline.
- -Add the basic library references and CSS. Then test to make sure application loads. - There won't be a map to display just yet, you'll only see the header bar.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline TPK</title>
- <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 300px;
- max-height: 1000px;
- }
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<div class="container">
- <div class="row">
- <div class="col-lg-12">
- <div class="form form-group input-group">
- <input id="url-input" type="text" class="form-control"
- value="../samples/tpks/Beirut.zip">
- <span class="input-group-btn">
- <button id="url-btn" class="btn btn-success" type="button">Go!</button>
- </span>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tpk library within the require statement!
- require([
- "esri/map",
- "dojo/on",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tpk-src.js", "dojo/domReady!"],
- function(Map,on,BootstrapMap) {
-
- var map, tpkLayer;
-
- var url = document.getElementById("url-input");
- var urlInputBtn = document.getElementById("url-btn");
-
- }
- );
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- Download and unzip the TPK. You should get an alert when TPK is fully downloaded.
-NOTE: If you have a TPK file you will have to change its type to .zip for the browser to recognize it.
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline TPK</title>
- <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 300px;
- max-height: 1000px;
- }
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<div class="container">
- <div class="row">
- <div class="col-lg-12">
- <div class="form form-group input-group">
- <input id="url-input" type="text" class="form-control"
- value="../samples/tpks/Beirut.zip">
- <span class="input-group-btn">
- <button id="url-btn" class="btn btn-success" type="button">Go!</button>
- </span>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tpk library within the require statement!
- require([
- "esri/map",
- "dojo/on",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tpk-src.js", "dojo/domReady!"],
- function(Map,on,BootstrapMap) {
-
- var map, tpkLayer;
-
- var url = document.getElementById("url-input");
- var urlInputBtn = document.getElementById("url-btn");
- urlInputBtn.onclick = function(){
- getTPK();
- };
-
- // Retrieve the TPK file via an HTTP request
- function getTPK(){
- urlInputBtn.innerHTML = "Get file via url";
-
- var xhrRequest = new XMLHttpRequest();
- xhrRequest.open("GET", url.value, true);
- xhrRequest.responseType = "blob";
- xhrRequest.onprogress = function(evt){
- var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
- urlInputBtn.innerHTML = "Get file via url " + percent + "%";
- console.log("Begin downloading remote tpk file...")
- }
-
- xhrRequest.error = function(err){console.log("ERROR")}
-
- xhrRequest.onload = function(oEvent) {
- if(this.status == 200) {
- console.log("Remote tpk download finished.")
- zipParser(this.response);
- }
- else{
- alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
- }
- };
-
- xhrRequest.send();
- }
-
- // Parse the zip file contents into a zip.Entries object
- function zipParser(blob){
-
- O.esri.zip.createReader(new O.esri.zip.BlobReader(blob), function (zipReader) {
- zipReader.getEntries(function (entries) {
- if(entries) alert("TPK downloaded and unzipped!");
- zipReader.close(function(evt){
- console.log("Done reading zip file.")
- })
- }, function (err) {
- alert("There was a problem reading the file!: " + err);
- })
- })
- }
-
- }
- );
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
- In this step we hand the zip file entries over to TPKLayer to inflate the map.
-
-
-
-<!DOCTYPE html>
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
- <title>Offline TPK</title>
- <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
- <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
- <link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
- <style>
- #mapDiv {
- min-height: 300px;
- max-height: 1000px;
- }
- .container { padding: 20px;}
- </style>
-
- <!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
- <script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
-
- <script src="http://js.arcgis.com/3.11/"></script>
-</head>
-
-<body>
-
-<div class="container">
- <div class="row">
- <div class="col-lg-12">
- <div class="form form-group input-group">
- <input id="url-input" type="text" class="form-control"
- value="../samples/tpks/Beirut.zip">
- <span class="input-group-btn">
- <button id="url-btn" class="btn btn-success" type="button">Go!</button>
- </span>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <div id="mapDiv"></div>
- </div>
- </div>
-</div>
-
-<script>
-
- // Make sure to reference the tpk library within the require statement!
- require([
- "esri/map",
- "dojo/on",
- "//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
- "../dist/offline-tpk-src.js", "dojo/domReady!"],
- function(Map,on,BootstrapMap) {
-
- var map, tpkLayer;
-
- var url = document.getElementById("url-input");
- var urlInputBtn = document.getElementById("url-btn");
- urlInputBtn.onclick = function(){
- getTPK();
- };
-
- // Retrieve the TPK file via an HTTP request
- function getTPK(){
- urlInputBtn.innerHTML = "Get file via url";
-
- var xhrRequest = new XMLHttpRequest();
- xhrRequest.open("GET", url.value, true);
- xhrRequest.responseType = "blob";
- xhrRequest.onprogress = function(evt){
- var percent = (parseFloat(evt.loaded / evt.totalSize) * 100).toFixed(0);
- urlInputBtn.innerHTML = "Get file via url " + percent + "%";
- console.log("Begin downloading remote tpk file...")
- }
-
- xhrRequest.error = function(err){console.log("ERROR")}
-
- xhrRequest.onload = function(oEvent) {
- if(this.status == 200) {
- console.log("Remote tpk download finished.")
- zipParser(this.response);
- }
- else{
- alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
- }
- };
-
- xhrRequest.send();
- }
-
- // Parse the zip file contents into a zip.Entries object
- function zipParser(blob){
-
- O.esri.zip.createReader(new O.esri.zip.BlobReader(blob), function (zipReader) {
- zipReader.getEntries(function (entries) {
- initMap(entries);
- //if(entries)alert("TPK downloaded and unzipped!");
- zipReader.close(function(evt){
- console.log("Done reading zip file.")
- })
- }, function (err) {
- alert("There was a problem reading the file!: " + err);
- })
- })
- }
-
- // Initialize the Map and the TPKLayer
- function initMap(entries){
-
- map = BootstrapMap.create("mapDiv",{});
-
- tpkLayer = new O.esri.TPK.TPKLayer();
- tpkLayer.on("progress", function (evt) {
- console.log("TPK loading...");
- })
- tpkLayer.extend(entries);
-
- map.addLayer(tpkLayer);
- }
-
- }
- );
-</script>
-<!-- Bootstrap core JavaScript
-================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-</body>
-</html>
-
-
-
-
-
-
-Basic responsive samples on how to work with the ArcGIS API for JavaScript while offline.
- -