mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
176 lines
6.8 KiB
HTML
176 lines
6.8 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="offlineProbe.css" >
|
|
<link rel="stylesheet" href="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</a>
|
|
<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>
|
|
<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" style="display:none;"><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" class="btn btn-default"><i class="fa fa-download"></i> Save to File</button>
|
|
<span id="load-file" type="button" class="btn btn-default"><i class="fa fa-upload"></i> Load from File <input type="file" id="file-select" name="file-select"></span>
|
|
</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>
|
|
|
|
<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>
|
|
|
|
<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",
|
|
utils: locationPath + "/../../utils"
|
|
}
|
|
}
|
|
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="offlineProbe.js"></script>
|
|
<script src="tiles-indexed-db.js"></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> |