mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
574 lines
22 KiB
HTML
574 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!--<link rel="shortcut icon" href="../images/favicon.ico">-->
|
|
|
|
<title>Offline-editor-js</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.10/js/esri/css/esri.css">
|
|
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="css/style.css" rel="stylesheet">
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<style>
|
|
|
|
#mapDiv {
|
|
min-height: 300px;
|
|
max-height: 1000px;
|
|
}
|
|
|
|
pre {
|
|
overflow: auto;
|
|
word-wrap: normal;
|
|
white-space: pre;
|
|
font-family: Courier,"Courier New";
|
|
font-size: 13px;
|
|
background-color: #fee9cc;
|
|
}
|
|
|
|
pre.prettyprint {
|
|
border: 1px solid #cccccc !important;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<a class="hidden-xs" href="https://github.com/Esri/offline-editor-js">
|
|
<img style="position: absolute; top: 50; right: 0; border: 0; width:150px;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub">
|
|
</a>
|
|
|
|
<header id="header"></header>
|
|
|
|
<!-- Main jumbotron for a primary marketing message or call to action -->
|
|
<div class="jumbotron">
|
|
<div class="container">
|
|
<h1>Getting Started with TPKs</h1>
|
|
<p>Basic steps for working with <b>TPK packages</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">
|
|
|
|
<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>
|
|
</ul>
|
|
|
|
<div class="tab-content well">
|
|
<div class="tab-pane active" id="Step1">
|
|
<h3>Step 1: Fill in the basics</h3>
|
|
<p>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.</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>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>
|
|
|
|
</code>
|
|
</pre>
|
|
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
|
</div>
|
|
<div class="tab-pane" id="Step2">
|
|
<h3>Step 2: Retrieve TPK.</h3>
|
|
<p>Download and unzip the TPK. You should get an alert when TPK is fully downloaded. </p>
|
|
<p>NOTE: If you have a TPK file you will have to change its type to .zip for the browser to recognize it. </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>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>
|
|
|
|
</code>
|
|
</pre>
|
|
<div class="alert alert-info">NOTE: Replace paths with your references.</div>
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane" id="Step3">
|
|
<h3>Step 3: Display TPK tiles.</h3>
|
|
<p>In this step we hand the zip file entries over to TPKLayer to inflate the map.</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>
|
|
|
|
</br>
|
|
|
|
|
|
<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>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>
|
|
|
|
</code>
|
|
</pre>
|
|
<div class="alert alert-info"><b>NOTE:</b> Replace paths with your references. This sample may look different than our live sample.</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade in" id="mapTab">
|
|
<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-default" type="button">Go!</button>
|
|
</span>
|
|
</div><!-- /input-group -->
|
|
</div><!-- /.col-lg-12 -->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<div id="mapDiv"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div><!-- id="myTabContent" -->
|
|
</div><!-- id="step4" -->
|
|
|
|
</br>
|
|
</div><!-- class="tab-content well" -->
|
|
</div><!-- class="col-sm-12 col-md-12 col-lg-12" -->
|
|
<hr>
|
|
</div> <!-- /container -->
|
|
|
|
<!-- Include a reference to IndexedDBShim for library to work on Safari 7.x -->
|
|
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="http://js.arcgis.com/3.10/"></script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
$("#header").load("../demo/header.html");
|
|
});
|
|
|
|
var map;
|
|
|
|
// Make sure to reference the offline tiles library within the require statement!
|
|
require(
|
|
["esri/map",
|
|
"dojo/on",
|
|
"//esri.github.com/bootstrap-map-js/src/js/bootstrapmap.js",
|
|
"../dist/offline-tpk-min.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();
|
|
};
|
|
|
|
// Initialize the Map and the TPKLayer
|
|
function initMap(entries){
|
|
|
|
if(map){
|
|
map.destroy();
|
|
}
|
|
|
|
map = Bootstrapmap.create("mapDiv",{
|
|
//basemap: "topo", // comment out this basemap!
|
|
});
|
|
|
|
tpkLayer = new O.esri.TPK.TPKLayer();
|
|
tpkLayer.on("progress", function (evt) {
|
|
console.log("TPK loading...");
|
|
})
|
|
tpkLayer.extend(entries);
|
|
|
|
map.addLayer(tpkLayer);
|
|
}
|
|
|
|
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("ERRROR")}
|
|
|
|
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();
|
|
|
|
}
|
|
|
|
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>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
<!-- add syntax highlighting to code snippts -->
|
|
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
|
|
</body>
|
|
</html> |