summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/strategy-paging.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/strategy-paging.html')
-rw-r--r--misc/openlayers/examples/strategy-paging.html115
1 files changed, 0 insertions, 115 deletions
diff --git a/misc/openlayers/examples/strategy-paging.html b/misc/openlayers/examples/strategy-paging.html
deleted file mode 100644
index 204bac9..0000000
--- a/misc/openlayers/examples/strategy-paging.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!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>