1 files changed, 106 insertions, 0 deletions
diff --git a/misc/openlayers/examples/strategy-bbox.html b/misc/openlayers/examples/strategy-bbox.html
new file mode 100644
index 0000000..1674113
--- /dev/null
+++ b/misc/openlayers/examples/strategy-bbox.html
@@ -0,0 +1,106 @@
+<!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 BBOX 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;
+
+            /**
+             * 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
+                });
+
+                photos = new OpenLayers.Layer.Vector("Photos", {
+                    projection: "EPSG:4326",
+                    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1})],
+                    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: 10,
+                            page: 1
+                        },
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
+                    }),
+                    styleMap: new OpenLayers.StyleMap(style)
+                });
+
+                map.addLayers([base, photos]);
+                map.setCenter(
+                        new OpenLayers.LonLat(-567468.5392481,
+                                              4950672.5471436), 5);
+            }
+            
+        </script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">BBOX Strategy Example</h1>
+        <div id="tags">
+            vector, feature, stylemap, bbox, strategy, script, flickr
+        </div>    
+        <p id="shortdesc">
+            Uses a BBOX strategy to request features within a bounding box.
+        </p>
+        <div id="map" class="smallmap"></div>
+        <div id="docs">
+            <p>The BBOX strategy requests data within a bounding box.  When the
+            previously requested data bounds are invalidated (by browsing to
+            some area not covered by those bounds), another request for data
+            is issued.</p>
+
+            <p>This particular example uses the <a
+                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
+
+        </div>
+    </body>
+</html>