1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
4 <link rel="stylesheet" href="style.css" type="text/css" />
5 <style type="text/css">
10 <script src="../lib/OpenLayers.js"></script>
11 <script type="text/javascript">
12 var map, layer, markerLayer, style, popup;
16 map = new OpenLayers.Map('map', {maxResolution:'auto'});
18 layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
19 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
22 map.setCenter(new OpenLayers.LonLat(0, 0), 0);
23 map.addControl(new OpenLayers.Control.LayerSwitcher());
25 // create a property style that reads the externalGraphic url from
26 // the thumbail attribute of the rss item
27 style = new OpenLayers.Style({externalGraphic: "${thumbnail}"});
29 // create a rule with a point symbolizer that will make the thumbnail
30 // larger if the title of the rss item contains "powder"
31 var rule = new OpenLayers.Rule({
32 symbolizer: {pointRadius: 30},
33 filter: new OpenLayers.Filter.Comparison({
34 type: OpenLayers.Filter.Comparison.LIKE,
39 rule.filter.value2regex("*");
41 // If the above rule does not apply, use a smaller pointRadius.
42 var elseRule = new OpenLayers.Rule({
44 symbolizer: {pointRadius: 20}
47 style.addRules([rule, elseRule]);
49 // Create a GML layer with GeoRSS format and a style map.
50 markerLayer = new OpenLayers.Layer.GML("Some images from Flickr",
51 "xml/georss-flickr.xml", {
52 format: OpenLayers.Format.GeoRSS,
54 // adds the thumbnail attribute to the feature
55 createFeatureFromItem: function(item) {
56 var feature = OpenLayers.Format.GeoRSS.prototype
57 .createFeatureFromItem.apply(this, arguments);
58 feature.attributes.thumbnail =
59 this.getElementsByTagNameNS(
60 item, "*", "thumbnail")[0].getAttribute("url");
64 // Giving the style map keys for "default" and "select"
65 // rendering intent, to make the image larger when selected
66 styleMap: new OpenLayers.StyleMap({
68 "select": new OpenLayers.Style({pointRadius: 35})
71 map.addLayer(markerLayer);
73 // control that will show a popup when clicking on a thumbnail
74 var popupControl = new OpenLayers.Control.SelectFeature(markerLayer, {
75 onSelect: function(feature) {
76 var pos = feature.geometry;
78 map.removePopup(popup);
80 popup = new OpenLayers.Popup("popup",
81 new OpenLayers.LonLat(pos.x, pos.y),
82 new OpenLayers.Size(254,320),
83 "<h3>" + feature.attributes.title + "</h3>" +
84 feature.attributes.description,
89 map.addControl(popupControl);
91 popupControl.activate();
95 <body onload="init()">
96 <h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
97 <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>
98 <div id="map" class="smallmap"></div>