openlayers/examples/strategy-paging.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2     <head>
   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=";
  11
  12             function init() {
  13                 map = new OpenLayers.Map('map', {
  14                     restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
  15                 });
  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?"],
  21                     {layers: 'landsat7'}
  22                 );
  23
  24                 var style = new OpenLayers.Style({
  25                     externalGraphic: "${img_url}",
  26                     pointRadius: 30
  27                 });
  28
  29                 paging = new OpenLayers.Strategy.Paging();
  30
  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",
  35                         params: {
  36                             format: "WFS",
  37                             sort: "interestingness-desc",
  38                             service: "WFS",
  39                             request: "GetFeatures",
  40                             srs: "EPSG:4326",
  41                             maxfeatures: 100,
  42                             bbox: [-180, -90, 180, 90]
  43                         },
  44                         format: new OpenLayers.Format.GML()
  45                     }),
  46                     styleMap: new OpenLayers.StyleMap(style)
  47                 });
  48
  49                 map.addLayers([base, photos]);
  50                 photos.events.on({"featuresadded": updateButtons});
  51                 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
  52             }
  53
  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();
  59             }
  60         </script>
  61     </head>
  62     <body onload="init()">
  63         <h1 id="title">Paging Strategy Example</h1>
  64         <p id="shortdesc">
  65             Uses a paging strategy to cache large batches of features and render a page at a time.
  66         </p>
  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>
  71         <br /><br />
  72         <div id="docs">
  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>
  77         </div>
  78     </body>
  79 </html>