]> dev.renevier.net Git - syp.git/blob - openlayers/examples/strategy-paging.html
add some margin around image
[syp.git] / 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>