blob: 6a1ebd6b54c935488a819874a1fe139b74c7f603 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Offline Storage Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olControlAttribution {
bottom: 0;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script>OpenLayers.Console = window.console || OpenLayers.Console;</script>
<script src="offline-storage.js"></script>
</head>
<body onload="init()">
<h1 id="title">Offline Storage Example</h1>
<div id="tags">
mobile, local storage, persistence, cache, html5
</div>
<div id="shortdesc">Caching viewed tiles</div>
<div id="map" class="smallmap"></div>
<div>Cache status: <span id="hits"></span> <span id="status"></span></div>
<div><input id="read" type="checkbox">Read from cache [<input id="tileloadstart" name="type" type="radio">try cache first] [<input id="tileerror" name="type" type="radio">try online first<sup>1</sup>]</div>
<div><input id="write" type="checkbox">Write to cache</div>
<div><button id="clear">Clear cached tiles</button><button id="seed">Seed current extent</button>
<br>
<p><sup>1</sup> <small>Disconnect your device from the network to test - only works for same origin layers.</small></p>
<br>
<div id="docs">
<p>This example shows how to use the CacheWrite control to cache tiles
that are being viewed in the browser's local storage, and how to use
the CacheRead control to use cached tiles when offline or on a slow
connection. See <a href="offline-storage.js">offline-storage.js</a>
for the source code.</p>
</div>
</body>
</html>
|
