OpenLayers Paging Strategy Example

http://openlayers.org/dev/examples/strategy-paging.html

HTML

<script src="http://fbug.googlecode.com/svn/lite/branches/flexBox/content/firebug-lite-dev.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
  <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><br />

  <p><a href="http://openlayers.org/dev/examples/strategy-paging.html">Original
  OpenLayers Example</a>.</p>

JavaScript

(function($) {

    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:32643',
            strategies: [new OpenLayers.Strategy.Fixed(), paging],
            protocol: new OpenLayers.Protocol.Script({
                url: 'http://api.flickr.com/services/rest',
                params: {
                    api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
                    format: 'json',
            ...