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 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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://labs.metacarta.com/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 GML layer with GeoRSS format and a style map. markerLayer = new OpenLayers.Layer.GML("Some images from Flickr", "xml/georss-flickr.xml", { format: OpenLayers.Format.GeoRSS, formatOptions: { // 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; } }, // 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> <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 id="map" class="smallmap"></div> </body> </html> |