Basic steps for working with TPK packages for offline.
Here are the important directories to know:
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>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: #ffffff;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map{
position: absolute;
left: 0;
z-index: 1;
}
#header-div{
font-family: helvetica, serif;
background: #000000;
color: #ffffff;
width: 100%;
height: 90px;
display:inline-block;
vertical-align:middle;
line-height: 50px;
padding-left: 8px;
}
#input-container{
position: absolute;
}
#url-input{
position: relative;
padding-left: 10px;
margin-left: 10px;
margin-top: 40px;
width: 250px;
}
#url-btn{
position: relative;
}
#header-title{
position: relative;
float: right;
padding-right: 15px;
}
</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.10/"></script>
</head>
<body>
<div id="header-div">
<div id="input-container">
<input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
<button id="url-btn">Get file via url</button>
</div>
<div id="header-title">TPKLayer demo</div>
</div>
<div id="map"></div>
<script>
var map;
// Make sure to reference the tpk library within the require statement!
require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
var map, tpkLayer;
});
</script>
</body>
</html>
You should get an alert when TPK is fully downloaded.
<!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: #ffffff;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map{
position: absolute;
left: 0;
z-index: 1;
}
#header-div{
font-family: helvetica, serif;
background: #000000;
color: #ffffff;
width: 100%;
height: 90px;
display:inline-block;
vertical-align:middle;
line-height: 50px;
padding-left: 8px;
}
#input-container{
position: absolute;
}
#url-input{
position: relative;
padding-left: 10px;
margin-left: 10px;
margin-top: 40px;
width: 250px;
}
#url-btn{
position: relative;
}
#header-title{
position: relative;
float: right;
padding-right: 15px;
}
</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.10/"></script>
</head>
<body>
<div id="header-div">
<div id="input-container">
<input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
<button id="url-btn">Get file via url</button>
</div>
<div id="header-title">TPKLayer demo</div>
</div>
<div id="map"></div>
<script>
var map;
// Make sure to reference the tpk library within the require statement!
require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
var map, tpkLayer;
var url = document.getElementById("url-input");
var urlInputBtn = document.getElementById("url-btn");
urlInputBtn.onclick = function(){
getTPK();
};
// Initialize the Map and the TPKLayer
function initMap(entries){
tpkLayer = new O.esri.TPK.TPKLayer();
tpkLayer.on("progress", function (evt) {
console.log("Loading tpk...");
})
tpkLayer.extend(entries);
map = new Map("map");
map.addLayer(tpkLayer);
}
// 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.")
alert("We have TPK!");
}
else{
alert("There was a problem loading the file. " + this.status + ": " + this.statusText )
}
};
xhrRequest.send();
}
});
</script>
</body>
</html>
In this step we unzip the TPK file and then hand the result to TPKLayer.
<!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: #ffffff;
overflow: hidden;
font-family: "Trebuchet MS";
}
#map{
position: absolute;
left: 0;
z-index: 1;
}
#header-div{
font-family: helvetica, serif;
background: #000000;
color: #ffffff;
width: 100%;
height: 90px;
display:inline-block;
vertical-align:middle;
line-height: 50px;
padding-left: 8px;
}
#input-container{
position: absolute;
}
#url-input{
position: relative;
padding-left: 10px;
margin-left: 10px;
margin-top: 40px;
width: 250px;
}
#url-btn{
position: relative;
}
#header-title{
position: relative;
float: right;
padding-right: 15px;
}
</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.10/"></script>
</head>
<body>
<div id="header-div">
<div id="input-container">
<input type="text" id="url-input" value="../samples/tpks/Beirut.zip" />
<button id="url-btn">Get file via url</button>
</div>
<div id="header-title">TPKLayer demo</div>
</div>
<div id="map"></div>
<script>
var map;
// Make sure to reference the tpk library within the require statement!
require(["esri/map","dojo/on","../dist/offline-tpk-min.js", "dojo/domReady!"], function(Map,on) {
var map, tpkLayer;
var url = document.getElementById("url-input");
var urlInputBtn = document.getElementById("url-btn");
urlInputBtn.onclick = function(){
getTPK();
};
// Initialize the Map and the TPKLayer
function initMap(entries){
tpkLayer = new O.esri.TPK.TPKLayer();
tpkLayer.on("progress", function (evt) {
console.log("Loading tpk...");
})
tpkLayer.extend(entries);
map = new Map("map");
map.addLayer(tpkLayer);
}
// 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);
zipReader.close(function(evt){
console.log("Done reading zip file.")
})
}, function (err) {
alert("There was a problem reading the file!: " + err);
})
})
}
});
</script>
</body>
</html>