mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
initial stubs
This commit is contained in:
Andy Gup
parent
79be4d4c95
commit
03cfea6305
@ -85,456 +85,456 @@
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1>Getting Started</h1>
|
||||
<p>Basic steps for working with <b>Editing</b> of geographic features for offline.</p>
|
||||
<p>Basic steps for working with <b>Editing geographic features</b> for offline.</p>
|
||||
<!--<p><a class="btn btn-primary btn-lg" role="button">Samples »</a></p>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12">
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-12 col-lg-12">
|
||||
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#Step1" data-toggle="tab">Step 1</a></li>
|
||||
<li><a href="#Step2" data-toggle="tab">Step 2</a></li>
|
||||
<li><a href="#Step3" data-toggle="tab">Step 3</a></li>
|
||||
<li><a href="#Step4" data-toggle="tab">Step 4</a></li>
|
||||
</ul>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="active"><a href="#Step1" data-toggle="tab">Step 1</a></li>
|
||||
<li><a href="#Step2" data-toggle="tab">Step 2</a></li>
|
||||
<li><a href="#Step3" data-toggle="tab">Step 3</a></li>
|
||||
<li><a href="#Step4" data-toggle="tab">Step 4</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content well">
|
||||
<div class="tab-pane active" id="Step1">
|
||||
<h3>Step 1: Fork or clone <i>offline-editor-js</i></h3>
|
||||
<p>Here are the important directories to know:</p>
|
||||
<ul>
|
||||
<li><b>\dist</b> - concatenated library source and minified library files.</li>
|
||||
<li><b>\samples</b> - examples that demonstrate the library's functionality.</li>
|
||||
<li><b>\vendor</b> - contains IndexedDBShim and offline.js libraries</li>
|
||||
</ul>
|
||||
<br>
|
||||
<a href="http://github.com/Esri/offline-editor-js"><button type="button" class="btn btn-md btn-success">Fork on GitHub</button></a>
|
||||
</div>
|
||||
<div class="tab-pane" id="Step2">
|
||||
<h3>Step 2: Fill in the basics</h3>
|
||||
<p>Add the basic library references. Then test to make sure map loads.</p>
|
||||
<br>
|
||||
<div class="tab-content well">
|
||||
<div class="tab-pane active" id="Step1">
|
||||
<h3>Step 1: Fork or clone <i>offline-editor-js</i></h3>
|
||||
<p>Here are the important directories to know:</p>
|
||||
<ul>
|
||||
<li><b>\dist</b> - concatenated library source and minified library files.</li>
|
||||
<li><b>\samples</b> - examples that demonstrate the library's functionality.</li>
|
||||
<li><b>\vendor</b> - contains IndexedDBShim and offline.js libraries</li>
|
||||
</ul>
|
||||
<br>
|
||||
<a href="http://github.com/Esri/offline-editor-js"><button type="button" class="btn btn-md btn-success">Fork on GitHub</button></a>
|
||||
</div>
|
||||
<div class="tab-pane" id="Step2">
|
||||
<h3>Step 2: Fill in the basics</h3>
|
||||
<p>Add the basic library references. Then test to make sure map loads.</p>
|
||||
<br>
|
||||
<pre class="prettyprint">
|
||||
<code>
|
||||
<!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>
|
||||
<!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?_=' +
|
||||
<!-- Include a reference to offline.js which detects online/offline conditions -->
|
||||
<script src="../vendor/offline/offline.min.js"></script>
|
||||
<script>
|
||||
// Set the online/offline detection options.
|
||||
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
||||
Offline.options = {
|
||||
checks: {
|
||||
image: {
|
||||
url: function() {
|
||||
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
||||
(Math.floor(Math.random() * 1000000000));
|
||||
}
|
||||
},
|
||||
active: 'image'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
},
|
||||
active: 'image'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
||||
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
||||
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
||||
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
||||
|
||||
<script src="http://js.arcgis.com/3.10/"></script>
|
||||
</head>
|
||||
<script src="http://js.arcgis.com/3.10/"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
var map;
|
||||
<script>
|
||||
var map;
|
||||
|
||||
// Make sure to reference the tiles library within the require statement!
|
||||
require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
|
||||
map = new Map("map", {
|
||||
basemap: "topo",
|
||||
center: [-122.45, 37.75], // longitude, latitude
|
||||
zoom: 13
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
// Make sure to reference the tiles library within the require statement!
|
||||
require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
|
||||
map = new Map("map", {
|
||||
basemap: "topo",
|
||||
center: [-122.45, 37.75], // longitude, latitude
|
||||
zoom: 13
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="Step3">
|
||||
<h3>Step 3: Configure tiled basemap to work offline</h3>
|
||||
<p>This initializes the offline-editor-js library. Test to make sure map loads.</p>
|
||||
<br>
|
||||
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="Step3">
|
||||
<h3>Step 3: Configure tiled basemap to work offline</h3>
|
||||
<p>This initializes the offline-editor-js library. Test to make sure map loads.</p>
|
||||
<br>
|
||||
|
||||
<pre class="prettyprint">
|
||||
<code>
|
||||
<!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>
|
||||
<!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?_=' +
|
||||
<!-- Include a reference to offline.js which detects online/offline conditions -->
|
||||
<script src="../vendor/offline/offline.min.js"></script>
|
||||
<script>
|
||||
// Set the online/offline detection options.
|
||||
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
||||
Offline.options = {
|
||||
checks: {
|
||||
image: {
|
||||
url: function() {
|
||||
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
||||
(Math.floor(Math.random() * 1000000000));
|
||||
}
|
||||
},
|
||||
active: 'image'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
}
|
||||
},
|
||||
active: 'image'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
||||
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
||||
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
||||
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
||||
|
||||
<script src="http://js.arcgis.com/3.10/"></script>
|
||||
</head>
|
||||
<script src="http://js.arcgis.com/3.10/"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
var map;
|
||||
<script>
|
||||
var map;
|
||||
|
||||
// Make sure to reference the offline tiles library within the require statement!
|
||||
require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
|
||||
// Make sure to reference the offline tiles library within the require statement!
|
||||
require(["esri/map","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"], function(Map) {
|
||||
|
||||
// Check if browser state is online or offline
|
||||
Offline.check();
|
||||
Offline.on('up down', updateState );
|
||||
// Check if browser state is online or offline
|
||||
Offline.check();
|
||||
Offline.on('up down', updateState );
|
||||
|
||||
// Initialize Esri.Map
|
||||
map = new Map("map", {
|
||||
//basemap: "topo", // comment out this basemap!
|
||||
center: [-122.45, 37.75], // longitude, latitude
|
||||
zoom: 13
|
||||
});
|
||||
// Initialize Esri.Map
|
||||
map = new Map("map", {
|
||||
//basemap: "topo", // comment out this basemap!
|
||||
center: [-122.45, 37.75], // longitude, latitude
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
// Now we initialize a topo tiled basemap service to be offline-enabled.
|
||||
tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
|
||||
// Now we initialize a topo tiled basemap service to be offline-enabled.
|
||||
tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
|
||||
"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
|
||||
function(evt){
|
||||
console.log("Offline tile lib enabled. App is: " + Offline.state);
|
||||
console.log("Offline tile lib enabled. App is: " + Offline.state);
|
||||
},
|
||||
true);
|
||||
|
||||
// Add our offline tile layer to the map instead of using the default basemap!
|
||||
map.addLayer(tileLayer);
|
||||
// Add our offline tile layer to the map instead of using the default basemap!
|
||||
map.addLayer(tileLayer);
|
||||
|
||||
// Set the tileLayer online or offline.
|
||||
// When set to offline, the map will look for tiles in the tiles database
|
||||
function updateState(){
|
||||
if(Offline.state === 'up'){
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOnline();
|
||||
}
|
||||
else{
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOffline();
|
||||
}
|
||||
}
|
||||
// Set the tileLayer online or offline.
|
||||
// When set to offline, the map will look for tiles in the tiles database
|
||||
function updateState(){
|
||||
if(Offline.state === 'up'){
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOnline();
|
||||
}
|
||||
else{
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOffline();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
||||
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane" id="Step4">
|
||||
<h3>Step 4: Configure tiles download.</h3>
|
||||
<p>Enable the ability to download tiles as well the ability to toggle online and offline.</p>
|
||||
<br>
|
||||
<div class="tab-pane" id="Step4">
|
||||
<h3>Step 4: Configure tiles download.</h3>
|
||||
<p>Enable the ability to download tiles as well the ability to toggle online and offline.</p>
|
||||
<br>
|
||||
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active"><a href="#code" data-toggle="tab">Code</a></li>
|
||||
<li class=""><a href="#mapTab" data-toggle="tab">Map</a></li>
|
||||
</ul>
|
||||
<ul id="myTab" class="nav nav-tabs">
|
||||
<li class="active"><a href="#code" data-toggle="tab">Code</a></li>
|
||||
<li class=""><a href="#mapTab" data-toggle="tab">Map</a></li>
|
||||
</ul>
|
||||
|
||||
</br>
|
||||
</br>
|
||||
|
||||
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="tab-pane fade in active" id="code">
|
||||
<pre class="prettyprint">
|
||||
<div id="myTabContent" class="tab-content">
|
||||
<div class="tab-pane fade in active" id="code">
|
||||
<pre class="prettyprint">
|
||||
<code>
|
||||
|
||||
<!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>
|
||||
<!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 offline.js which detects online/offline conditions -->
|
||||
<script src="../vendor/offline/offline.min.js"></script>
|
||||
<script>
|
||||
// Set the online/offline detection options.
|
||||
// More info at: http://github.hubspot.com/offline/docs/welcome/
|
||||
Offline.options = {
|
||||
checks: {
|
||||
image: {
|
||||
url: function() {
|
||||
return 'http://esri.github.io/offline-editor-js/tiny-image.png?_=' +
|
||||
(Math.floor(Math.random() * 1000000000));
|
||||
}
|
||||
},
|
||||
active: 'image'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
||||
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
||||
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
||||
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
||||
|
||||
<script src="http://js.arcgis.com/3.10/"></script>
|
||||
</head>
|
||||
<script src="http://js.arcgis.com/3.10/"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
|
||||
<!-- Create two buttons -->
|
||||
<button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
|
||||
<button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
|
||||
<button class="basic-btn" id="btn-pan-left">3. Pan left</button>
|
||||
<!-- Create two buttons -->
|
||||
<button class="basic-btn" id="btn-get-tiles">1. Download Tiles</button>
|
||||
<button class="basic-btn" id="btn-online-offline">2. Go Offline</button>
|
||||
<button class="basic-btn" id="btn-pan-left">3. Pan left</button>
|
||||
|
||||
<div id="map"></div>
|
||||
<div id="map"></div>
|
||||
|
||||
<script>
|
||||
var map;
|
||||
<script>
|
||||
var map;
|
||||
|
||||
// Make sure to reference the offline tiles library within the require statement!
|
||||
require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
|
||||
function(Map,on){
|
||||
// Make sure to reference the offline tiles library within the require statement!
|
||||
require(["esri/map","dojo/on","../dist/offline-tiles-advanced-min.js", "dojo/domReady!"],
|
||||
function(Map,on){
|
||||
|
||||
// Check if browser state is online or offline
|
||||
Offline.check();
|
||||
Offline.on('up down', updateState );
|
||||
// Check if browser state is online or offline
|
||||
Offline.check();
|
||||
Offline.on('up down', updateState );
|
||||
|
||||
// For cancelling the download of tiles
|
||||
var _wantToCancel;
|
||||
// For cancelling the download of tiles
|
||||
var _wantToCancel;
|
||||
|
||||
// Set up min and max boundaries for retrieving tiles
|
||||
var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
|
||||
// Set up min and max boundaries for retrieving tiles
|
||||
var minZoomAdjust = -1, maxZoomAdjust = 1, mMinZoom, mMaxZoom;
|
||||
|
||||
// Set up button click listeners.
|
||||
var btnGetTiles = document.getElementById("btn-get-tiles");
|
||||
var btnOnlineOffline = document.getElementById("btn-online-offline");
|
||||
var btnPanLeft = document.getElementById("btn-pan-left");
|
||||
// Set up button click listeners.
|
||||
var btnGetTiles = document.getElementById("btn-get-tiles");
|
||||
var btnOnlineOffline = document.getElementById("btn-online-offline");
|
||||
var btnPanLeft = document.getElementById("btn-pan-left");
|
||||
|
||||
on(btnGetTiles,"click",downloadTiles);
|
||||
on(btnOnlineOffline,"click",goOnlineOffline);
|
||||
on(btnPanLeft,"click",panLeft);
|
||||
on(btnGetTiles,"click",downloadTiles);
|
||||
on(btnOnlineOffline,"click",goOnlineOffline);
|
||||
on(btnPanLeft,"click",panLeft);
|
||||
|
||||
// Initialize Esri.Map
|
||||
map = new Map("map", {
|
||||
//basemap: "topo", // comment out this basemap!
|
||||
center: [-122.45, 37.75], // longitude, latitude
|
||||
zoom: 13
|
||||
});
|
||||
// Initialize Esri.Map
|
||||
map = new Map("map", {
|
||||
//basemap: "topo", // comment out this basemap!
|
||||
center: [-122.45, 37.75], // longitude, latitude
|
||||
zoom: 13
|
||||
});
|
||||
|
||||
// Now we initialize a topo tiled basemap service to be offline-enabled.
|
||||
tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
|
||||
"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
|
||||
function(evt){
|
||||
// Now we initialize a topo tiled basemap service to be offline-enabled.
|
||||
tileLayer = O.esri.Tiles.OfflineTileEnablerLayer(
|
||||
"http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
|
||||
function(evt){
|
||||
console.log("Offline tile lib enabled. App is: " + Offline.state);
|
||||
},
|
||||
true);
|
||||
},
|
||||
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;
|
||||
});
|
||||
})
|
||||
// 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);
|
||||
// Add our offline tile layer to the map instead of using the default basemap!
|
||||
map.addLayer(tileLayer);
|
||||
|
||||
function downloadTiles(){
|
||||
function downloadTiles(){
|
||||
|
||||
// First we need to empty the database.
|
||||
tileLayer.deleteAllTiles(function(success,err){
|
||||
// First we need to empty the database.
|
||||
tileLayer.deleteAllTiles(function(success,err){
|
||||
|
||||
var zoom = getMinMaxZoom();
|
||||
var extent = tileLayer.getExtentBuffer(0,map.extent);
|
||||
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";
|
||||
}
|
||||
// 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.finishedDownloading )
|
||||
{
|
||||
btnGetTiles.innerHTML = "Saving to phone 100% - Tap to Cancel";
|
||||
|
||||
if( progress.cancelRequested )
|
||||
{
|
||||
if( progress.cancelRequested )
|
||||
{
|
||||
alert("Tile download was cancelled");
|
||||
}
|
||||
else
|
||||
{
|
||||
}
|
||||
else
|
||||
{
|
||||
alert("Tile download complete");
|
||||
}
|
||||
}
|
||||
|
||||
btnGetTiles.innerHTML = '1. Download Tiles';
|
||||
}
|
||||
return _wantToCancel; //determines if a cancel request has been issued
|
||||
});
|
||||
});
|
||||
}
|
||||
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");
|
||||
}
|
||||
}
|
||||
// Force the tileLayer between online and offline
|
||||
function goOnlineOffline(){
|
||||
if(btnOnlineOffline.innerHTML == "2. Go Offline"){
|
||||
btnOnlineOffline.innerHTML = "2. Go Online";
|
||||
tileLayer.goOffline();
|
||||
document.body.style.backgroundColor = "red";
|
||||
console.log("tileLayer is offline");
|
||||
}
|
||||
else{
|
||||
btnOnlineOffline.innerHTML = "2. Go Offline";
|
||||
tileLayer.goOnline();
|
||||
document.body.style.backgroundColor = "black";
|
||||
console.log("tileLayer is online");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Set the tileLayer online or offline.
|
||||
// When set to offline, the map will look for tiles in the tiles database
|
||||
function updateState(){
|
||||
if(Offline.state === 'up'){
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOnline();
|
||||
}
|
||||
else{
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOffline();
|
||||
}
|
||||
}
|
||||
// Set the tileLayer online or offline.
|
||||
// When set to offline, the map will look for tiles in the tiles database
|
||||
function updateState(){
|
||||
if(Offline.state === 'up'){
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOnline();
|
||||
}
|
||||
else{
|
||||
if(typeof tileLayer != "undefined") tileLayer.goOffline();
|
||||
}
|
||||
}
|
||||
|
||||
// Utility function to validate min and max zoom settings of the map
|
||||
function getMinMaxZoom(){
|
||||
// Utility function to validate min and max zoom settings of the map
|
||||
function getMinMaxZoom(){
|
||||
|
||||
var zoom = {};
|
||||
var min = tileLayer.getLevel() + minZoomAdjust;
|
||||
var max = tileLayer.getLevel() + maxZoomAdjust;
|
||||
zoom.max = Math.min(mMaxZoom, max); //prevent errors by setting the tile layer floor
|
||||
zoom.min = Math.max(mMinZoom, min); //prevent errors by setting the tile layer ceiling
|
||||
var zoom = {};
|
||||
var min = tileLayer.getLevel() + minZoomAdjust;
|
||||
var max = tileLayer.getLevel() + maxZoomAdjust;
|
||||
zoom.max = Math.min(mMaxZoom, max); //prevent errors by setting the tile layer floor
|
||||
zoom.min = Math.max(mMinZoom, min); //prevent errors by setting the tile layer ceiling
|
||||
|
||||
return zoom;
|
||||
}
|
||||
return zoom;
|
||||
}
|
||||
|
||||
function panLeft(){
|
||||
map.panLeft();
|
||||
}
|
||||
function panLeft(){
|
||||
map.panLeft();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
||||
</div>
|
||||
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade in" id="mapTab">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<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>
|
||||
<img id="img-offline-indicator" src="../samples/images/blue-pin.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div id="mapDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade in" id="mapTab">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<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>
|
||||
<img id="img-offline-indicator" src="../samples/images/blue-pin.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div id="mapDiv"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- id="code" -->
|
||||
</div><!-- id="myTabContent" -->
|
||||
</div><!-- id="step4" -->
|
||||
</div>
|
||||
</div><!-- id="code" -->
|
||||
</div><!-- id="myTabContent" -->
|
||||
</div><!-- id="step4" -->
|
||||
|
||||
</br>
|
||||
</div><!-- class="tab-content well" -->
|
||||
</div><!-- class="col-sm-12 col-md-12 col-lg-12" -->
|
||||
<hr>
|
||||
</br>
|
||||
</div><!-- class="tab-content well" -->
|
||||
</div><!-- class="col-sm-12 col-md-12 col-lg-12" -->
|
||||
<hr>
|
||||
</div> <!-- /container -->
|
||||
|
||||
<!-- mapping code -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user