This example shows how to use the CacheRead control to fetch cached
+ tiles from the browser's Local Storage. As you pan and zoom the map,
+ you can see how the number of cache hits incrases as you browse regions
+ that are available in the cache.
+
To fill the cache with tiles, switch to the
+ cache-write.html example.
+
+
diff --git a/examples/cache-read.js b/examples/cache-read.js
new file mode 100644
index 0000000000..f8c42a9115
--- /dev/null
+++ b/examples/cache-read.js
@@ -0,0 +1,40 @@
+var map, cacheRead;
+function init(){
+ map = new OpenLayers.Map({
+ div: "map",
+ projection: "EPSG:900913",
+ layers: [
+ new OpenLayers.Layer.WMS("OSGeo", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
+ layers: "basic"
+ }, {
+ eventListeners: {
+ tileloadstart: function(evt) {
+ // send requests through proxy
+ evt.tile.url = "proxy.cgi?url=" + encodeURIComponent(evt.tile.url);
+ },
+ tileloaded: updateHits
+ }
+ })
+ ],
+ center: [0,0],
+ zoom: 1
+ });
+ cacheRead = new OpenLayers.Control.CacheRead();
+ map.addControl(cacheRead);
+
+
+
+ // User interface
+ var status = document.getElementById("status");
+ var hits = 0;
+
+ // update the number of cached tiles and detect local storage support
+ function updateHits(evt) {
+ hits += evt.tile.url.substr(0, 5) === "data:";
+ if (window.localStorage) {
+ status.innerHTML = hits + " cache hits.";
+ } else {
+ status.innerHTML = "Local storage not supported. Try a different browser.";
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/cache-write.html b/examples/cache-write.html
new file mode 100644
index 0000000000..e36f3de9b7
--- /dev/null
+++ b/examples/cache-write.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+ OpenLayers Cache Write Example
+
+
+
+
+
+
+
Cache Write Example
+
+
+ local storage, persistence, cache, html5
+
+
+
Caching viewed tiles
+
+
+
Cache status:
+
+
+
+
This example shows how to use the CacheWrite control to cache the
+ tiles. Caching is turned on, and as you pan and zoom the map, every
+ tile that is loaded is also copied to the browsers Local Storage.
+
To use the cached tiles, switch to the
+ cache-read.html example.