mirror of
https://github.com/Esri/offline-editor-js.git
synced 2025-12-15 15:20:05 +00:00
196 lines
10 KiB
HTML
196 lines
10 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">
|
|
|
|
<!-- 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>
|
|
.voffset20px {padding-top: 20px;}
|
|
</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>Offline-editor-js</h1>
|
|
<p>Examples of how to build lightweight offline mapping applications for the web.</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-md-4">
|
|
<h2>Editing</h2>
|
|
<p>Build web mapping and geospatial applications that use the <a href="http://developers.arcgis.com/en/documentation" target="_blank">ArcGIS JavaScript API</a>
|
|
and allow you to temporarily store adds, updates and deletes of geographic features while the device is offline.
|
|
It also provides limited support for attachments.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2>Tiles</h2>
|
|
<p>Stores tile images from tiled map services locally. Once tiles are stored your mapping app can seemlessly transition between online and offline modes.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h2>TPK</h2>
|
|
<p>Add .tpk files (binary tile packages) directly to your app whether it is online or offline. Use TPKs as the stand-alone mapping source file or alongside tiled map services.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
<div class="container">
|
|
<div class="row">
|
|
<h1 id="examples" class="page-header">Get Started</h1>
|
|
<p class="lead">Go <a href="../demo/getstarted.html"> here</a> to try out basic step-by-step samples. </p>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- /container -->
|
|
<div class="container">
|
|
<div class="bs-docs-section">
|
|
<h1 id="examples" class="page-header">Examples</h1>
|
|
<p class="lead">Check out the following full-featured applications. </p>
|
|
<div class="row bs-examples">
|
|
<div class="col-xs-4 col-md-4">
|
|
<a class="thumbnail" href="../samples/tiles-indexed-db.html">
|
|
<img src="images/tiles-demo-thumb.png">
|
|
</a>
|
|
<h3>Tiles Only</h3>
|
|
<p>Gives you an overview of the functionality related to storing and managing multiple layers of tiles.</p>
|
|
</div>
|
|
<div class="col-xs-4 col-md-4">
|
|
<a class="thumbnail" href="../samples/draw-pointlinepoly-offline.html">
|
|
<img src="images/cop-demo-thumb.png">
|
|
</a>
|
|
<h3>Feature Editing</h3>
|
|
<p>This app shows how add, update and delete geographic features while offline and auto-resync when internet is reestablished. </p>
|
|
</div>
|
|
<div class="col-xs-4 col-md-4">
|
|
<a class="thumbnail" href="../samples/attachments-editor.html">
|
|
<img src="images/attachments-demo-thumb.png">
|
|
</a>
|
|
<h3>Attachments</h3>
|
|
<p>Demonstrates working with geographic feature attachments such as images and associating them with a feature while offline.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row bs-examples voffset20px">
|
|
<div class="col-xs-4 col-md-4">
|
|
<a class="thumbnail" href="../samples/tpk-layer.html">
|
|
<img src="images/tpk-demo-thumb.png">
|
|
</a>
|
|
<h3>TPK Only</h3>
|
|
<p>Shows how to integrate <a href="http://resources.arcgis.com/en/help/main/10.1/index.html#//006600000457000000">.tpk files</a> into your mapping app. Tile packages are a set of tile images from a map compressed into a single binary file.</p>
|
|
</div>
|
|
<div class="col-xs-4 col-md-4">
|
|
<a class="thumbnail" href="../samples/appcache-features.html">
|
|
<img src="images/appcachefeatures-demo-thumb.png">
|
|
</a>
|
|
<h3>AppCache Features and Tiles</h3>
|
|
<p>This mobile feature editing demo is configured to maintain your edits and tiles after offline browser reloads and restarts.</p>
|
|
</div>
|
|
<div class="col-xs-4 col-md-4">
|
|
<a class="thumbnail" href="../samples/appcache-tiles.html">
|
|
<img src="images/appcachetiles-demo-thumb.png">
|
|
</a>
|
|
<h3>AppCache Tiles Only</h3>
|
|
<p>A bare bones app that demos maintaining the map tiles after offline browser reloads and restarts.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bs-docs-section">
|
|
<h1 id="examples" class="page-header">Supported Browsers</h1>
|
|
<p class="lead">The offline libraries are supported on the <strong>latest versions</strong> of the following browsers and operating systems.<br>
|
|
</p>
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<td></td>
|
|
<th>Chrome</th>
|
|
<th>Firefox</th>
|
|
<th>Internet Explorer</th>
|
|
<th>Opera</th>
|
|
<th>Safari</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th>Android</th>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok">+</span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
|
|
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
|
|
<td class="text-muted">N/A</td>
|
|
</tr>
|
|
<tr>
|
|
<th>iOS</th>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-muted">N/A</td>
|
|
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok">*</span> <span class="sr-only">Supported</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Mac OS X</th>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok">*</span> <span class="sr-only">Supported</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th>Windows</th>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
|
|
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
|
|
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
|
|
<td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="lead">Hybrid app developers (e.g. PhoneGap\Cordova) targeting Android: we currently only support the Chrome browser.
|
|
We've only done very limited proof-of-concept testing using WebView.
|
|
Make sure you do thorough testing on as many different phones and tablets as possible.
|
|
One suggestion is to build a test app and run the Unit Test suite which is in this project under /test.
|
|
</p>
|
|
<span class="text-success"><span class="glyphicon glyphicon-ok">+</span></span> - Currently only the Chrome browser is supported on Android. <br>
|
|
<span class="text-success"><span class="glyphicon glyphicon-ok">*</span></span> - means that <a href="https://github.com/axemclion/IndexedDBShim"> IndexedDBShim.js</a> may be required on this browser/platform. More info available in the <a href="https://github.com/Esri/offline-editor-js"> README </a> under Dependencies.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$("#header").load("../demo/header.html");
|
|
});
|
|
</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>
|
|
</body>
|
|
</html> |