Skip to content

Commit

Permalink
Merge pull request openlayers#345 from elemoine/flickr
Browse files Browse the repository at this point in the history 
timed out on "examples/strategy-cluster.html"
  • Loading branch information
Éric Lemoine committed Mar 29, 2012
2 parents 032293c + 9a9a5ba commit 801b32a
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 69 deletions.
84 changes: 59 additions & 25 deletions examples/strategy-bbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,53 +10,83 @@
<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}",
pointRadius: 30
});

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>
</head>
<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.
Expand All @@ -67,6 +97,10 @@ <h1 id="title">BBOX Strategy Example</h1>
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>
73 changes: 51 additions & 22 deletions examples/strategy-cluster.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}",
Expand All @@ -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,
Expand Down Expand Up @@ -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.
Expand All @@ -181,6 +208,8 @@ <h1 id="title">Cluster Strategy Example</h1>
<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>
Expand Down
73 changes: 51 additions & 22 deletions examples/strategy-paging.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}",
Expand All @@ -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)
});
Expand All @@ -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.
Expand All @@ -81,6 +108,8 @@ <h1 id="title">Paging Strategy Example</h1>
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>

0 comments on commit 801b32a

Please sign in to comment.