1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<!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">
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.olPopupContent {
font-size: smaller;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer, markerLayer, style, popup;
function init(){
map = new OpenLayers.Map('map', {maxResolution:'auto'});
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
map.addControl(new OpenLayers.Control.LayerSwitcher());
// create a property style that reads the externalGraphic url from
// the thumbail attribute of the rss item
style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});
// create a rule with a point symbolizer that will make the thumbnail
// larger if the title of the rss item contains "powder"
var rule = new OpenLayers.Rule({
symbolizer: {pointRadius: 30},
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.LIKE,
property: "title",
value: "*powder*"
})
});
rule.filter.value2regex("*");
// If the above rule does not apply, use a smaller pointRadius.
var elseRule = new OpenLayers.Rule({
elseFilter: true,
symbolizer: {pointRadius: 20}
});
style.addRules([rule, elseRule]);
// Create a Vector layer with GeoRSS format and a style map.
markerLayer = new OpenLayers.Layer.Vector("Some images from Flickr", {
protocol: new OpenLayers.Protocol.HTTP({
url: "xml/georss-flickr.xml",
format: new OpenLayers.Format.GeoRSS({
// adds the thumbnail attribute to the feature
createFeatureFromItem: function(item) {
var feature = OpenLayers.Format.GeoRSS.prototype.createFeatureFromItem.apply(this, arguments);
feature.attributes.thumbnail = this.getElementsByTagNameNS(item, "*", "thumbnail")[0].getAttribute("url");
return feature;
}
})
}),
strategies: [new OpenLayers.Strategy.Fixed()],
// Giving the style map keys for "default" and "select"
// rendering intent, to make the image larger when selected
styleMap: new OpenLayers.StyleMap({
"default": style,
"select": new OpenLayers.Style({pointRadius: 35})
})
});
map.addLayer(markerLayer);
// control that will show a popup when clicking on a thumbnail
var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
onSelect: function(feature) {
var pos = feature.geometry;
if (popup) {
map.removePopup(popup);
}
popup = new OpenLayers.Popup("popup",
new OpenLayers.LonLat(pos.x, pos.y),
new OpenLayers.Size(254,320),
"<h3>" + feature.attributes.title + "</h3>" +
feature.attributes.description,
true);
map.addPopup(popup);
}
});
map.addControl(popupControl);
popupControl.activate();
}
</script>
</head>
<body onload="init()">
<h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
<div id="tags">
georss, style, styling, marker, flickr, thumbnail, image, rule
</div>
<p id="shortdesc">
Display a flickr-feed on top of the map
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>The displayed GeoRSS feed has a <tt><media:thumbnail/></tt>
property for each item. An extended <tt>createFeatureFromItem()</tt>
function is used to add this attribute to the attributes hash of each
feature read in by <tt>OpenLayers.Format.GeoRSS</tt>. The example is
configured with a style to render each item with its thumbnail image.
Also, to show how rules work, we defined a rule that if the title of an
rss item contains "powder", it will be rendered larger than the others.</p>
</div>
</body>
</html>
|
