1 files changed, 115 insertions, 0 deletions
diff --git a/misc/openlayers/examples/strategy-paging.html b/misc/openlayers/examples/strategy-paging.html
new file mode 100644
index 0000000..204bac9
--- /dev/null
+++ b/misc/openlayers/examples/strategy-paging.html
@@ -0,0 +1,115 @@
+<!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 Paging Strategy Example</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="../lib/OpenLayers.js"></script>
+        <script type="text/javascript">
+            var map, photos, paging;
+
+            /**
+             * A specific format for parsing Flickr API JSON responses.
+             */
+            OpenLayers.Format.Flickr = OpenLayers.Class(OpenLayers.Format, {
+                read: function(obj) {
+                    if(obj.stat === 'fail') {
+                        throw new Error(
+                            ['Flickr failure response (',
+                             obj.code,
+                             '): ',
+                             obj.message].join(''));
+                    }
+                    if(!obj || !obj.photos ||
+                       !OpenLayers.Util.isArray(obj.photos.photo)) {
+                        throw new Error(
+                            'Unexpected Flickr response');
+                    }
+                    var photos = obj.photos.photo, photo,
+                        x, y, point,
+                        feature, features = [];
+                    for(var i=0,l=photos.length; i<l; i++) {
+                        photo = photos[i];
+                        x = photo.longitude;
+                        y = photo.latitude;
+                        point = new OpenLayers.Geometry.Point(x, y);
+                        feature = new OpenLayers.Feature.Vector(point, {
+                            title: photo.title,
+                            img_url: photo.url_s
+                        });
+                        features.push(feature);
+                    }
+                    return features;
+                }
+            });
+        
+            function init() {
+                map = new OpenLayers.Map('map');
+                var base = new OpenLayers.Layer.OSM();
+
+                var style = new OpenLayers.Style({
+                    externalGraphic: "${img_url}",
+                    pointRadius: 30
+                });
+
+                paging = new OpenLayers.Strategy.Paging();
+
+                photos = new OpenLayers.Layer.Vector("Photos", {
+                    projection: "EPSG:4326",
+                    strategies: [new OpenLayers.Strategy.Fixed(), paging],
+                    protocol: new OpenLayers.Protocol.Script({
+                        url: "http://api.flickr.com/services/rest",
+                        params: {
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
+                            format: 'json',
+                            method: 'flickr.photos.search',
+                            extras: 'geo,url_s',
+                            per_page: 100,
+                            page: 1,
+                            bbox: [-180, -90, 180, 90]
+                        },
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
+                    }),
+                    styleMap: new OpenLayers.StyleMap(style)
+                });
+
+                map.addLayers([base, photos]);
+                photos.events.on({"featuresadded": updateButtons});
+                map.setCenter(new OpenLayers.LonLat(0, 0), 1);
+            }
+            
+            function updateButtons() {
+                document.getElementById("prev").disabled = (paging.pageNum() < 1);
+                document.getElementById("next").disabled = (paging.pageNum() >= paging.pageCount() - 1);
+                document.getElementById("num").innerHTML = paging.pageNum() + 1;
+                document.getElementById("count").innerHTML = paging.pageCount();
+            }
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">Paging Strategy Example</h1>
+        <div id="tags">
+            vector, feature, stylemap, paging, strategy, flickr, script
+        </div>        
+        <p id="shortdesc">
+            Uses a paging strategy to cache large batches of features and render a page at a time.
+        </p>
+        <div id="map" class="smallmap"></div>
+        Displaying page <span id="num">0</span> of <span id="count">...</span>
+        <button id="prev" disabled="disabled" onclick="paging.pagePrevious();">previous</button>
+        <button id="next" disabled="disabled" onclick="paging.pageNext();">next</button>
+        <br><br>
+        <div id="docs">
+            <p>The Paging strategy lets you apply client side paging for protocols
+            that do not support paging on the server.  In this case, the protocol requests a
+            batch of 100 features, the strategy caches those and supplies a single
+            page at a time to the layer.</p>
+            <p>This particular example uses the <a
+                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
+        </div>
+    </body>
+</html>