ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #345 from elemoine/flickr

Browse Source 
timed out on "examples/strategy-cluster.html"
This commit is contained in:
Éric Lemoine
2012-03-28 21:31:17 -07:00
parent 032293c26f 9a9a5ba452
commit 801b32a667
3 changed files with 161 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/strategy-bbox.html
+59 -25
View File
@@ -10,20 +10,46 @@
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var map, photos; 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() { function init() {
map = new OpenLayers.Map('map', { map = new OpenLayers.Map('map');
restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90)
}); var base = new OpenLayers.Layer.OSM();
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'}
);
var style = new OpenLayers.Style({ var style = new OpenLayers.Style({
externalGraphic: "${img_url}", externalGraphic: "${img_url}",
@@ -31,24 +57,28 @@
}); });
photos = new OpenLayers.Layer.Vector("Photos", { photos = new OpenLayers.Layer.Vector("Photos", {
strategies: [new OpenLayers.Strategy.BBOX()], projection: "EPSG:4326",
protocol: new OpenLayers.Protocol.HTTP({ strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1})],
url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr", protocol: new OpenLayers.Protocol.Script({
url: "http://api.flickr.com/services/rest",
params: { params: {
format: "WFS", api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
sort: "interestingness-desc", format: 'json',
service: "WFS", method: 'flickr.photos.search',
request: "GetFeatures", extras: 'geo,url_s',
srs: "EPSG:4326", per_page: 10,
maxfeatures: 10 page: 1
}, },
format: new OpenLayers.Format.GML() callbackKey: 'jsoncallback',
format: new OpenLayers.Format.Flickr()
}), }),
styleMap: new OpenLayers.StyleMap(style) styleMap: new OpenLayers.StyleMap(style)
}); });
map.addLayers([base, photos]); 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> </script>
@@ -56,7 +86,7 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">BBOX Strategy Example</h1> <h1 id="title">BBOX Strategy Example</h1>
<div id="tags"> <div id="tags">
vector, feature, stylemap, wfs, bbox, strategy, cleanup vector, feature, stylemap, bbox, strategy, script, flickr
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Uses a BBOX strategy to request features within a bounding box. Uses a BBOX strategy to request features within a bounding box.
@@ -67,6 +97,10 @@
previously requested data bounds are invalidated (by browsing to previously requested data bounds are invalidated (by browsing to
some area not covered by those bounds), another request for data some area not covered by those bounds), another request for data
is issued.</p> is issued.</p>
<p>This particular example uses the <a
href="http://www.flickr.com/services/api/">Flickr API.</a></p>
</div> </div>
</body> </body>
</html> </html>
examples/strategy-cluster.html
+51 -22
View File
@@ -70,20 +70,45 @@
<script src="animator.js"></script> <script src="animator.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var map, template; 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() { function init() {
map = new OpenLayers.Map('map', { map = new OpenLayers.Map('map');
restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90) var base = new OpenLayers.Layer.OSM();
});
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'}
);
var style = new OpenLayers.Style({ var style = new OpenLayers.Style({
pointRadius: "${radius}", pointRadius: "${radius}",
@@ -101,22 +126,24 @@
}); });
var photos = new OpenLayers.Layer.Vector("Photos", { var photos = new OpenLayers.Layer.Vector("Photos", {
projection: "EPSG:4326",
strategies: [ strategies: [
new OpenLayers.Strategy.Fixed(), new OpenLayers.Strategy.Fixed(),
new OpenLayers.Strategy.Cluster() new OpenLayers.Strategy.Cluster()
], ],
protocol: new OpenLayers.Protocol.HTTP({ protocol: new OpenLayers.Protocol.Script({
url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr", url: "http://api.flickr.com/services/rest",
params: { params: {
format: "WFS", api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
sort: "interestingness-desc", format: 'json',
service: "WFS", method: 'flickr.photos.search',
request: "GetFeatures", extras: 'geo,url_s',
srs: "EPSG:4326", per_page: 150,
maxfeatures: 150, page: 1,
bbox: [-180, -90, 180, 90] bbox: [-180, -90, 180, 90]
}, },
format: new OpenLayers.Format.GML() callbackKey: 'jsoncallback',
format: new OpenLayers.Format.Flickr()
}), }),
styleMap: new OpenLayers.StyleMap({ styleMap: new OpenLayers.StyleMap({
"default": style, "default": style,
@@ -172,7 +199,7 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">Cluster Strategy Example</h1> <h1 id="title">Cluster Strategy Example</h1>
<div id="tags"> <div id="tags">
vector, feature, stylemap, wfs, cluster, strategy, cleanup vector, feature, stylemap, cluster, strategy, flickr, script
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Uses a cluster strategy to render points representing clusters of features. Uses a cluster strategy to render points representing clusters of features.
@@ -181,6 +208,8 @@
<div id="docs"> <div id="docs">
<p>The Cluster strategy lets you display points representing clusters <p>The Cluster strategy lets you display points representing clusters
of features within some pixel distance.</p> 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>
<div id="photos"></div> <div id="photos"></div>
<p>Hover over a cluster on the map to see the photos it includes.</p> <p>Hover over a cluster on the map to see the photos it includes.</p>
examples/strategy-paging.html
+51 -22
View File
@@ -10,20 +10,45 @@
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var map, photos, paging; 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() { function init() {
map = new OpenLayers.Map('map', { map = new OpenLayers.Map('map');
restrictedExtent: new OpenLayers.Bounds(-180, -90, 180, 90) var base = new OpenLayers.Layer.OSM();
});
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'}
);
var style = new OpenLayers.Style({ var style = new OpenLayers.Style({
externalGraphic: "${img_url}", externalGraphic: "${img_url}",
@@ -33,19 +58,21 @@
paging = new OpenLayers.Strategy.Paging(); paging = new OpenLayers.Strategy.Paging();
photos = new OpenLayers.Layer.Vector("Photos", { photos = new OpenLayers.Layer.Vector("Photos", {
projection: "EPSG:4326",
strategies: [new OpenLayers.Strategy.Fixed(), paging], strategies: [new OpenLayers.Strategy.Fixed(), paging],
protocol: new OpenLayers.Protocol.HTTP({ protocol: new OpenLayers.Protocol.Script({
url: "http://labs.metacarta.com/flickrbrowse/flickr.py/flickr", url: "http://api.flickr.com/services/rest",
params: { params: {
format: "WFS", api_key: 'b5e8c0e287e678671c3d8b2c0f3ced85',
sort: "interestingness-desc", format: 'json',
service: "WFS", method: 'flickr.photos.search',
request: "GetFeatures", extras: 'geo,url_s',
srs: "EPSG:4326", per_page: 100,
maxfeatures: 100, page: 1,
bbox: [-180, -90, 180, 90] bbox: [-180, -90, 180, 90]
}, },
format: new OpenLayers.Format.GML() callbackKey: 'jsoncallback',
format: new OpenLayers.Format.Flickr()
}), }),
styleMap: new OpenLayers.StyleMap(style) styleMap: new OpenLayers.StyleMap(style)
}); });
@@ -66,7 +93,7 @@
<body onload="init()"> <body onload="init()">
<h1 id="title">Paging Strategy Example</h1> <h1 id="title">Paging Strategy Example</h1>
<div id="tags"> <div id="tags">
vector, feature, stylemap, wfs, paging, strategy, cleanup vector, feature, stylemap, paging, strategy, flickr, script
</div> </div>
<p id="shortdesc"> <p id="shortdesc">
Uses a paging strategy to cache large batches of features and render a page at a time. 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 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 batch of 100 features, the strategy caches those and supplies a single
page at a time to the layer.</p> 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> </div>
</body> </body>
</html> </html>