From 74a34ec14be00aee4f6605283ac846d62abfdbac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Sat, 24 Mar 2012 00:13:06 +0100
Subject: [PATCH 1/3] rely on the Flickr APIs in the strategy-bbox example

---
 examples/strategy-bbox.html | 84 ++++++++++++++++++++++++++-----------
 1 file changed, 59 insertions(+), 25 deletions(-)

diff --git a/examples/strategy-bbox.html b/examples/strategy-bbox.html
index 3b53c778da..1674113829 100644
--- a/examples/strategy-bbox.html
+++ b/examples/strategy-bbox.html
@@ -10,20 +10,46 @@
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, photos;
-            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
-                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
-        
+
+            /**
+             * 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', {
-                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
-                });
-                var base = new OpenLayers.Layer.WMS("Imagery", 
-                    ["http://t1.hypercube.telascience.org/tiles?",
-		     "http://t2.hypercube.telascience.org/tiles?",
-		     "http://t3.hypercube.telascience.org/tiles?",
-		     "http://t4.hypercube.telascience.org/tiles?"], 
-                    {layers: 'landsat7'}
-                );
+                map = new OpenLayers.Map('map');
+
+                var base = new OpenLayers.Layer.OSM();
 
                 var style = new OpenLayers.Style({
                     externalGraphic: "${img_url}",
@@ -31,24 +57,28 @@
                 });
 
                 photos = new OpenLayers.Layer.Vector("Photos", {
-                    strategies: [new OpenLayers.Strategy.BBOX()],
-                    protocol: new OpenLayers.Protocol.HTTP({
-                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                    projection: "EPSG:4326",
+                    strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1})],
+                    protocol: new OpenLayers.Protocol.Script({
+                        url: "http://api.flickr.com/services/rest",
                         params: {
-                            format: "WFS",
-                            sort: "interestingness-desc",
-                            service: "WFS",
-                            request: "GetFeatures",
-                            srs: "EPSG:4326",
-                            maxfeatures: 10
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
+                            format: 'json',
+                            method: 'flickr.photos.search',
+                            extras: 'geo,url_s',
+                            per_page: 10,
+                            page: 1
                         },
-                        format: new OpenLayers.Format.GML()
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
                     }),
                     styleMap: new OpenLayers.StyleMap(style)
                 });
 
                 map.addLayers([base, photos]);
-                map.setCenter(new OpenLayers.LonLat(-116.45, 35.42), 5);
+                map.setCenter(
+                        new OpenLayers.LonLat(-567468.5392481,
+                                              4950672.5471436), 5);
             }
             
         </script>
@@ -56,7 +86,7 @@
     <body onload="init()">
         <h1 id="title">BBOX Strategy Example</h1>
         <div id="tags">
-            vector, feature, stylemap, wfs, bbox, strategy, cleanup
+            vector, feature, stylemap, bbox, strategy, script, flickr
         </div>    
         <p id="shortdesc">
             Uses a BBOX strategy to request features within a bounding box.
@@ -67,6 +97,10 @@
             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>

From d574f09e6abe150446d7cc6c8b94b0e498100c60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Wed, 28 Mar 2012 14:13:31 +0200
Subject: [PATCH 2/3] rely on the Flickr APIs in the strategy-paging example

---
 examples/strategy-paging.html | 73 ++++++++++++++++++++++++-----------
 1 file changed, 51 insertions(+), 22 deletions(-)

diff --git a/examples/strategy-paging.html b/examples/strategy-paging.html
index c51518a2ee..204bac9d27 100644
--- a/examples/strategy-paging.html
+++ b/examples/strategy-paging.html
@@ -10,20 +10,45 @@
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map, photos, paging;
-            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
-                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+
+            /**
+             * 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', {
-                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
-                });
-                var base = new OpenLayers.Layer.WMS("Imagery", 
-                    ["http://t1.hypercube.telascience.org/tiles?",
-		     "http://t2.hypercube.telascience.org/tiles?",
-		     "http://t3.hypercube.telascience.org/tiles?",
-		     "http://t4.hypercube.telascience.org/tiles?"], 
-                    {layers: 'landsat7'}
-                );
+                map = new OpenLayers.Map('map');
+                var base = new OpenLayers.Layer.OSM();
 
                 var style = new OpenLayers.Style({
                     externalGraphic: "${img_url}",
@@ -33,19 +58,21 @@
                 paging = new OpenLayers.Strategy.Paging();
 
                 photos = new OpenLayers.Layer.Vector("Photos", {
+                    projection: "EPSG:4326",
                     strategies: [new OpenLayers.Strategy.Fixed(), paging],
-                    protocol: new OpenLayers.Protocol.HTTP({
-                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                    protocol: new OpenLayers.Protocol.Script({
+                        url: "http://api.flickr.com/services/rest",
                         params: {
-                            format: "WFS",
-                            sort: "interestingness-desc",
-                            service: "WFS",
-                            request: "GetFeatures",
-                            srs: "EPSG:4326",
-                            maxfeatures: 100,
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
+                            format: 'json',
+                            method: 'flickr.photos.search',
+                            extras: 'geo,url_s',
+                            per_page: 100,
+                            page: 1,
                             bbox: [-180, -90, 180, 90]
                         },
-                        format: new OpenLayers.Format.GML()
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
                     }),
                     styleMap: new OpenLayers.StyleMap(style)
                 });
@@ -66,7 +93,7 @@
     <body onload="init()">
         <h1 id="title">Paging Strategy Example</h1>
         <div id="tags">
-            vector, feature, stylemap, wfs, paging, strategy, cleanup
+            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.
@@ -81,6 +108,8 @@
             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>

From 9a9a5ba452c1ca63471b863cec40c92f01e6f7b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Wed, 28 Mar 2012 14:20:24 +0200
Subject: [PATCH 3/3] rely on the Flickr APIs in the strategy-cluster example

---
 examples/strategy-cluster.html | 73 ++++++++++++++++++++++++----------
 1 file changed, 51 insertions(+), 22 deletions(-)

diff --git a/examples/strategy-cluster.html b/examples/strategy-cluster.html
index bebbfddc82..e4ca7ce0e7 100644
--- a/examples/strategy-cluster.html
+++ b/examples/strategy-cluster.html
@@ -70,20 +70,45 @@
         <script src="animator.js"></script>
         <script type="text/javascript">
             var map, template;
-            OpenLayers.ProxyHost = (window.location.host == "localhost") ?
-                "/cgi-bin/proxy.cgi?url=" : "proxy.cgi?url=";
+
+            /**
+             * 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', {
-                    restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
-                });
-                var base = new OpenLayers.Layer.WMS("Imagery", 
-                    ["http://t1.hypercube.telascience.org/tiles?",
-		     "http://t2.hypercube.telascience.org/tiles?",
-		     "http://t3.hypercube.telascience.org/tiles?",
-		     "http://t4.hypercube.telascience.org/tiles?"], 
-                    {layers: 'landsat7'}
-                );
+                map = new OpenLayers.Map('map');
+                var base = new OpenLayers.Layer.OSM();
 
                 var style = new OpenLayers.Style({
                     pointRadius: "${radius}",
@@ -101,22 +126,24 @@
                 });
 
                 var photos = new OpenLayers.Layer.Vector("Photos", {
+                    projection: "EPSG:4326",
                     strategies: [
                         new OpenLayers.Strategy.Fixed(),
                         new OpenLayers.Strategy.Cluster()
                     ],
-                    protocol: new OpenLayers.Protocol.HTTP({
-                        url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr",
+                    protocol: new OpenLayers.Protocol.Script({
+                        url: "http://api.flickr.com/services/rest",
                         params: {
-                            format: "WFS",
-                            sort: "interestingness-desc",
-                            service: "WFS",
-                            request: "GetFeatures",
-                            srs: "EPSG:4326",
-                            maxfeatures: 150,
+                            api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
+                            format: 'json',
+                            method: 'flickr.photos.search',
+                            extras: 'geo,url_s',
+                            per_page: 150,
+                            page: 1,
                             bbox: [-180, -90, 180, 90]
                         },
-                        format: new OpenLayers.Format.GML()
+                        callbackKey: 'jsoncallback',
+                        format: new OpenLayers.Format.Flickr()
                     }),
                     styleMap: new OpenLayers.StyleMap({
                         "default": style,
@@ -172,7 +199,7 @@
     <body onload="init()">
         <h1 id="title">Cluster Strategy Example</h1>
         <div id="tags">
-            vector, feature, stylemap, wfs, cluster, strategy, cleanup
+            vector, feature, stylemap, cluster, strategy, flickr, script
         </div>         
         <p id="shortdesc">
             Uses a cluster strategy to render points representing clusters of features.
@@ -181,6 +208,8 @@
         <div id="docs">
             <p>The Cluster strategy lets you display points representing clusters
             of features within some pixel distance.</p>
+            <p>This particular example uses the <a
+                href="http://www.flickr.com/services/api/">Flickr API.</a></p>
         </div>
         <div id="photos"></div>
         <p>Hover over a cluster on the map to see the photos it includes.</p>