mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
180 lines
7.0 KiB
HTML
180 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<link rel="shortcut icon" href="../vendor/bootstrap-map-js/bootstrap_v3/docs-assets/ico/favicon.png">
|
|
|
|
<link rel="stylesheet" href="//js.arcgis.com/3.7/js/esri/css/esri.css">
|
|
|
|
<link rel="stylesheet" href="../vendor/bootstrap-map-js/bootstrap_v3/dist/css/bootstrap.css" >
|
|
<link rel="stylesheet" href="../vendor/bootstrap-map-js/src/css/bootstrapmap.css">
|
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" >
|
|
<link rel="stylesheet" href="../tiles/offlineProbe.css" >
|
|
<link rel="stylesheet" href="../tiles/style.css" >
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="../vendor/bootstrap-map-js/bootstrap_v3/docs-assets/js/html5shiv.js"></script>
|
|
<script src="../vendor/bootstrap-map-js/bootstrap_v3/docs-assets/js/respond.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<title>Offline</title>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="http://github.com/Esri/offline-editor-js"><i class="fa fa-html5"></i> JS Offline Mapping</s>
|
|
<a class="navbar-brand" href="http://developers.arcgis.com"><i class="fa fa-globe"></i> esri</a>
|
|
</div>
|
|
<!--
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Home</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
--><!--/.nav-collapse -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<h3>Map:<span id="mapTitle">[none]</span></h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-4">
|
|
<form role="form">
|
|
<div class="form-group">
|
|
<label class="control-label" for="minLevel">Min Zoom Level</label>
|
|
<input type="number" id="minLevel" name"minLevel" class="form-control" value=1 min=0 max=19>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" for="currentLevel">Current Zoom Level</label>
|
|
<input type="number" id="currentLevel" name"currentLevel" class="form-control" value=19 min=0 max=19>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label" for="maxLevel">Max Zoom Level</label>
|
|
<input type="number" id="maxLevel" name"maxLevel" class="form-control" value=19 min=0 max=19>
|
|
</div>
|
|
</form>
|
|
<table id="tile-count-table" class="table table-striped table-condensed table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Level</th>
|
|
<th>Tile Count</th>
|
|
<th>Size Mb (aprox.)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tile-count-table-body">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<!-- Bootstrap-map-js -->
|
|
<div id="mapDiv"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div id="ready-to-download-ui">
|
|
<div class="col-xs-12">
|
|
<button id="prepare-for-offline-btn" type="button" class="btn btn-primary"><i class="glyphicon glyphicon-cloud-download"></i> Prepare for Offline</button>
|
|
<button id="delete-all-tiles-btn" type="button" class="btn btn-danger"><i class="glyphicon glyphicon-floppy-remove"></i> Delete All Tiles</button>
|
|
<button id="go-offline-btn" type="button" class="btn btn-default"><i class="fa fa-chain-broken"></i> Go Offline</button>
|
|
<button id="go-online-btn" type="button" class="btn btn-default" disabled="disabled"><i class="fa fa-link"></i> Go Online</button>
|
|
<button id="update-offline-usage" type="button" class="btn btn-default"><i class="fa fa-refresh"></i> Usage: <span id="offline-usage">[click to update]</span></button>
|
|
<button id="show-stored-tiles" type="button" class="btn btn-default"><i class="fa fa-th"></i> <span id="show-stored-tiles-caption">Show Stored Tiles</span></button>
|
|
<button id="save-file" type="button" onclick="saveFile()" class="btn btn-default"><i class="glyphicon glyphicon-folder-open"></i> <span id="save-file-caption"> Save to File</span></button>
|
|
</div>
|
|
</div>
|
|
<div id="downloading-ui">
|
|
<div class="col-xs-1">
|
|
<button id="cancel-btn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
|
|
</div>
|
|
<div id="download-progress" class="col-xs-10">
|
|
<div class="progress progress-striped active">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width:0%;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="remaining-time" class="col-xs-1">__:__</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-4">
|
|
<div class="well lead step-1"><i class="fa fa-arrows"></i> 1. Navigate to your area of interest</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4">
|
|
<div class="well lead step-2"><i class="glyphicon glyphicon-cloud-download"></i> 2. Click 'Prepare for Offline' button</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-4">
|
|
<div class="well lead step-3"><i class="fa fa-chain-broken"></i> 3. Go Offline and enjoy!</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div><!-- /.container -->
|
|
|
|
<script src="//js.arcgis.com/3.7compact"></script>
|
|
<script src="../vendor/offline/offline.min.js"></script>
|
|
<script src="../vendor/IndexedDBShim/dist/IndexedDBShim.min.js"></script>
|
|
<script src="../tiles/offlineProbe.js"></script>
|
|
<script src="../tiles/main.js"></script>
|
|
<script src="../tiles/src/FileSaver.js"></script>
|
|
<script src="../tiles/src/Blob.js"></script>
|
|
<script>
|
|
function saveFile(){
|
|
require(["/offline/tiles/src/dbStore.js"],function(DBStore)
|
|
{ console.log('test')
|
|
var db = new DBStore();
|
|
db.init(function(result,val){
|
|
console.log(result + ", " + val)
|
|
|
|
var csv = "url,img,\r\n";
|
|
|
|
if(result == true){
|
|
db.getAllTiles(function(url,img,evt){
|
|
// console.log(url + ", " + img);
|
|
csv+= url + "," +img+"\r\n";
|
|
|
|
if(evt == "end"){
|
|
console.log(csv)
|
|
var blob = new Blob([csv], {type: "text/plain;charset=utf-8"});
|
|
saveAs(blob, "tiles.csv");
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<!--
|
|
<script src="../vendor/bootstrap-map-js/bootstrap_v3/docs-assets/js/jquery.js"></script>
|
|
<script src="../vendor/bootstrap-map-js/bootstrap_v3/dist/js/bootstrap.min.js"></script>
|
|
-->
|
|
</body>
|
|
</html> |