1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>OpenLayers Paging Strategy Example</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <script src="../lib/OpenLayers.js"></script>
7 <script type="text/javascript">
8 var map, photos, paging;
9 OpenLayers.ProxyHost = (window.location.host == "localhost") ?
10 "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
13 map = new OpenLayers.Map('map', {
14 restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
16 var base = new OpenLayers.Layer.WMS("Imagery",
17 ["http://t1.hypercube.telascience.org/tiles?",
18 "http://t2.hypercube.telascience.org/tiles?",
19 "http://t3.hypercube.telascience.org/tiles?",
20 "http://t4.hypercube.telascience.org/tiles?"],
24 var style = new OpenLayers.Style({
25 externalGraphic: "${img_url}",
29 paging = new OpenLayers.Strategy.Paging();
31 photos = new OpenLayers.Layer.Vector("Photos", {
32 strategies: [new OpenLayers.Strategy.Fixed(), paging],
33 protocol: new OpenLayers.Protocol.HTTP({
34 url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
37 sort: "interestingness-desc",
39 request: "GetFeatures",
42 bbox: [-180, -90, 180, 90]
44 format: new OpenLayers.Format.GML()
46 styleMap: new OpenLayers.StyleMap(style)
49 map.addLayers([base, photos]);
50 photos.events.on({"featuresadded": updateButtons});
51 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
54 function updateButtons() {
55 document.getElementById("prev").disabled = (paging.pageNum() < 1);
56 document.getElementById("next").disabled = (paging.pageNum() >= paging.pageCount() - 1);
57 document.getElementById("num").innerHTML = paging.pageNum() + 1;
58 document.getElementById("count").innerHTML = paging.pageCount();
62 <body onload="init()">
63 <h1 id="title">Paging Strategy Example</h1>
65 Uses a paging strategy to cache large batches of features and render a page at a time.
67 <div id="map" class="smallmap"></div>
68 Displaying page <span id="num">0</span> of <span id="count">...</span>
69 <button id="prev" disabled="disabled" onclick="paging.pagePrevious();">previous</button>
70 <button id="next" disabled="disabled" onclick="paging.pageNext();">next</button>
73 <p>The Paging strategy lets you apply client side paging for protocols
74 that do not support paging on the server. In this case, the protocol requests a
75 batch of 100 features, the strategy caches those and supplies a single
76 page at a time to the layer.</p>