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>