mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
this sample has been merged into the samples/tiles sample, and save/load functionality is now part of the library
This commit is contained in:
Javier Abadia
parent
5428192ad9
commit
e0d173f55f
@ -1,203 +0,0 @@
|
|||||||
<!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/tiles-indexed-db.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-xs-12" id="error-div">
|
|
||||||
<div class="alert alert-danger">
|
|
||||||
<a class="close" data-dismiss="alert">×</a>
|
|
||||||
<i class="fa fa-info-circle"></i><strong></strong> <span id="error-msg">Change a few things up and try submitting again..</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-4">
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-8">
|
|
||||||
<h3>Map: <span id="mapTitle">[none]</span></h3>
|
|
||||||
<p id="mapDescription">[none]</p>
|
|
||||||
</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>
|
|
||||||
var locationPath = location.pathname.replace(/\/[^/]+$/, "");
|
|
||||||
var dojoConfig = {
|
|
||||||
paths: {
|
|
||||||
tiles: locationPath + "/../lib/tiles",
|
|
||||||
vendor: locationPath + "/../vendor"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.proxyPath = "../lib/proxy.php";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<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/tiles-indexed-db.js"></script>
|
|
||||||
<!-- really should use AMD loading -->
|
|
||||||
<script src="../lib/tiles/FileSaver.js"></script>
|
|
||||||
<script src="../lib/tiles/Blob.js"></script>
|
|
||||||
<!-- -->
|
|
||||||
<script>
|
|
||||||
function saveFile(){
|
|
||||||
require(["tiles/dbStore"],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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user