OpenLayers OpenLayers

root/trunk/openlayers/examples/georss-flickr.html

Revision 7448, 4.6 kB (checked in by ahocevar, 2 months ago)

modified georss-flickr example to make use of Layer.GML with format option instead of adding the features manually after parsing them using Format.GeoRSS.

  • Property svn:eol-style set to native
Line 
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
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">
6         .olPopupContent {
7             font-size: smaller;
8         }
9     </style>
10     <script src="../lib/OpenLayers.js"></script>
11     <script type="text/javascript">
12         var map, layer, markerLayer, style, popup;
13        
14
15         function init(){
16             map = new OpenLayers.Map('map', {maxResolution:'auto'});
17            
18             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
19                 "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
20             map.addLayer(layer);
21            
22             map.setCenter(new OpenLayers.LonLat(0, 0), 0);
23             map.addControl(new OpenLayers.Control.LayerSwitcher());
24            
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}"});
28            
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,
35                     property: "title",
36                     value: "*powder*"
37                 })
38             });
39             rule.filter.value2regex("*");
40            
41             // If the above rule does not apply, use a smaller pointRadius.
42             var elseRule = new OpenLayers.Rule({
43                 elseFilter: true,
44                 symbolizer: {pointRadius: 20}
45             });
46            
47             style.addRules([rule, elseRule]);
48            
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,
53                 formatOptions: {
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");
61                         return feature;
62                     }
63                 },
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({
67                     "default": style,
68                     "select": new OpenLayers.Style({pointRadius: 35})
69                 })
70             });
71             map.addLayer(markerLayer);
72            
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;
77                   if (popup) {
78                       map.removePopup(popup);
79                   }
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,
85                       true);
86                   map.addPopup(popup);
87               }
88             });
89             map.addControl(popupControl);
90            
91             popupControl.activate();
92         }
93     </script>
94   </head>
95   <body onload="init()">
96     <h1 id="title">GeoRSS from Flickr in OpenLayers</h1>
97     <p>The displayed GeoRSS feed has a <tt>&lt;media:thumbnail/&gt;</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>
99   </body>
100 </html>
Note: See TracBrowser for help on using the browser.