openlayers/examples/georss-flickr.html

   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>