bd262fce41
Now the application no longer needs to care about the tile origin, because the CacheWrite control modifies the url if the CORS image loading is disabled and it is from a different origin. This only requires OpenLayers.ProxyHost to be properly configured. Also local storage keys use the original url instead of the proxied url, to make the CacheRead control work without proxy settings. No deferred exceptions are thrown any more. Instead, OpenLayers.Console is used to show an error message for security exceptions. We now check for OpenLayers.Tile.Image, because other tile types (e.g. UTFGrid) are not supported (yet). To make the same origin handling in the CacheWrite control easier, OpenLayers.Request now exposes the same origin logic from request.issue as a separate function, so it can also be used by other components.
45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<!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;</script>
|
|
<script src="offline-storage.js"></script>
|
|
</head>
|
|
<body onload="init()">
|
|
<h1 id="title">Offline Storage Example</h1>
|
|
|
|
<div id="tags">
|
|
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>
|