Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

107 lines (97 sloc) 4.373 kb
<!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>
Jump to Line
Something went wrong with that request. Please try again.